首页 > 其他分享 >跨域iframe 配置fullscreen权限

跨域iframe 配置fullscreen权限

时间:2023-07-26 11:58:02浏览次数:42  
标签:fullscreen none iframes 跨域 特性 iframe 允许 权限

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

参考文章:

标签:fullscreen,none,iframes,跨域,特性,iframe,允许,权限
From: https://www.cnblogs.com/azoux/p/17582073.html

相关文章

  • RDIFramework.NET CS敏捷开发框架 V6.0发布(支持.NET6+、Framework双引擎可选,全网唯一
    全新RDIFramework.NETV6.0CS敏捷开发框架发布,全网唯一支持.NET6+,Framework双引擎,降低开发成本,提高产品质量,提升用户体验与开发团队稳定性,做软件就选RDIFramework.NET敏捷开发框架。1、RDIFramework.NETCS敏捷开发框架介绍RDIFramework.NETC/S敏捷开发框架,是我司重磅推出......
  • 解决非同源跨域不带cookie问题(原生、axios、fetch写法)
    原生js写法varxhr=newXMLHttpRequest();xhr.open('GET','http://localhost:7001/api/userinfo',true);xhr.withCredentials=true;//开启withCredentialsxhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.stat......
  • 判断iframe加载成功与否
    素材库应用中,有一种素材是链接素材。在用户打开链接素材的时候,会将链接放到iframe中显示。但事情总不尽如人意,有时候会出现以下问题:iframe中访问https://www.baidu.com,发现打不开,原因是百度为了防劫持,而在响应中设置了阻止iframe显示自己网页的字段.用户有可能填写的是错误的网......
  • 【补充】Django框架之IFrame中的跨域问题
    【一】iframe中的跨域问题详解在网页开发中浏览器会应用跨域安全策略,限制不同域名之间的交互。跨域问题指的是如果一个网页的脚本尝试访问另一个域名下的资源或与其通信时,浏览器会拒绝这样的请求。其中,使用<iframe>标签嵌套其他网页是一种常见的前端技术。然而,由于<i......
  • 第六节:Nginx常用案例(反盗链、限速、黑名单、跨域等等)
     三.常用场景1. 防盗链直接输入地址,没有referer字段,所以匹配了后面的none或blocked,不跳转。通过搜索引擎打开的含有referer字段,走后面的匹配规则。 none代表没有refererblocked代表有referer,但是被防火墙或代理给去除了。配置如下:worker_processes1;even......
  • CORS常用解决跨域的方法
    浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错 前端发送Ajax请求$("#test").click(function(){$.ajax({url:"http://localhost......
  • JSONP方式解决跨域
     <script>//封装一个jsonp函数functionjsonp({url,params,callback}){returnnewPromise((resolve,reject)=>{//定义回调函数window[callback]=function(data){resolve(data)}......
  • SpringBoot如何解决跨域问题
    什么是跨域跨域问题的本质是浏览器为了保证用户的一种安全拦截机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。跨域三种情况在发起请求时,如果出现了以下情况中的任意一种,那么它就是跨域请求:协议不同,如http和https;域名不同;端口不同。也就是说,即使域名相......
  • python实现跨域代理服务器
    准备环境python3.7+依赖:aiohttp代码实现(代理服务器,返回响应体和进行跨域处理后的headers)importaiohttpfromfunctoolsimportwrapsfromaiohttpimportwebcorscode={'Access-Control-Allow-Origin':'*','Access-Contr......
  • uniapp H5 解决跨域
    1、请求地址:http://192.168.1.216:8080/renren-api/api/getUserInfo2、修改 manifest.json "h5":{"devServer":{"port":5173,//端口号"disableHostCheck":true,"proxy":{&quo......