登录
首页 >  文章 >  前端

如何利用 Trusted Types API 在底层阻止不受信任的字符串注入以防御 DOM XSS

时间:2026-05-24 12:18:23 214浏览 收藏

编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《如何利用 Trusted Types API 在底层阻止不受信任的字符串注入以防御 DOM XSS》,文章讲解的知识点主要包括,如果你对文章方面的知识点感兴趣,就不要错过golang学习网,在这可以对大家的知识积累有所帮助,助力开发能力的提升。

Trusted Types 本身无防护作用,仅当通过 HTTP 响应头启用 require-trusted-types-for 'script' 并配合 trusted-types default 时,才对 innerHTML、eval 等高危 sink 抛出 TypeError 实现拦截。

如何利用 Trusted Types API 在底层阻止不受信任的字符串注入以防御 DOM XSS

Trusted Types 本身不阻止任何注入,它只在 CSP 强制模式开启后才对特定 DOM sink 抛出 TypeError;没配 require-trusted-types-for 'script' 响应头,JS 里写一百个策略也完全无效。

必须通过 HTTP 响应头启用强制拦截

浏览器只认 Content-Security-Policy 响应头, 标签、JS 动态设置、开发服务器 proxy 重写都不可靠。漏掉任一指令,机制即失效:

  • require-trusted-types-for 'script' 是开关:没有它,所有 innerHTML 赋值照常执行,零拦截
  • trusted-types default 必须显式声明:default 是 fallback 策略名,不写会导致 policy.createHTML() 直接抛错而非降级
  • 上线前务必用 Content-Security-Policy-Report-Only + report-uri 收集违规,避免大面积白屏

哪些 DOM 操作真会被拦?别只盯 innerHTML

拦截范围由规范明确定义,不是“所有字符串赋值”。以下操作在启用 CSP 后会抛 TypeError: Failed to set an illegal value

  • element.innerHTML = stringelement.outerHTML = string
  • element.insertAdjacentHTML(position, string)
  • document.write(string)document.writeln(string)
  • location.href = 'javascript:...'(属于 'script' 类别)
  • eval(string)setTimeout(string, delay)setInterval(string, delay)

但这些不会被拦:element.textContentelement.setAttribute('data-value', string)JSON.parse()——它们本身不触发脚本执行。

策略函数里别做 HTML 解析或白名单过滤

策略函数是同步纯函数,每次 DOM 写入都会调用。在里面塞 DOMPurify.sanitize() 或复杂正则,等于把性能瓶颈和绕过风险全引到主线程:

  • 正则难覆盖所有变体(如 alert、大小写混写、注释绕过)
  • DOMPurify 在策略内调用会重复解析,高频渲染时卡顿明显
  • 正确做法是:90% 场景改用 textContent;必须插 HTML 时,用 Lit 的 html tag 或服务端预编译模板
  • 若真要动态生成,策略里只做最小转义:string.replace(/&/g, '&').replace(/, ',但要清楚这仍非万全之策

框架和间接调用是最大盲区

React 的 dangerouslySetInnerHTML、Vue 的 v-html、Angular 的 bypassSecurityTrustHtml() 都可能绕过 Trusted Types —— 它们内部是否走原生 innerHTML 赋值,取决于框架实现和版本。更危险的是间接路径:

  • el.setAttribute('innerHTML', string):属性名合法,但浏览器不识别为 sink,不拦截
  • Web Components 中 shadowRoot.innerHTML = string:部分浏览器尚未纳入 Trusted Types 检查范围
  • 策略加载前就执行的 innerHTML 赋值:比如策略 JS 在 DOMContentLoaded 后才加载,而首屏渲染早已完成

真正落地时,最难的从来不是写策略,而是确认整个应用的每一条 DOM 写入路径是否都被策略覆盖、是否被框架封装层绕过、是否在策略就绪前就已执行 —— 这些点一旦遗漏,防护就形同虚设。

今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>