无需登录 数据私有 本地保存

Trusted Types安全演示 - 防止DOM XSS

安全工具 教育工具 Trusted Types XSS 安全
48
0
0
0

Trusted Types 安全演示

理解浏览器如何通过 Trusted Types 防止 DOM-based XSS 攻击

输入测试内容
预设载荷：
⚠ 不使用 Trusted Types 危险
原始 HTML 源码（脚本可被执行）：
等待输入...
渲染预览（innerHTML 直接赋值）：
等待输入...
✅ 使用 Trusted Types 安全
经策略处理后的安全代码：
等待输入...
安全渲染（policy.createHTML()）：
等待输入...
Trusted Types 策略配置示例 JavaScript
创建策略
const sanitizer = trustedTypes.createPolicy('my-policy', {
  createHTML: (input) => {
    // 使用 DOMPurify 或自定义清理逻辑
    return DOMPurify.sanitize(input, {
      ALLOWED_TAGS: ['b','i','em','strong','a','p','br','ul','ol','li','span','div','h1','h2','h3','h4','h5','h6','img','table','tr','td','th','thead','tbody'],
      ALLOWED_ATTR: ['href','target','src','alt','class','id','style']
    });
  },
  createScript: (input) => {
    // 仅允许通过哈希验证的已知安全脚本
    throw new Error('动态脚本被阻止');
  },
  createScriptURL: (input) => {
    // 仅允许白名单域名
    const url = new URL(input, location.origin);
    if (['cdn.example.com','static.example.com'].includes(url.hostname)) {
      return input;
    }
    throw new Error('不可信的脚本URL');
  }
});
安全使用方式
// ✅ 安全：通过策略创建 TrustedHTML
el.innerHTML = sanitizer.createHTML(userInput);

// ✅ 安全：使用 TrustedScriptURL
scriptEl.src = sanitizer.createScriptURL(url);

// ❌ 错误：直接赋值字符串会被浏览器拒绝
el.innerHTML = userInput;  // TypeError!
CSP 配置
Content-Security-Policy: trusted-types my-policy;
Content-Security-Policy: require-trusted-types-for 'script';
受 Trusted Types 保护的注入点 (Sinks)
Element.innerHTML 受保护
Element.outerHTML 受保护
Document.write / writeln 受保护
DOMParser.parseFromString 受保护
Range.createContextualFragment 受保护
HTMLIFrameElement.srcdoc 受保护
script.src 受保护
script.textContent 受保护
EmbedElement.src 受保护
ObjectElement.data 受保护
浏览器兼容性
浏览器版本支持状态
Chrome83+完全支持
Edge83+完全支持
Firefox-开发中
Safari-暂不支持
Opera69+完全支持
* 需要配合 CSP 头启用强制执行
常见问题 & 知识点 SEO

Trusted Types 是浏览器内置的安全机制，通过限制危险 DOM API（如 innerHTML、document.write）只接受经过策略处理的可信对象，从而从根源上防止 DOM-based XSS 攻击。它要求开发者为所有注入点提供经过验证的"可信类型"数据，而非原始字符串。这是防御深度策略的关键一环，能阻止绝大多数基于 DOM 的跨站脚本攻击。

反射型 XSS 发生在服务端将用户输入直接反射回响应页面时；而 DOM XSS 完全在客户端发生，恶意脚本通过修改 DOM 环境执行（如 innerHTML、eval、document.write），不经过服务端。Trusted Types 主要针对 DOM XSS，通过锁定危险的 DOM sink 来阻止攻击。

需要两步：1) 在 CSP 头中添加 require-trusted-types-for 'script' 和 trusted-types <policy-name>；2) 在 JavaScript 中创建 Trusted Types 策略，使用 trustedTypes.createPolicy() 定义清理规则。推荐搭配 DOMPurify 等库实现 createHTML 策略。

可以使用报告模式（Report-Only）先收集违规报告而不阻断：CSP 头使用 Content-Security-Policy-Report-Only。同时利用默认策略（default policy）作为过渡，逐步将代码中的字符串赋值迁移到策略调用。Chrome DevTools 也能帮助识别违规点。

常见向量包括：
• <img src=x onerror=alert(1)> — 利用事件处理器
• <script>alert(1)</script> — 直接注入脚本标签
• <a href="javascript:alert(1)">click</a> — javascript: 协议
• <div onmouseover="..."> — 事件属性注入
• eval(userInput) — 代码执行函数
Trusted Types 能有效防御以上所有向量。

CSP 是内容安全策略的总框架，Trusted Types 是其一部分；DOMPurify 是常用的 HTML 清理库，通常作为 Trusted Types 策略中 createHTML 的实现。三者协同工作：CSP 启用 Trusted Types 强制执行 → Trusted Types 策略调用 DOMPurify 清理 → 安全内容注入 DOM，形成完整的防御链条。
🔧 相关工具