解决 Safari 中 Blazor 应用复制 HTML 的 NotAllowedError

2025-01-03 15:29:36

Safari 中 Blazor 应用复制 HTML 时出现的 Clipboard API NotAllowedError

在 Blazor 应用中，将 HTML 内容复制到剪贴板是一项常见需求。通常使用 JavaScript 的 Clipboard API 来实现。但是，开发者有时会发现，此方法在 Chrome、Edge 等浏览器上运行良好，但在 Safari，特别是 iOS 设备上的 Safari 中，可能会抛出 NotAllowedError。问题表现为用户并无明确拒绝权限，剪贴板操作依然失败。本文将分析问题原因并给出多种解决方案。

问题分析

NotAllowedError 往往源于浏览器安全策略的限制。虽然 Clipboard API 提供了一套标准化的方法进行复制操作，但各浏览器实现机制可能有所差异。Safari 对复制行为有着更严格的限制，特别是当涉及到复制富文本或 HTML 内容时。其根本原因是为了防止恶意脚本利用剪贴板 API 传递潜在的有害内容，造成安全风险。浏览器默认会认为未经用户明确允许的操作可能会潜在的安全风险。在没有明确用户操作（如点击事件）触发的情况下，navigator.clipboard.write 或 document.execCommand('copy') 可能无法调用，最终抛出错误。此外，跨域请求也可能引发 NotAllowedError。

解决方案

以下提供针对 Safari 浏览器剪贴板复制问题的多种解决方案，及代码示例，同时加入安全考虑：

1. 用户操作触发复制：

这是规避 NotAllowedError 的一种有效方式。将剪贴板操作绑定到用户事件，例如 click 事件。避免在诸如组件初始化或非用户直接触发的函数中执行复制。

<button onclick="copyHtmlContent()">复制 HTML</button>
<script>
    function copyHtmlContent() {
       const value = '<p>这是需要复制的 <strong>HTML</strong> 内容</p>';

        const tempElement = document.createElement('div');
        tempElement.innerHTML = value;
        tempElement.style.position = 'fixed';
        tempElement.style.opacity = '0';
        document.body.appendChild(tempElement);

        if (navigator.clipboard && navigator.clipboard.write) {
            navigator.clipboard.write([
                new ClipboardItem({
                    'text/html': new Blob([tempElement.innerHTML], { type: 'text/html' }),
                    'text/plain': new Blob([tempElement.innerText], { type: 'text/plain' })
                })
            ]).then(() => {
                 document.body.removeChild(tempElement);
            }).catch(() => {
                fallbackCopy(tempElement);
                 document.body.removeChild(tempElement);
            });
        }else{
            fallbackCopy(tempElement)
            document.body.removeChild(tempElement);
        }
     }


     function fallbackCopy(element){
          const selection = window.getSelection();
          const range = document.createRange();
           range.selectNodeContents(element);
          selection.removeAllRanges();
          selection.addRange(range);

        try {
        document.execCommand('copy');
           } catch (e) {
            console.error('Fallback: Copy command failed', e);
          }
           selection.removeAllRanges();
      }

</script>

操作步骤:

创建一个 HTML <button> 元素。
为按钮添加 onclick 事件处理器。
在处理器内执行复制逻辑。

2. 处理 Fallback 情况的尝试 :

document.execCommand('copy') 方法也有局限性。在 Safari 中，当试图复制 HTML 内容时，该方法有可能无效。此方案提供了一个可以更直接地访问和操作文本的方法，以便提供更广泛的浏览器兼容性：使用一个隐藏的<textarea> 来替代创建的 div 临时元素，并复制 textContent。

<button onclick="copyHtmlContentAlternative()">复制 HTML</button>
<script>
function copyHtmlContentAlternative(){

      const value = '<p>这是需要复制的 <strong>HTML</strong> 内容</p>';

       const textArea = document.createElement('textarea');
       textArea.value = value;
       textArea.style.position = 'fixed';
       textArea.style.opacity = '0';
       document.body.appendChild(textArea);
       textArea.focus();
       textArea.select();


       try {
         const successful = document.execCommand('copy');
       } catch (err) {
        console.error('Fallback: Unable to copy to clipboard using alternative textarea method', err);
      }

       document.body.removeChild(textArea)
}
</script>

操作步骤:

创建一个 HTML <button> 元素。
为按钮添加 onclick 事件处理器。
创建一个不可见的 textarea 元素，赋值 HTML 内容的文本表示，将其添加到 DOM 并在随后移除。

3. 检查内容类型:

尝试使用纯文本格式，或者确保传入 ClipboardItem 的 content 类型是 text/html 。某些情况下，其他类型的复制可能导致Safari拒绝操作。在设置 ClipboardItem 的时候确保设置 text/html 和 text/plain 两种 content 类型，可以最大程度地兼容不同的剪切板应用。

4. 异步处理：

Clipboard API 调用是异步操作。使用 Promise 的 .then() 和 .catch() 方法处理成功和失败的情况。如果需要处理更多的 fallback 方式或者提示信息等可以在 promise 中进行处理。避免直接调用 document.execCommand('copy') , 而把它置于 promise的 catch 中。

5. 额外的安全建议：