Trusted Types与前端DOM XSS防护最佳实践

Trusted Types与前端DOM XSS防护最佳实践概述前端XSS常源于危险DOM写入。通过启用Trusted Types并限制Sinks，可在框架与原生代码层面形成统一约束。启用策略CSP中启用 `require-trusted-types-for 'script'` 与自定义策略名统一使用安全渲染封装替代 `innerHTML`、`outerHTML` 等写入安全封装示例declare const trustedTypes: any

function createPolicy(name: string) {

if (trustedTypes?.createPolicy) {

return trustedTypes.createPolicy(name, {

createHTML: (s: string) => sanitizeHtml(s)

})

}

return null

}

function safeSetHTML(el: HTMLElement, html: string) {

const policy = createPolicy('app-policy')

const safe = policy ? policy.createHTML(html) : html

;(el as any).innerHTML = safe

}

模板转义与净化function escapeTpl(input: string): string {

return input

.replace(/&/g, '&')

.replace(/</g, '<')

.replace(/>/g, '>')

.replace(/"/g, '"')

.replace(/'/g, ''')

}

function sanitizeHtml(input: string): string {

const escaped = escapeTpl(input)

return escaped

}

运维与校验在构建与CI中扫描危险Sinks并强制使用安全封装统一CSP策略，禁用内联脚本与不可信源端到端测试覆盖富文本与动态注入场景通过策略约束与封装落地，可在前端实现一致且可验证的DOM XSS防护。