JavaScript防范XSS漏洞教程

JavaScript防范XSS绝非靠一个“万能函数”就能搞定，其核心在于深刻理解并严格匹配不同上下文（HTML内容、属性、URL、JS字符串）的转义规则，彻底禁用innerHTML、eval、document.write等危险API，并警惕看似安全却极易绕过的误区——如仅过滤标签、盲目信任服务端转义或误用textContent；真正可靠的防护是“上下文感知+白名单净化”，优先采用DOMPurify处理HTML、JSON.stringify处理JS字符串、encodeURIComponent处理URL，同时坚持结构化数据交互与原生DOM构建，因为再强大的库也无法弥补上下文错配带来的致命漏洞。

JavaScript 中无法靠单个函数“自动”防御 XSS，关键在于区分上下文、严格转义、避免危险 API。

哪些操作会直接触发 XSS

以下行为只要输入未过滤，就可能执行恶意脚本：

• innerHTML、outerHTML 赋值含用户数据的字符串
• document.write() 或 document.writeln() 写入未处理内容
• eval()、setTimeout(string, ...)、setInterval(string, ...) 执行拼接的字符串
• location.href、location.assign() 跳转到拼接的 URL（尤其含 javascript: 伪协议）
• 用 new Function(...) 动态构造函数

不同上下文要用不同的转义方式

HTML 内容、HTML 属性、URL、JS 字符串，各自有独立的转义规则。混用等于白做。

• 插入 HTML 内容（如 div.innerHTML = ...）：必须对 <、>、&、"、' 做 HTML 实体编码，推荐用 DOMPurify.sanitize()（而非仅转义）
• 写入 HTML 属性（如 el.setAttribute('title', userText)）：需先做 HTML 实体编码，且属性值必须用引号包裹（单/双皆可），避免闭合失败
• 拼入 URL（如 a.href = '/search?q=' + userInput）：必须用 encodeURIComponent()，不能用 encodeURI()（后者不编码 /、? 等）
• 嵌入 JS 字符串（如 console.log('${userInput}')）：需用 JSON 序列化——JSON.stringify(userInput)，它会正确处理引号、反斜杠和控制字符

哪些“看似安全”的做法其实很危险

开发者常误以为做了防护，实际仍可绕过：

• 只过滤