【chrome】iframe与Permissions

前言

• 最近在做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=()