HTML 中的 data-ccp-props 自定义属性解析与清理指南

`data-ccp-props` 是 microsoft office（尤其是 word 和 office 365）复制粘贴到富文本编辑器时自动生成的私有元数据属性，用于保留格式信息，但会导致 html 校验失败或编辑器异常。

在实际 Web 开发与内容管理过程中，你可能偶然发现类似如下 HTML 片段：

这类 data-ccp-props 属性并非标准 HTML 属性，也不属于任何公开规范，而是 Microsoft Office 套件（包括 Word、Outlook、Office 365）在「复制 → 粘贴至支持富文本的 Web 编辑器」流程中注入的内部标记。其作用是向目标编辑器（如 TinyMCE、CKEditor、Quill 或自研 WYSIWYG 编辑器）传递排版上下文，例如段落样式 ID、字体缩放比例、兼容性标志等。

⚠️ 注意：这些属性通常伴随大量其他非标准类名与内联样式，例如：

• class="SCXW251995521 BCX8"（动态生成的哈希类）
• data-contrast="auto"、data-ccp-parastyle="Title"、xml:lang="FR-CA"
• -webkit-user-drag: none; user-select: text; 等冗余 CSS

它们虽不影响浏览器渲染，但会带来三类典型问题：

• ✅ HTML 合规性破坏：W3C 验证器报错（Attribute data-ccp-props not allowed on element span）；
• ✅ 编辑器兼容风险：部分轻量级编辑器或 SSR 渲染引擎因无法解析该属性而抛异常或清空内容；
• ✅ SEO 与可访问性隐患：无语义的冗余属性增加 DOM 体积，干扰爬虫与屏幕阅读器解析。

✅ 推荐解决方案

1. 前端粘贴时自动清洗（推荐）

在富文本编辑器初始化时，监听 paste 事件并移除敏感属性：

editor.on('paste', function (evt) {
  const fragment = evt.data && evt.data.dataValue;
  if (!fragment) return;

  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = fragment;

  // 移除所有 data-ccp-* 属性
  tempDiv.querySelectorAll('[data-ccp-props], [data-ccp-parastyle], [data-contrast]').forEach(el => {
    el.removeAttribute('data-ccp-props');
    el.removeAttribute('data-ccp-parastyle');
    el.removeAttribute('data-contrast');
  });

  // 可选：清理 Office 特有 class（保留语义类）
  tempDiv.querySelectorAll('*').forEach(el => {
    const classes = Array.from(el.classList).filter(cls => 
      !/^SCXW\d+|BCX\d+$/.test(cls)
    );
    el.className = classes.join(' ');
  });

  evt.data.dataValue = tempDiv.innerHTML;
});

2. 服务端净化（防御性兜底）

使用 HTML sanitizer 库（如 DOMPurify 或服务端 sanitize-html）配置白名单：

const sanitizeHtml = require('sanitize-html');

const clean = sanitizeHtml(dirtyHtml, {
  allowedAttributes: {
    '*': ['class', 'style', 'id', 'lang', 'title', 'aria-*'],
    'a': ['href', 'target', 'rel'],
    'img': ['src', 'alt', 'width', 'height']
  },
  // 显式禁止 data-ccp-* 类型属性
  allowedIframeHostnames: [],
  transformTags: {
    'span': (tagName, attribs) => {
      // 删除 data-ccp-* 所有变体
      Object.keys(attribs).forEach(key => {
        if (key.startsWith('data-ccp-') || key === 'data-contrast') {
          delete attribs[key];
        }
      });
      return { tagName, attribs };
    }
  }
});

3. 内容录入规范建议

• ? 禁止直接从 Word 复制粘贴至 CMS 后台；
• ✅ 引导用户使用「纯文本粘贴」快捷键（Ctrl+Shift+V / Cmd+Shift+V）；
• ✅ 在编辑器 UI 显著位置添加提示：“请勿从 Word 直接粘贴，建议先粘贴至记事本清除格式”。

总结

data-ccp-props 是 Office 生态遗留的“格式胶水”，对现代 Web 构建并无实际价值，反而引入技术债务。应从前端拦截 + 服务端净化双通道治理，并辅以团队协作规范，从根本上减少污染源。保持 HTML 干净、语义清晰、可维护性强，才是可持续内容交付的基础。