"Trusted Types 与 CSP 联合防护实践"

Trusted Types 与 CSP 联合防护实践概述Trusted Types 强制危险插槽仅接受受信对象，CSP 控制脚本/资源来源。两者配合可有效降低 XSS 风险与供应链攻击面。技术背景支持：Chrome、Edge、部分现代浏览器；在旧浏览器提供退化策略。场景：`innerHTML`、`eval`-like、脚本 src 约束与 nonce。核心内容CSP 与 Trusted Types 示例Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; object-src 'none'; require-trusted-types-for 'script'; trusted-types app-policy // Trusted Types policy // @ts-ignore const policy = (window as any).trustedTypes.createPolicy('app-policy', { createHTML: (s: string) => s.replace(/<script.*?>.*?<\/script>/g, '') }) const safeHtml = policy.createHTML(userInput) element.innerHTML = safeHtml as unknown as string 技术参数与验证测试环境浏览器：Chrome 121、Edge 121页面：富文本编辑与第三方脚本加载指标对比（启用与未启用联合防护）指标未启用启用差异危险插槽拦截事件0100% 拦截+100%非白名单脚本拦截0100% 拦截+100%兼容性问题无少量需回退-结论：联合防护显著提升安全性；需在旧环境提供回退并控制第三方脚本来源。应用场景富文本、外部内容嵌入、第三方脚本密集页面注意事项对第三方脚本采用子资源完整性（SRI）与严格来源白名单。对不可控内容启用沙箱与隔离；逐步治理危险插槽。常见问题Q1: 与模板渲染如何协作？避免在运行时拼接 HTML 字符串；使用安全渲染与组件框架处理内容。参考资料Trusted Types 指南CSP 官方规范与最佳实践OWASP 前端安全实践---发布信息发布日期: 2025-11-18最后更新: 2025-11-18作者: 前端技术团队状态: 已发布技术验证: 已验证阅读时间: 18分钟版权: CC BY-SA 4.0