trusted types 不直接防 css 注入，require-trusted-types-for 'style' 才是关键；它强制 style.csstext 等操作仅接受 trustedcss 实例，切断字符串直传路径，并需在 csp 响应头中明确声明，配合结构化策略封装样式逻辑。
Trusted Types 本身不直接处理 CSS 注入，require-trusted-types-for 'style' 才是管控动态样式的关键开关。它强制所有高危 CSS 操作（如 style.cssText、element.setAttribute('style', ...)、<style></style> 内容写入）只接受 TrustedCSS 实例——而非原始字符串。所谓“彻底重构”，核心不是加策略，而是切断字符串直传路径，并将样式生成逻辑前置到可信策略中。
必须启用 style 级别校验
仅配 require-trusted-types-for 'script' 不够，CSS 注入完全不受控。生产环境 CSP 响应头需明确包含：
Content-Security-Policy: trusted-types default; require-trusted-types-for 'style';-
'style'是独立指令，与 script 无关；漏掉它，el.style.cssText = "color: red"这类操作仍可自由执行 -
trusted-types指令中必须列出default（或你自定义的策略名），否则浏览器拒绝创建策略 - 不支持
<meta http-equiv="Content-Security-Policy">设置该指令，必须走 HTTP 响应头
识别并替换所有 CSS 字符串注入点
以下写法在启用 require-trusted-types-for 'style' 后会立即抛 TypeError：
el.style.cssText = "background: url(" + userUrl + ")";el.setAttribute("style", "opacity: " + opacityValue);const style = document.createElement("style"); style.textContent = ".cls { color: " + userColor + "; }";-
document.head.appendChild(style);（textContent赋值受控，但仅限于<style></style>元素内容）
注意：el.style.color = "red" 这类单属性赋值不受 Trusted Types 管控，它是安全的，无需改写。
用最小权限策略封装样式逻辑
不要在策略里做运行时拼接或正则过滤。正确做法是：把样式变量提取为结构化输入，由策略函数做白名单映射后返回 TrustedCSS：
- 例如控制颜色：
createCSS: (colorName) => { const map = { primary: "color: #007bff", success: "color: #28a745" }; return map[colorName] || "color: #6c757d"; } - 控制尺寸：
createCSS: (size) => `font-size: ${Math.max(12, Math.min(24, parseInt(size)))}px`（数值校验+范围限制） - 禁止接收任意字符串：
createCSS: (raw) => raw是危险的，等同于绕过防护 - 若需动态类名组合，应使用
classList.add()+ 预置 CSS 类，而非拼接style字符串
适配 CSS-in-JS 和第三方样式库
主流 CSS-in-JS 库（如 Emotion、Styled Components）默认不生成 TrustedCSS。重构时需：
- 检查库是否提供
trustedTypes插件或配置项（如 Emotion v12+ 支持enableTrustedTypes选项） - 未适配的库，需包装其输出：获取生成的 CSS 字符串后，交由你的
default策略调用createCSS()封装 - 避免直接操作
sheet.insertRule()的字符串参数；应先通过策略生成可信 CSS 字符串，再传入 - 对于
CSSStyleSheet动态注入，确保insertRule的第一个参数是策略返回的TrustedCSS实例
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
