Trusted Types 不拦截 CSSStyleSheet.insertRule() 等纯样式赋值操作，但拦截 innerHTML、insertAdjacentHTML 等将 CSS 字符串嵌入 HTML 的方式；需用 textContent 安全注入或通过专用 css-injector 策略封装 片段。
Trusted Types 本身不直接管控动态 CSS 注入（如 style.innerHTML、document.styleSheets[0].insertRule() 或 CSSStyleSheet.replaceSync()），因为 CSS 相关 sink 不在浏览器原生 Trusted Types 规范覆盖范围内。但涉及“异步字符串注入”的动态样式逻辑，往往隐含 DOM 操作链（例如通过字符串拼接生成 <style></style> 标签再插入文档），这类路径实际落入 innerHTML、insertAdjacentHTML 等受控 sink，必须重构。
明确哪些 CSS 相关操作真正受 Trusted Types 约束
浏览器仅对明确列为“执行上下文风险”的 DOM 写入点做类型拦截。与 CSS 直接相关的操作中：
-
受控（需 TrustedHTML）：将 CSS 字符串包裹在
<style>${cssString}</style>后用innerHTML、insertAdjacentHTML插入；或通过DOMParser.parseFromString(html, 'text/html')解析含<style></style>的 HTML 字符串 -
不受控（Trusted Types 不拦截）：直接调用
CSSStyleSheet.insertRule()、Element.setAttribute('style', ...)、element.style.cssText = ...—— 这些属于纯样式赋值，不触发脚本执行，因此不在require-trusted-types-for 'script'范围内 -
间接风险点：若异步获取的 CSS 字符串最终拼进 HTML 模板（如渲染组件时
template.innerHTML = `<div> <style>${css}</style>...</div>`），则整个模板字符串必须由策略生成
重构异步 CSS 注入链：从源头切断原始字符串流动
典型问题代码：
fetch('/api/theme.css').then(r => r.text()).then(css => {const style = document.createElement('style');
style.textContent = css; // ✅ 安全，但无法支持 @import / media 查询等完整语法
document.head.appendChild(style);
});
这段看似安全，但若后续演变为：
立即学习“前端免费学习笔记（深入）”；
fetch('/api/theme.css').then(r => r.text()).then(css => {
document.head.innerHTML += ``; // ❌ 触发 innerHTML sink，必须 TrustedHTML
});
重构关键不是“怎么插 style”，而是“怎么让字符串不裸奔”：
- 始终用
textContent设置<style></style>元素内容（无需 Trusted Types，且天然防 XSS） - 若必须构造完整 HTML 片段（如 SSR hydration 场景），则把整个片段（含
<style></style>）交由 Trusted Types 策略处理：el.innerHTML = policy.createHTML(`<style>${css}</style> <div class="theme-root">...</div>`); - 避免在策略函数内解析或拼接 CSS 字符串——策略只做封装，净化应在 fetch 后、策略前完成（例如用正则剔除
@import url(javascript:...)）
为 CSS 场景设计专用策略，而非复用 default
不要把 CSS 注入混进通用 HTML 策略。单独创建语义清晰的策略，便于审计和权限收敛：
if (window.trustedTypes && trustedTypes.createPolicy) {trustedTypes.createPolicy('css-injector', {
createHTML: (input) => {
// 仅允许纯 CSS 文本包裹在 `;
}
});
}
CSP 响应头也需同步更新：Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default css-injector;
警惕框架封装带来的 sink 逃逸
某些 UI 库（如 Lit、Stencil）在模板中支持动态 <style></style> 注入，若其底层使用 innerHTML 且未适配 Trusted Types，则异步 CSS 仍可能绕过校验。验证方法：
- 查看框架源码或文档，确认其动态样式 API 是否声明兼容 Trusted Types
- 在启用 CSP 的环境下，手动触发该逻辑，观察控制台是否报
TypeError: Failed to set 'innerHTML' - 不依赖框架自动处理，改为显式调用你定义的策略：
el.innerHTML = cssPolicy.createHTML(generatedStyleTag)
