JavaScript XSS 防御实战3种转义函数对比与DOM操作安全指南1. XSS攻击的本质与防御思路当用户输入的内容被当作代码执行时XSS攻击就发生了。想象这样一个场景用户在评论区输入scriptalert(XSS)/script如果前端直接将其插入DOM脚本就会被执行。这种攻击能窃取Cookie、篡改页面内容甚至发起恶意请求。现代前端框架虽然降低了XSS风险但在处理动态内容时仍需谨慎。防御的核心原则是永远不要信任用户输入。具体表现为输入过滤对特殊字符进行转义输出编码根据插入位置选择不同的编码方式安全DOM操作使用安全的API处理动态内容2. 三种转义函数深度对比2.1 htmlEncode函数实现与原理function htmlEncode(str) { return str.replace(/[]/g, tag ({ : amp;, : lt;, : gt;, : #39;, : quot; }[tag])); }这个函数将危险字符转换为HTML实体防止它们被解析为标签。测试用例// 测试用例 const maliciousInput scriptalert(1)/script; console.log(htmlEncode(maliciousInput)); // 输出lt;scriptgt;alert(1)lt;/scriptgt;2.2 textContent与innerHTML的区别特性textContentinnerHTML处理方式作为纯文本处理解析HTML标签性能更快较慢XSS防护自动转义直接执行脚本适用场景动态文本内容需要渲染HTML时// 安全示例 const div document.createElement(div); div.textContent userInput; // 自动转义 // 危险示例 div.innerHTML userInput; // 可能执行脚本2.3 setAttribute的安全用法属性值也需要特殊处理特别是href、src等动态属性// 安全设置属性 element.setAttribute(data-value, userInput); // 危险示例 element.setAttribute(onclick, userInput); // 可能执行代码提示避免使用用户输入直接设置事件处理器属性onclick等3. DOM操作安全清单3.1 安全API与危险API对照安全API危险替代方案备注textContentinnerHTML纯文本时首选createElementappendChildinsertAdjacentHTML更可控addEventListeneron-event属性避免拼接字符串3.2 动态内容插入最佳实践// 安全创建DOM节点 const createSafeElement (tag, text) { const el document.createElement(tag); el.textContent text; return el; }; // 使用DocumentFragment批量操作 const fragment document.createDocumentFragment(); items.forEach(item { fragment.appendChild(createSafeElement(li, item)); }); container.appendChild(fragment);3.3 特殊场景处理处理富文本内容时需要使用专业的净化库// 使用DOMPurify净化HTML import DOMPurify from dompurify; const clean DOMPurify.sanitize(userHtml, { ALLOWED_TAGS: [b, i, em, strong, a], ALLOWED_ATTR: [href, title] });URL处理需要额外验证function safeSetUrl(element, url) { if (!url.startsWith(http) || url.includes(javascript:)) { return false; } element.href url; return true; }4. 现代框架中的XSS防护4.1 React的自动转义机制React默认会对所有插值进行转义function Comment({text}) { // text中的HTML标签会被自动转义 return div{text}/div; }需要渲染HTML时使用dangerouslySetInnerHTMLdiv dangerouslySetInnerHTML{{__html: sanitizedHtml}} /4.2 Vue的v-html指令Vue的插值语法{{}}会自动转义使用v-html时需要确保内容安全div v-htmltrustedHtml/div4.3 框架间的共性问题即使使用框架也要注意避免在模板中拼接HTML谨慎使用第三方组件的不安全props服务端渲染(SSR)时仍需转义5. 实战测试与工具推荐5.1 构建测试页面创建一个包含三种转义场景的测试页面!DOCTYPE html html body div idraw/div div idencoded/div div idtextContent/div script const payload img srcx onerroralert(XSS); // 原始插入 document.getElementById(raw).innerHTML payload; // 编码后插入 document.getElementById(encoded).innerHTML htmlEncode(payload); // 使用textContent document.getElementById(textContent).textContent payload; /script /body /html5.2 安全检测工具ESLint插件eslint-plugin-security自动化扫描OWASP ZAP、Burp SuiteChrome扩展XSS Hunter5.3 持续防护策略内容安全策略(CSP)配置示例Content-Security-Policy: default-src self; script-src self unsafe-inline; style-src self unsafe-inline;定期安全审计依赖项漏洞监控在实际项目中我遇到过一个典型案例用户通过SVG文件上传注入恶意脚本。解决方案是不仅验证文件类型还要解析内容并移除危险元素。这提醒我们安全防御需要层层把关不能依赖单一措施。