如何阻止Safari使用navigator.clipboard.write写入剪贴板时篡改HTML内容

Safari 对navigator.clipboardAPI传入的text/html类型内容会默认执行DOM解析→过滤注释/无效标签→序列化注入默认样式的流程，这是浏览器内核的默认行为，无法直接通过参数关闭，可通过以下方案解决： #

方案1：使用兼容性更好的document.execCommand('copy')替代异步剪贴板API #

该方案是目前最稳定的实现，不会触发Safari的HTML内容过滤逻辑，可完整保留注释和原始结构：

const html = "<!-- data in comment --><div>Some content</div>"
document.querySelector('button').addEventListener('click', function() {
  // 注册一次性copy事件监听
  const copyHandler = (e) => {
    e.preventDefault();
    // 手动写入剪贴板内容
    e.clipboardData.setData('text/html', html);
    // 可选：补充纯文本 fallback，适配不支持HTML粘贴的场景
    e.clipboardData.setData('text/plain', 'Some content');
  };
  document.addEventListener('copy', copyHandler);
  document.execCommand('copy');
  document.removeEventListener('copy', copyHandler);
})

方案2：异步剪贴板API搭配自定义MIME类型存储元数据 #

如果必须使用navigator.clipboard异步API，可以将元数据和展示用HTML拆分存储，自定义MIME类型的内容不会被Safari篡改，同域下粘贴时可直接读取：

const html = "<div>Some content</div>"
const meta = "data in comment"
document.querySelector('button').addEventListener('click', async function() {
  await navigator.clipboard.write([new ClipboardItem({
    "text/html": new Blob([html], {type: "text/html"}),
    // 自定义MIME类型，前缀用application/x-避免标准冲突
    "application/x-your-app-meta": new Blob([meta], {type: "application/x-your-app-meta"})
  })])
})

粘贴时优先读取自定义类型的元数据，再配合text/html的展示内容使用即可。 #

方案3：调整元数据存储位置 #

如果需要兼容跨应用粘贴的场景，可以把元数据从HTML注释转移到隐藏DOM的自定义属性中，Safari不会过滤display:none的元素：

// 元数据写入隐藏元素的data属性，不会被过滤也不会影响展示
const html = `<div data-meta="data in comment" style="display:none"></div><div>Some content</div>`

粘贴时提取对应DOM元素的data-meta属性值即可。

内容的提问来源于stack exchange，提问作者msfeldstein