Jin 的个人思考

告别 innerHTML，迎接 setHTML：Firefox 148 XSS 保护 🛡️

来源: Mozilla Hacks | 评分: ⭐⭐⭐⭐⭐ 5星

XSS Security Firefox Web Security Sanitizer API

XSS：十年之久的 Web 安全噩梦

跨站脚本攻击 (XSS) 是 Web 上最普遍的安全漏洞之一。近十年来，它一直是 CWE-79，位列三大 Web 漏洞之中。

⚠️ XSS 危害：攻击者可以监控和操纵用户交互，持续窃取用户数据，漏洞存在多久就能偷多久。

现有方案的局限

Mozilla 从 2009 年开始牵头制定 Content-Security-Policy (CSP) 标准。尽管不断改进，但 CSP 未获得足够采用，无法保护长尾 Web 站点，因为它需要：

  • 对现有网站进行重大架构更改
  • 安全专家持续审查

Sanitizer API：标准化解决方案

Sanitizer API 提供了一种标准化的方法，将恶意 HTML 转换为无害 HTML。Firefox 148 是首个实现这一标准化安全增强 API 的浏览器！

使用 setHTML() 替代 innerHTML

// 之前 (不安全)
element.innerHTML = userInput;

// 现在 (安全)
element.setHTML(userInput);

自动净化示例

// 输入
document.body.setHTML(`<h1>Hello my name is <img src="x" onclick="alert('XSS')">`);

// 输出 (安全的)
<h1>Hello my name is</h1>

危险的 onclick 属性被自动移除！

自定义配置

如果默认配置太严格或太宽松，开发者可以提供自定义配置：

const sanitizer = new Sanitizer({
  elements: ['div', 'span', 'p'],
  attributes: {'*': ['class']}
});
element.setHTML(userInput, { sanitizer });

结合 Trusted Types 使用

更强的保护可以结合 Trusted Types：

  • 集中控制 HTML 解析和注入
  • 允许 setHTML() 同时阻止其他不安全的 HTML 插入方法
  • 帮助防止未来的 XSS 回滚

为什么这很重要

  • 零代码修改：只需将 innerHTML 替换为 setHTML()
  • 默认安全：内置净化，无需安全团队
  • 标准化：跨浏览器兼容
  • Firefox 领先：其他浏览器即将跟进
💡 开发者建议：立即将 innerHTML 替换为 setHTML()！可以使用 Sanitizer API Playground 进行实验。

总结

Sanitizer API 是 Web 安全的重大进步。它让所有开发者都能轻松防止 XSS 攻击，无需专门的安全团队或复杂的实施更改。

🕐 最后更新: 2026-03-18 | 来源: Mozilla Hacks