1. 了解XSS攻击的原理与防护目标
XSS防护技巧：HTML过滤与转义方法，前端开发者必知的实战要点 是围绕跨站脚本攻击（XSS）的成因、传播路径与防护目标展开的技术要点集，帮助前端开发者建立系统性的防护意识。
XSS（跨站脚本攻击）主要包括存储型、反射型和DOM型三大类型，其核心目标是将恶意脚本注入到网页中并在受信任的上下文中执行，从而窃取会话、篡改页面或劫持用户行为。
对于前端开发者而言，防护的首要目标是让用户输入在渲染前经过合规处理，从而减少可执行代码进入浏览器执行环境的机会。
XSS的主要攻击场景
反射型XSS常见于提交表单后回显的URL参数被直接输出，攻击者利用浏览器回显的文本来触发脚本执行。
存储型XSS可能在留言板、评论区等持久化存储点反复触发，一旦被注入的脚本被永久存储，后续访问都可能执行该恶意代码。
防护原则与实现要点
遵循“输出前转义、输入前过滤、策略化的内容安全策略（CSP）”可以显著降低攻击面。
确保对用户输入在渲染阶段处于不可执行的状态，避免直接把拼接字符串赋值到 innerHTML，而应优先使用文本插入或经过过滤的安全片段。
2. HTML过滤与转义的实战技巧
HTML过滤与转义是前端防护的两翼，过滤负责源头清除潜在危险的片段，转义确保输出时不可执行。
在实际项目中，优先采用白名单过滤策略，并对输出进行严格的转义处理。
白名单过滤策略
使用白名单允许的标签与属性集合，尽量限制，如仅允许 a、p、ul、li、strong、em、br 等，避免使用 script、onclick 等事件属性。
结合域名、上下文（HTML、属性值、文本节点）进行分级过滤，在服务器和前端双重过滤会更稳健。
// 简单的白名单示例（示意，不替代成熟库）const ALLOWED_TAGS = ['a','p','strong','em','ul','li','br'];const ALLOWED_ATTR = {'a':['href','title']};function whitelistFilter(html) {// 真实实现应借助成熟库进行解析与重组// 这里只是示意性占位return html;}在项目前端应将渲染阶段的HTML片段先通过库进行清洗，避免任何未知标签进入DOM，以降低攻击面。
转义与输出编码方法
转义是最直接的防护手段，将特殊字符替换为实体编码，例如将 < 转为 <，让浏览器把输入当作文本处理。
在动态插入文本时，优先使用 textContent/innerText 而不是 innerHTML，这样可以避免执行脚本。
function escapeHtml(s) {return s.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');}3. 常用前端防御工具与落地实践
引入成熟的防XSS库可以显著提升防护覆盖率，并降低自研实现中的疏漏。
本节聚焦两类工具：库级解决方案（如 DOMPurify）和策略级最佳实践，帮助开发者在真实项目中落地。
使用DOMPurify库的要点
DOMPurify 能有效清洗不可信的 HTML，并提供安全的默认配置。
在复杂场景下，可以通过配置参数进行精细化控制，例如允许的标签与属性、是否允许 URL 链接等，务必在部署前进行严格测试。
import DOMPurify from 'dompurify';const clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b','strong','em','p','a','ul','li','br'],ALLOWED_ATTR: ['href','title']
});
自定义过滤的注意点与性能
自定义过滤要避免“黑名单”陷阱，因为新的攻击向量可能绕过旧规则。
性能方面，对大文本或高频渲染的场景应避免阻塞主线程，可以用 Web Worker 或按需缓存过滤结果。
此外，结合 CSP（Content Security Policy）可再加一道防线，将未授权的脚本执行限制在最小范围。
