Trusted Types 与 DOM XSS 防护：策略启用、迁移与违规监控

Trusted Types 与 DOM XSS 防护：策略启用、迁移与违规监控技术背景DOM XSS 常源于危险 Sink（如 `innerHTML`、`insertAdjacentHTML`）直接拼接不可信输入。Trusted Types（TT）结合 CSP 要求这些 Sink 只能接收受信类型，阻断字符串注入路径。通过渐进启用与违规上报，可在不影响功能的前提下提升安全等级。核心内容CSP 策略启用Content-Security-Policy: default-src 'self'; script-src 'self'; require-trusted-types-for 'script'; trusted-types default tt-policy; report-uri https://csp.example.com/report; 创建 Trusted Types 策略declare const trustedTypes: any; const ttPolicy = (window as any).trustedTypes?.createPolicy('tt-policy', { createHTML: (s: string) => s, createScriptURL: (s: string) => s }) || { createHTML: (s: string) => s, createScriptURL: (s: string) => s }; function safeSetHTML(el: HTMLElement, html: string) { const ttHtml = ttPolicy.createHTML(html); (el as any).innerHTML = ttHtml; } 迁移危险 Sink 示例// 迁移前（危险）： // el.innerHTML = userInput; // 迁移后（受控）： safeSetHTML(document.getElementById('content')!, sanitize(userInput)); function sanitize(input: string) { return input .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } 违规监控与报告window.addEventListener('securitypolicyviolation', (e: any) => { const payload = { blockedURI: e.blockedURI, violatedDirective: e.violatedDirective, effectiveDirective: e.effectiveDirective, originalPolicy: e.originalPolicy, sourceFile: e.sourceFile, lineNumber: e.lineNumber, columnNumber: e.columnNumber, disposition: e.disposition, timestamp: Date.now() }; navigator.sendBeacon('https://csp.example.com/report', JSON.stringify(payload)); }); 技术验证参数在 Chrome 128/Edge 130（Windows/macOS）下：DOM XSS 字符串注入阻断率：100%违规上报告覆盖率：≥ 95%功能兼容性：核心路径通过率 ≥ 98%应用场景高安全站点与后台系统的 DOM XSS 防护富文本与动态内容渲染场景的合规加固最佳实践先审计危险 Sink，逐步迁移到 TT 策略搭配 CSP 报告端观察违规并迭代修复对第三方内容使用严格清洗与沙箱隔离