最近开发新的剪贴板功能时,发现嵌入在 iframe 内调用 navigator.permission.query 时,state 会直接返回 denied,而独立页面不会有此问题,控制台有没有发现有提示和报错。
尝试 iframe 下通过 top 来调用,有了报错信息:
The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
发现是因为父子页面存在跨域问题,浏览器会默认拒绝所有权限。
想要解决,有两种方案:
- 父子页面变成同域,目前文档存在 docs.dingtalk.com 和 alidocs.dingtalk.com 两套域名,需要尽可能收口和统一
- 在 iframe 中添加 allow 属性,注明子 iframe 可以使用的权限类型
关于可用的权限类型:https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy
https://stackoverflow.com/questions/61401384/can-text-within-an-iframe-be-copied-to-clipboard