在新版本的 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)都禁止。