必须配置CSP响应头，否则Trusted Types不生效；需设置Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default，策略名必须为default，且仅通过HTTP头启用。
必须先配 CSP 响应头，否则 Trusted Types 彻底不生效
浏览器只在收到 Content-Security-Policy 响应头后才拦截非法 DOM 赋值。JS 里调用 trustedTypes.createPolicy 本身不产生任何防护效果——它只是“注册策略”，不是“开启开关”。
生产环境必需的头是：Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default。其中 default 是强制要求的策略名：如果 JS 中创建策略时写成 createPolicy('my-policy', {...})，而响应头里没同步改成 trusted-types my-policy，就会直接抛 TypeError，而非静默降级。
对 require-trusted-types-for 指令完全无效，必须走 HTTP 响应头。开发阶段建议先用 Content-Security-Policy-Report-Only 收集违规日志，避免上线即崩。
识别所有被 Trusted Types 拦截的 innerHTML 类操作
别只盯着 innerHTML —— Trusted Types 会拦截所有能执行脚本或注入 HTML 的“sink”，包括：
-
outerHTML、insertAdjacentHTML -
document.write、document.writeln -
DOMParser.parseFromString(html, "text/html")返回的 Document 若含脚本，也受控 -
和的属性值同样需TrustedHTML -
location.assign(url)若传字符串会被拦，必须传TrustedURL实例
常见误判点：elem.setAttribute("onclick", "") 属于内联事件，已由 require-trusted-types-for 'script' 覆盖，无需额外处理；但 el.setAttribute('innerHTML', ...) 是无效写法，不会触发 Trusted Types 校验，属于“sink 逃逸”，必须杜绝。
为 innerHTML 场景设计最小权限策略，拒绝万能策略
不要写一个“把所有 HTML 都过一遍白名单”的策略。性能差、易绕过、违背设计初衷。优先用 textContent 替代，或用模板引擎预编译。
策略示例（仅转义，不解析）：
if (window.trustedTypes && trustedTypes.createPolicy) {
trustedTypes.createPolicy('default', {
createHTML: string => {
return string
.replace(/&/g, '&')
.replace(/, '/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
});
}
关键点：
-
createHTML返回的是字符串，不是TrustedHTML对象——Trusted Types 内部会自动包装 - 策略名必须是
'default'，否则浏览器无法回退到该策略 - 禁止在策略中调用
eval、new Function或拼接字符串后return string，这等于把信任委托给不可控逻辑
重构 legacy 代码时最常踩的三个坑
重构不是“加个策略就完事”。legacy 项目里那些看似无害的写法，往往在 Trusted Types 下直接报错：
-
el.innerHTML += '：这是两次赋值，第一次可能已用非可信值初始化，第二次 += 仍会触发拦截新内容' -
DOMParser.parseFromString(userInput, 'text/html')：即使你没直接赋给innerHTML，只要返回的 Document 后续被插入，就受控 -
shadowRoot.innerHTML = unsafeString：部分浏览器尚未拦截 Web Components 中的该操作，属于“未覆盖 sink”，不能依赖
真正安全的替代路径是：用 document.createElement + appendChild 构建结构，或用 insertAdjacentHTML('beforeend', trustedHtml) 追加——前提是 trustedHtml 确实来自可信策略。
复杂点在于：很多 legacy 项目把 HTML 拼接逻辑散落在模板字符串、字符串拼接、甚至后端返回的 JSON 字段里。重构前必须先做全量 sink 扫描，而不是只改几处 innerHTML =。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
