DOMPurify 中 ALLOWED_URI_REGEXP 与 target 属性的关联性问题解析

问题现象

在使用 DOMPurify 进行 HTML 净化时，开发者发现当配置了 ALLOWED_URI_REGEXP 正则表达式来限制允许的 URL 协议后，即使链接的 href 属性符合要求，target="_blank" 属性也会被意外移除。这种情况尤其影响需要在新窗口打开安全链接的场景。

技术背景

DOMPurify 是一个专门用于净化 HTML 的 JavaScript 库，它能有效防止 XSS 攻击。其核心机制包括：

1. 白名单机制：通过 ALLOWED_TAGS 和 ALLOWED_ATTR 控制允许的标签和属性
2. URL 净化：通过 ALLOWED_URI_REGEXP 限制允许的 URL 协议
3. 钩子系统：提供预处理和后处理的扩展点

问题根源分析

当开发者设置了 ALLOWED_URI_REGEXP: /^https?:\/\// 来仅允许 HTTP/HTTPS 协议时，DOMPurify 的安全机制会执行以下检查：

1. 首先验证 href 属性是否符合正则表达式
2. 如果 href 无效，不仅会移除 href 属性，还会移除与之关联的 target 属性
3. 这种关联性移除是 DOMPurify 的默认安全行为

解决方案

要解决这个问题，需要理解 DOMPurify 的两个关键配置项的关系：

1. ALLOW_UNKNOWN_PROTOCOLS: true
   这个配置明确告知 DOMPurify 开发者了解自定义 URI 正则表达式带来的风险，并愿意承担由此产生的安全责任。当使用自定义 ALLOWED_URI_REGEXP 时，这个配置必须设置为 true。

2. ADD_ATTR: ['target']
   明确将 target 属性加入允许的属性列表，确保它不会被默认的安全策略移除。

完整配置示例

const config = {
  ALLOWED_URI_REGEXP: /^https?:\/\//,
  ALLOW_UNKNOWN_PROTOCOLS: true,
  ADD_ATTR: ['target'],
  // 其他配置...
};

高级技巧：使用钩子增强安全性

对于需要更精细控制的情况，可以结合使用 afterSanitizeAttributes 钩子来增强安全性：

DOMPurify.addHook('afterSanitizeAttributes', (node) => {
  if (node.nodeName === 'A' && node.hasAttribute('target')) {
    const validTargets = ['_blank', '_self', '_parent', '_top'];
    const targetValue = node.getAttribute('target');
    
    if (!validTargets.includes(targetValue)) {
      node.removeAttribute('target');
    } else if (targetValue === '_blank') {
      node.setAttribute('rel', 'noopener noreferrer');
    }
  }
});

这个钩子实现了：

1. 验证 target 属性值是否合法
2. 为 _blank 目标自动添加安全相关的 rel 属性
3. 移除不合法的 target 值

安全建议

1. 始终为 target="_blank" 添加 rel="noopener noreferrer" 以防止标签页劫持
2. 定期审查 ALLOWED_URI_REGEXP 以确保它不会过于宽松
3. 考虑使用 CSP 作为额外的安全层
4. 在开发环境中测试各种边界情况的 URL

通过理解 DOMPurify 的这些安全机制和配置选项，开发者可以在保证安全性的同时，实现所需的 HTML 净化功能。