DOMPurify 项目中的自定义元素属性校验增强方案

在 Web 安全领域，DOMPurify 作为一款广受认可的 HTML 净化库，其自定义元素处理机制一直备受开发者关注。近期社区提出了一项关于增强属性校验能力的建议，值得安全开发人员深入了解。

当前校验机制的局限性

DOMPurify 目前通过 CUSTOM_ELEMENT_HANDLING 配置项提供对自定义元素的处理能力，其中包含两个关键校验函数：

1. tagNameCheck - 用于验证自定义元素标签名的合法性
2. attributeNameCheck - 用于验证元素属性的合法性

现有实现存在一个明显的限制：属性校验函数只能访问属性名本身，无法获知当前校验的是哪个标签的属性。这在需要实现标签与属性严格绑定的场景下显得力不从心。

实际应用场景示例

考虑以下业务需求：

• 只允许 <element-one> 元素使用 attribute-one 属性
• 只允许 <element-two> 元素使用 attribute-two 属性
• 禁止交叉使用（如 <element-one> 使用 attribute-two）

当前配置方式虽然能确保基本格式正确，但无法实现这种细粒度的关联控制，可能导致安全策略被绕过。

技术实现方案

提出的改进方案是为 attributeNameCheck 增加第二个参数，传入当前元素的标签名：

{
  CUSTOM_ELEMENT_HANDLING: {
    tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
    attributeNameCheck: (attr, tagName) => {
      if (tagName === 'element-one') {
        return attr === 'attribute-one';
      } 
      if (tagName === 'element-two') {
        return attr === 'attribute-two';
      }
      return false;
    },
    allowCustomizedBuiltInElements: false,
  }
}

安全考量

这种增强带来以下安全优势：

1. 实现更精确的属性白名单控制
2. 防止属性跨元素滥用
3. 保持向后兼容性（第二个参数可选）

性能影响微乎其微，因为标签名在解析阶段已经获取，只需简单传递即可。

对开发实践的建议

对于需要严格管控自定义元素使用的项目，建议：

1. 建立完整的元素-属性映射关系表
2. 在净化策略中明确定义各元素的合法属性集
3. 配合其他安全措施如CSP形成纵深防御

这项改进一旦实现，将使DOMPurify在Web组件安全领域的能力更上一层楼，特别适合那些采用微前端架构或重度使用自定义元素的大型应用。