TrustedTypes重构字符串拼接方法

Trusted Types 并非直接重写字符串拼接逻辑的“银弹”，而是一种通过浏览器强制机制将高危 DOM 操作（如 innerHTML、eval、insertAdjacentHTML 等）从不可信字符串切换为类型安全的 TrustedHTML/TrustedScript 对象的防御性重构策略——其真正威力依赖于严格启用 CSP 响应头（trusted-types + require-trusted-types-for）、全覆盖所有 sink 入口、定义职责单一且不包含过滤逻辑的最小化策略，并协同框架与第三方库完成适配；它把运行时信任决策从开发者手工拼接转移到浏览器级类型校验，用声明式约束替代易出错的手动净化，在不颠覆现有架构的前提下显著提升 XSS 防御水位。

Trusted Types 不能“彻底重构”字符串拼接逻辑，但它能强制将所有高危 DOM 写入点从 string 切换为类型受控的 TrustedHTML、TrustedScript 等对象——前提是项目已启用 CSP 强制策略，并覆盖全部 sink。所谓“重构”，本质是把运行时信任委托从开发者手动拼接，转为浏览器级类型校验。

第一步：确认浏览器兼容性与 CSP 基础配置

全链路生效的前提是服务端返回正确的 HTTP 头，仅前端加 JS 策略无效：

• 必须使用 HTTP 响应头， 不支持 require-trusted-types-for
• 生产环境最小可行头：
  Content-Security-Policy: trusted-types default; require-trusted-types-for 'script'; default-src 'self';
• default 是策略名占位符，若项目用自定义名（如 dom-sanitizer），CSP 中必须显式列出，否则浏览器回退到宽松模式
• 开发阶段可用 Content-Security-Policy-Report-Only 先捕获违规，避免上线即阻断

第二步：识别并替换全部高危 sink 调用点

不能只改 innerHTML。遗留项目中常见被忽略的逃逸入口包括：

• el.insertAdjacentHTML('beforeend', unsafe) —— 同样受控，需统一走策略
• document.write(unsafe) 和 document.writeln() —— 已淘汰但老代码仍存
• location.href = 'javascript:alert(1)' —— 需用 createURL 策略包装
• eval('...')、setTimeout('...', 100)、setInterval('...', 100) —— 字符串形式执行必须禁用或重写为函数形式
• el.setAttribute('onerror', '...') —— 部分浏览器已拦截，但不可依赖；推荐改用 el.onerror = handler

第三步：定义最小必要策略，拒绝“万能 HTML 构造器”

策略不是过滤器，而是可信内容的“出口闸门”。每个策略应职责单一、上下文明确：

• 不要在 createHTML 里做白名单过滤或正则清洗 —— 易绕过且性能差
• 纯文本展示优先用 textContent，完全绕过 Trusted Types 限制
• 必须插 HTML 时，先用 DOMPurify 在策略外净化，再由策略包装：
  createHTML: (input) => DOMPurify.sanitize(input)
• 对模板场景，可封装预编译策略：
  createHTML: (tpl, data) => Mustache.render(tpl, data)（确保 Mustache 输出已净化）
• 禁止策略内调用 eval、new Function 或拼接后直接 return string

第四步：处理框架与第三方库集成

React/Vue/Angular 等现代框架大多已适配 Trusted Types，但旧版本或自定义渲染逻辑可能逃逸：

• 检查框架文档是否声明支持 require-trusted-types-for，如 React 18.3+、Vue 3.4+ 默认兼容
• 禁用框架中允许传入原始 HTML 的 API（如 Vue 的 v-html、React 的 dangerouslySetInnerHTML），改用受控组件或策略包装
• 第三方 UI 库（如 Ant Design、Element Plus）若内部调用 innerHTML，需确认其是否导出策略接口，或通过 wrapper 统一拦截
• Web Components 中 shadowRoot.innerHTML 在 Safari 17.4+ / Firefox 148+ 已受控，但旧版需降级处理

不复杂但容易忽略。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~