maxkb v2 嵌入后报错解决 chat-3BRQNirW.js:237 [Violation] Permissions policy violation

问题

返回代码段 复制失败 浏览器返回

chat-3BRQNirW.js:237 [Violation] Permissions policy violation: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details

原因

当这个嵌入脚本在你的页面中执行，并尝试调用 navigator.clipboard.writeText() 或 navigator.clipboard.readText() 时，浏览器的权限策略阻止了它。

导致问题的原因是 iframe 的 CSP 安全机制，意味着浏览器阻止了你的代码访问剪贴板 API，原因是当前文档应用了限制该 API 使用的权限策略（Permissions Policy）。

（1）http被nginx代理后添加了 

Permissions-Policy: clipboard-read=(), clipboard-write=()

（2）iframe被添加了允许段

allow="clipboard-read 'none'; clipboard-write 'none'"

（3）页面嵌入了跨域 iframe，且 iframe 内的脚本尝试调用剪贴板 API，但主页面未通过 Permissions-Policy 允许

（4）嵌入的地址协议不一致，内网 IP 可能被浏览器视为 “安全上下文”等

（5）部分浏览器安全限制

解决办法

方法一：使用 nginx 权限策略

# 允许主页面同源脚本 + 特定跨域脚本使用剪贴板
add_header Permissions-Policy "clipboard-read=(self http://192.168.80.4:8080); clipboard-write=(self http://192.168.80.4:8080)" always;

• (self http://192.168.80.4:8080)：表示允许主页面同源脚本和 http://192.168.80.4:8080 下的脚本使用剪贴板。

方法二：网站设置 https

navigator.clipboard API 只能在安全的上下文中（HTTPS）使用

方法三：使用 allow 属性

iframe 嵌入时，新增 allow 属性

<iframe
    src="xxxx"
    allow="clipboard-write; clipboard-read">
  </iframe>

如果 iframe 是跨域的（与主页面不同源），默认情况下浏览器会限制其 API 访问，因此需要通过 allow 属性明确授予权限。