如何利用 Trusted Types 配合 CSP 构建企业级前端安全白名单体系-js教程-PHP中文网

trusted types 必须与 csp 协同工作，启用 require-trusted-types-for 'script' 才生效；需配置 trusted-types 白名单和 require-trusted-types-for 'script' 两条指令，策略须按职责隔离命名，嵌入框架开发流程，并通过上报→灰度→强制三阶段渐进落地。

如何利用 trusted types 配合 csp 构建企业级前端安全白名单体系

Trusted Types 不是独立的安全补丁，而是和 CSP 协同工作的强制校验机制。它真正起效的前提，是 CSP 中启用了 require-trusted-types-for 'script'，否则所有 DOM 注入 API（如 innerHTML、eval、script.src）仍可直接接收字符串——这等于把核反应堆的物理密钥换成一张便签纸。

一、CSP 必须配置两个核心指令

仅声明 trusted-types 策略名，却不启用强制校验，策略形同虚设。生产环境必须同时设置：

trusted-types：定义允许创建的策略名称白名单，例如 securePolicy default es-module-shims。不建议用 *，应明确列出每个业务模块或第三方库所需的策略名（如 react-html、vue-template）；
require-trusted-types-for 'script'：强制所有高危 DOM 操作只接受 TrustedHTML、TrustedScriptURL 等类型对象。该指令目前仅支持 'script' 和 'all'，'style' 尚未被主流浏览器广泛支持，暂不启用。

典型生产头示例：

Content-Security-Policy: trusted-types securePolicy default es-module-shims; require-trusted-types-for 'script'; default-src 'self'; script-src 'self' 'nonce-abc123';

二、策略命名需按职责隔离，拒绝“一策通吃”

一个全局 default 策略看似省事，实则破坏最小权限原则。不同模块的数据来源、信任边界和净化逻辑完全不同：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

富文本渲染模块应使用 rich-text-sanitizer 策略，内部调用 DOMPurify.sanitize() 并返回 TrustedHTML；
动态脚本加载器（如微前端子应用注入）应使用 dynamic-script-loader，仅允许来自预设 CDN 域名的 https://cdn.example.com/*.js 脚本 URL；
框架适配层（如 React 的 dangerouslySetInnerHTML 替代方案）应绑定专属策略，禁止传入任意 HTML 字符串，只接受经框架自身 sanitizer 处理后的可信对象。

策略创建必须在页面初始化早期完成，且不可重复注册同名策略（除非显式加 allow-duplicates，仅用于灰度兼容）。

三、与现代前端框架和工具链深度对齐

Trusted Types 不是“写个策略就完事”，它必须嵌入开发流程中才能持续生效：

ES Module Shims：自动注册 es-module-shims 策略，但前提是 CSP 已声明该名称，并启用 require-trusted-types-for。若使用 Wasm 版本，还需在 script-src 中加入 'unsafe-wasm-eval'；
React/Vue/Angular：框架本身不自动创建 Trusted Types 策略。需手动封装 createPolicy，并在 dangerouslySetInnerHTML 或 v-html 使用前做转换。Angular 的 DomSanitizer.bypassSecurityTrustHtml() 返回值已是 TrustedHTML，可直接接入；
构建时检查：在 CI 流程中加入 trusted-types-checker 类工具，扫描源码中所有 innerHTML=、eval(、setInterval( 等调用点，确保其输入必经策略处理，否则阻断发布。

四、渐进落地：从上报模式过渡到强制拦截

上线初期不建议直接开启强制拦截，避免误伤正常逻辑。推荐分三步走：

第一阶段：使用 Content-Security-Policy-Report-Only + report-to，收集所有违反 Trusted Types 的调用栈，定位存量风险点；
第二阶段：对高频违规模块（如评论区、搜索结果高亮）优先接入策略，其余模块保留 default 策略并记录日志；
第三阶段：全量启用 Content-Security-Policy 强制模式，并将策略名白名单收紧为仅包含已验证的模块名，移除 * 和 allow-duplicates。

整个过程需配合监控看板，实时统计策略命中率、拒绝次数和 top 违规源，形成闭环反馈。