iframe相关的一些有的没的

最近频繁跟iframe打交道,我的天,这货真的有点儿坑,心有点累 (:з」∠) 随手记录一下

问题:

嵌入Iframe的页面返回404或者403

详细描述:

某个页面用浏览器能够正常打开,但嵌入Iframe则会返回服务器错误404-找不到文件或目录,或者返回403-无权限访问,偶然能够返回打开

解决过程:

各种方法尝试都没有用,最后只能简单粗暴的抓包!!!发现<iframe>在请求资源的时候会带上 referrer 所以只要去掉这个就可以了!!!o(╥﹏╥)o 找了好久的问题所在。

解决方法:

<iframe>中有一个referrerpolicy可以用来设置referrer

在 iframe 中 referrerpolicy 的取值有:

  • no-referrer 表示在访问资源的时候不会带上 referrer 信息

  • origin 表示访问资源的时候,会带上来源页面的信息,包括:host 和 port

  • origin-when-cross-origin

    表示访问不同域的资源,referrer 信息只包含 host 和 port,访问同域的资源时,除了 host 和 port,还会带上源页的 path 信息

  • unsafe-url

    表示访问资源时,referrer 信息会带上除 fragment、password、username 以外的所有信息,包括:host、port、path,当使用这个 policy 会有安全隐患,会把受 TLS 保护的 origin 信息泄露给不安全的域。

  • no-referrer-when-downgrade

    这个策略是浏览器的默认策略,表示受 TLS 保护的 origin,在访问非 TLS 包含的资源时,会去掉 referrer 信息,反过来访问相同安全级别的域时 referrer 会带上 host、port、path。

问题:

嵌入Iframe的页面全屏受限制

详细描述:

嵌入Iframe的页面是地图,地图有一个全屏的功能,正常网页打开可用,但嵌入iframe中就没响应

解决过程:

这种坑感觉就是iframe某些功能的限制呢,查查<iframe>的属性,果然就找到了allowfullscreen

解决方法:

设置<iframe>的属性allowfullscreen为true

<iframe allowfullscreen="allowfullscreen" ></iframe>