什么是trusted-typesW3C新世代防DOM XSS浏览器API完全指南3种可信类型与Policy机制详解【免费下载链接】trusted-typesA browser API to prevent DOM-Based Cross Site Scripting in modern web applications.项目地址: https://gitcode.com/gh_mirrors/tr/trusted-typestrusted-types是 W3C 推出的浏览器安全 API本仓库托管其规范草案与全平台 polyfill 实现核心目标只有一个在浏览器层面阻止 DOM-based XSS跨站脚本攻击。本文将带你完整理解它的 3 种可信类型TrustedHTML、TrustedScriptURL、TrustedScript与 Policy 策略机制并给出新手可直接落地的 3 步接入路线。一、为什么需要 Trusted TypesDOM XSS 到底发生在哪先说问题。DOM XSS 最常见的攻击路径是攻击者把可控数据URL 参数、表单输入等直接塞进某个危险的 DOM API——业内称之为注入点sink。常见的 sink 包括el.innerHTML/el.outerHTML—— 写入 HTML 字符串el.insertAdjacentHTML()、document.write()—— 动态插入 HTMLscript src、iframe srcdoc、object data—— 加载脚本或文档eval()、setTimeout(code)、onerror等内联事件处理器 —— 执行 JavaScript只要一个不可信字符串能流入上述任一 sinkXSS 漏洞就成立了。传统防御全靠开发者记得先转义、再写入容易遗漏、难以审计。Trusted Types 的思路是让浏览器亲自把关开启保护后sink只接受可信类型的值传入普通字符串会直接抛出 TypeError。这样记得转义就被变成了不经过策略就无法写入。官方说明文档 explainer.md 里提到安全评审者从此不必逐个审查 sink 的用法只需聚焦于数量极少的策略定义点即可。二、3 种可信类型与注入点一一对应Trusted Types 定义了3 种类型恰好覆盖 DOM XSS 的三类高危上下文类型与注入点的映射表TYPE_MAP见 src/trustedtypes.js可信类型用途典型注入点sinkTrustedHTML可信 HTML 片段innerHTML、outerHTML、insertAdjacentHTML()、document.write()、iframe.srcdocTrustedScriptURL可能执行脚本的资源 URLscript src、embed src、object data、importScripts()⚙️TrustedScript可信 JavaScript 代码块eval()、setTimeout(...)、script文本内容、内联事件处理器记忆口诀3 种类型与攻击者最想注入的 3 类内容一一对应——HTML、URL、JavaScript 代码。三、Policy 机制详解可信值的唯一入口3.1 核心思想禁止直接构造如果浏览器直接暴露new TrustedHTML(str)这样的构造函数防御就是空谈——任何人都能随时信任任意内容。因此 Trusted Types完全隐藏了类型构造函数产生可信值的唯一合法途径是通过trustedTypes.createPolicy()创建策略Policy再调用策略对象上的创建方法。3.2 快速创建你的第一个 PolicycreatePolicy的实现位于 src/trustedtypes.js。最小用法如下// 策略名必须唯一rules 对象定义每种类型如何生成 const safe trustedTypes.createPolicy(safe, { createHTML: s sanitize(s), // HTML先消毒再包装 createScriptURL: s { // URL仅允许同源否则抛错 const url new URL(s, location.href); if (url.origin ! location.origin) throw new Error(not allowed); return s; } }); const html safe.createHTML(userInput); // ✅ 得到 TrustedHTML el.innerHTML html; // ✅ sink 接受几个关键规则✅ 策略是冻结对象name在页面内唯一⚠️ 规则函数抛出异常或返回undefined即视为拒绝该值普通策略下创建会报错️ 策略就是可信代码库的边界——强制模式开启后只有策略代码还能引入 XSS。3.3 用 CSP 白名单锁死策略数量为防止恶意代码偷偷创建放行一切的策略可以在 Content-Security-Policy 中声明策略名白名单Content-Security-Policy: trusted-types safe声明后只有名为safe的策略能被创建创建其他名称会直接抛错特殊值allow-duplicate允许同名策略多次创建依赖库被复用时有用。3.4 Default Policy平滑迁移的逃生门老代码与第三方库不可能一夜改完。你可以创建名为default的特殊策略——sink 收到原始字符串时会先交由它消毒或拒绝实现渐进式迁移trustedTypes.createPolicy(default, { // 例如仅放行 javascript:void(0) 导航其余一律拒绝 createScript: s (s void(0) ? void(0) : undefined) });该机制还顺带封禁了javascript:URL 跳转强制开启后此类链接将失效除非默认策略明确放行。四、CSP 强制模式一条指令开启浏览器级防护API 本身只是类型定义真正的防线来自强制enforcement。在站点响应头加上Content-Security-Policy: require-trusted-types-for script从此之后el.innerHTML ...传字符串 → 抛出TypeError✅传入策略产出的可信值 → 正常渲染 ✅ 最佳实践先用Content-Security-Policy-Report-Only只上报不拦截摸清哪些 sink 会违规并逐一修复再切换为强制模式——这正是官方采用指南中先上报、后强制的建议路径。五、3 步上手让 Trusted Types 在项目里跑起来第 1 步确认浏览器支持Chromium 83已原生支持。旧浏览器可用本项目的官方 polyfillnpm install trusted-typespolyfill 提供两种构建说明见 README.md构建说明api_only只定义 API可创建策略与类型不做强制轻量适合分步迁移full定义 API 并根据页面 CSP 执行 DOM 强制生产推荐若只需让代码在两种环境下都能运行还有一行超轻量的 tinyfillif(typeof trustedTypes undefined)trustedTypes{createPolicy:(n, rules) rules};第 2 步为每个模块创建对应的 Policy把策略当作能力下发给子模块经过安全审计的模板库可以拿到宽松策略第三方聊天小部件则只给它一个仅允许div和img的策略。策略越细分攻击面越小。第 3 步开启 CSP 强制并上线确认全部违规项清零后正式启用require-trusted-types-for scripttrusted-types白名单。此时你的站点已获得浏览器级的 DOM XSS 防护。 想直观感受效果可以查看 demo/index.html 演示页它用一张测试表列出了各 sink 传入字符串 vs 传入可信值的结果对比绿色通过 / 红色拦截。六、项目源码导航快速定位关键文件想深入实现细节时从这些文件入手最高效文件内容explainer.md设计背景问题、方案与完整采用指南spec/index.bsW3C 规范草案源文件正式 API 定义src/trustedtypes.js核心 API 实现策略创建、3 种类型、类型映射表src/enforcer.js强制逻辑包装 sink拒绝原始字符串src/polyfill/full.js完整版 polyfill 入口自动探测页面 CSP 并启用强制tests/API 与强制机制的测试用例写在最后Trusted Types 的设计哲学非常优雅它不要求开发者记得安全而是让浏览器在结构上拒绝不可信输入——3 种可信类型圈定三类高危内容Policy 机制保证可信值的唯一来源CSP 强制完成最后一道锁。对新手而言建议路线是先读一遍说明文档再跑通演示页最后在自己的页面上挂上 full 版 polyfill 亲手试一次——当一行innerHTML赋值开始抛出TypeError的那一刻你就真正理解了这个 API 的价值。【免费下载链接】trusted-typesA browser API to prevent DOM-Based Cross Site Scripting in modern web applications.项目地址: https://gitcode.com/gh_mirrors/tr/trusted-types创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考