前端开发必备输出转义技巧避免XSS攻击全解析
雨萱先看效果，再看代码
直接上手搞起来，输出转义这事儿其实挺简单的，但细节多得让人头疼。我今天就来分享一下我在项目中是怎么处理的。
最常用的场景：用户输入
最常见的就是处理用户输入了，比如评论、发帖这些。举个例子吧，用户在评论框里输入了一段包含HTML标签的内容，如果不做转义处理，页面就会乱套。亲测有效的方法是用DOMPurify库来处理。
javascript
import DOMPurify from 'dompurify';
const userInput = '<script>alert("XSS")</script>';
const safeOutput = DOMPurify.sanitize(userInput);
console.log(safeOutput); // 输出：<script>alert("XSS")</script>这个场景最好用DOMPurify，它不仅支持转义HTML标签，还能处理一些其他安全问题，比如XSS攻击。强烈建议直接用这种方式。
踩坑提醒：这三点一定注意
1. **别忘了初始化**：使用DOMPurify之前要确保它已经初始化好了，不然会报错。折腾了半天发现就是因为没初始化。
javascript
import DOMPurify from 'dompurify';
const window = require('global/window');
DOMPurify.setConfig({WHITESPACE: true, ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a']});2. **配置项要谨慎**：配置项一定要谨慎设置，特别是ALLOWED_TAGS，如果设置不当，可能会导致一些意想不到的问题。我在这里踩过好几次坑。
3. **不要过度依赖**：虽然DOMPurify很好用，但也不要完全依赖它。有时候还是需要自己手动处理一些特殊情况，比如某些特殊字符的转义。这里可以参考escape函数。
进阶技巧：模板引擎中的转义
如果你在使用模板引擎（比如Handlebars或EJS），那么转义也很重要。大多数模板引擎都内置了转义功能，但有时还需要手动处理。比如在Handlebars中：
handlebars
{{{safeOutput}}}这里用了三对大括号{{{}}}，这样就不会自动转义了。但如果内容是从用户输入来的，还是需要先用DOMPurify处理一遍。
实际应用：表单提交
在表单提交的时候，也需要对用户输入进行转义。通常我会在后端处理，但前端也可以做一层防护。比如在React中：
javascript
import React, { useState } from 'react';
import DOMPurify from 'dompurify';
const CommentForm = () => {
const [comment, setComment] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
const safeComment = DOMPurify.sanitize(comment);
console.log(safeComment);
// 提交到后端
};
return (
暂无评论