DOMPurify项目中关于阻止外部HTTP请求的技术探讨

背景与挑战

在Web安全领域，处理不受信任的HTML内容时，一个常见但容易被忽视的问题是HTML中可能包含的各种自动触发HTTP请求的元素和属性。这些请求可能在页面渲染时自动发出，带来多种安全隐患：

1. 同源请求可能绕过服务器端保护措施
2. 第三方请求可能导致用户隐私数据泄露（如IP地址、访问时间等）
3. 可能被用于构建"信标"机制，确认消息是否被阅读

问题本质

现代Web平台提供了大量可能触发自动HTTP请求的特性，包括但不限于：

HTML元素和属性：

• 媒体元素：<img src>、<video src>、<source>等
• 预加载：<link rel="preload">
• SVG元素：<svg>中的各种图形元素

CSS特性：

• @import规则
• 各种URL函数：background: url()、border-image: url()等
• SVG相关CSS属性：mask、filter、clip-path等

这些特性数量庞大且不断增加，手动维护一个完整的过滤列表几乎不可能。

解决方案探讨

1. 基于CSP的内容安全策略

最有效的解决方案可能是利用内容安全策略(CSP)来全局控制资源加载。通过在沙盒化的iframe中注入严格的内容安全策略，可以有效地阻止所有外部请求：

<iframe sandbox srcdoc="
  <meta http-equiv='Content-Security-Policy' content='default-src none'>
  <!-- 净化后的内容 -->
"></iframe>

这种方法的优势在于：

• 不需要维护庞大的过滤规则列表
• 浏览器原生支持，性能好
• 可以灵活控制是否允许某些类型的请求

2. 属性过滤的补充方案

虽然CSP是更全面的解决方案，但结合属性过滤可以提供深度防御：

• 识别并处理所有包含URL的属性
• 特别处理CSS中的url()函数
• 移除或替换所有以"http:"或"https:"开头的属性值

实际应用中的挑战

布局问题

当需要在页面中嵌入净化内容并希望其自适应大小时，使用iframe会带来布局挑战。虽然HTML5曾提出seamless属性来解决这个问题，但该特性已被废弃。目前可行的替代方案包括：

• 使用JavaScript动态调整iframe大小
• 考虑使用现代Web组件技术

安全边界

即使使用CSP，也需要注意：

1. 必须先过滤文档中的<meta>标签，防止被覆盖
2. 必须彻底禁用JavaScript执行
3. 考虑结合沙盒属性增强隔离

结论

在DOMPurify项目中，最可靠的外部请求阻止方案是结合CSP策略与沙盒iframe。这种方法不仅覆盖了已知的请求触发点，还能防范未来可能出现的新特性。虽然存在一些布局上的挑战，但从安全角度考虑，这是目前最全面的解决方案。

对于需要更灵活布局的场景，开发者可以考虑结合使用净化后的HTML与动态调整的iframe，在安全性和用户体验之间找到平衡点。