跨域iframe 配置fullscreen权限

在新版本的 Chrome 等浏览器中，默认情况下禁止了跨域 iframe 开启全屏的权限。在 iframe 中，我们通常使用 element.requestFullscreen() 方法来进行全屏展示。根据 MDN 文档，为了让 iframe 展示全屏，我们需要配置 allowfullscreen 属性，注意这个属性已经被重新定义为 allow="fullscreen"。

HTMLCopy<iframe src="xxx" allow="fullscreen"></iframe>

W3C 提供了一个新标准叫做 Permissions-Policy，可以通过在返回的响应中传递权限策略的 HTTP 标头来进行更加精细化的权限控制。如果没有配置，默认是允许所有权限。权限策略会与 iframe 的 allow 属性取交集，也就是说，如果你的 iframe 没有设置 allow 属性，即使允许了所有权限，也不会生效。

我们可以在控制台的元素中对 iframe 元素点击右键，显示 iframe 的详细信息，就可以看到这个 iframe 的权限策略。

比如，SecureCorp 公司想要在应用中禁用震动和定位 API，可以在返回的响应中传递以下定义权限策略的 HTTP 标头信息：

HTTPCopyPermissions-Policy: vibrate 'none'; geolocation 'none'

通过使用 'none' 关键词，不管原来如何设定，这些特性在所有浏览上下文中都会被禁用。

Permissions-Policy:

其中，<allowlist> 可以是以下几种：

• *：允许在当前文档和所有包含的内容（比如 iframes）中使用该特性。
• 'self'：允许在当前文档中使用该特性，但在包含的内容（比如 iframes）仍使用原值。
• 'src'：（只在 iframe 中允许）只要在 src 中的 URL 和加载 iframe 用的 URL 相同，则在 iframe 中允许该特性。
• 'none'：从最上层到包含的内容都禁止该特性。
• <origin(s)>：在特定的源中允许，源 URL 以空格分割。

* 和 'none' 只允许单独使用，而 'self' 和 'src' 可以与多个源地址一起使用。

所有特性的默认 allowlist 如下：

• *：本特性默认在最上层和包含的内容中（如 iframes）允许。
• 'self'：本特性默认在最上层允许，在包含的内容中（如 iframes）使用源地址相同的设置。也就是说，该特性在 iframe 中不允许跨域访问。
• 'none'：本特性默认在最上层和包含的内容中（如 iframes）都禁止。

参考文章：

• Permissions-Policy - MDN
• iframe - MDN