前言
- 最近在做iframe嵌套页面时,遇到了需要剪切板权限的问题,提示:Disabled in this document by Feature Policy.
- 为此特意去学习延伸了下这方面的资料。
Permissions API
- mdn:https://developer.mozilla.org/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API
获取当前有哪些权限
- 你可以使用
document.featurePolicy.allowedFeatures();
来进行查看。如果是嵌套页面,记得使用浏览器工具左上方切换按钮切换到对应的iframe中去使用,你会发现这个命令在主项目和iframe中的权限其实并不一样。 - 你也可以在代码中去查询你需要的权限的状态,比如下面的代码是查询地理位置的:
navigator.permissions.query({name:'geolocation'}).then(function(result) {
if (result.state == 'granted') {
report(result.state);
geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
report(result.state);
geoBtn.style.display = 'none';
navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
report(result.state);
geoBtn.style.display = 'inline';
}
result.onchange = function() {
report(result.state);
}
});
- 除了地理位置,还有很多权限见mdn:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy#directives
增加自己的权限
- 如何使自己iframe增加权限,这里有2个方法。
- 方法一:iframe标签中使用allow属性,后面跟需要添加的权限以及适用的域名。
比如:
<iframe id="task-view-1" src="/page" frameborder="0" allow="microphone *;camera *;midi;encrypted-media;clipboard-read *; clipboard-write *;" style="z-index: 1;"></iframe>
-
如果只写权限不写域名默认是无权限,所以必须要写上生效域名。
-
方法二:添加Feature-Policy或者Permissions-Policy
-
Feature Policy 是一个新的 http 响应头属性,允许一个站点开启或者禁止一些浏览器属性和 API,来更好的确保站点的安全性和隐私性。有点类似内容安全策略,但是它控制的是浏览器的特征而不是安全行为.
-
跟其他 http 安全响应头的设置一样,只需要敲定页面具体的限制策略,然后在 http 响应头中返回相应的策略即可:
Feature-Policy: vibrate 'self'; usermedia '*'; sync-xhr 'self' example.com
- 语法 Feature-Policy:
<feature> <allowlist>
<feature>
允许开启或者禁止的浏览器属性和API列表 - 允许开启或者禁止的浏览器属性和API列表还没有完全敲定,上段落发了mdn的feature list:
- 2020年 7月 16日,W3C 组织发布规范,Feature Policy 正式更名为 Permissions Policy。
- 语法变更
- 原有 Feature-Policy 示例:
Feature-Policy: geolocation 'self' https://example.com; microphone 'none'
- Permissions-Policy 语法变更为:
Permissions-Policy: geolocation=(self "https://example.com"), microphone=()