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 报告端观察违规并迭代修复对第三方内容使用严格清洗与沙箱隔离