iframe无法访问页面

背景

在一些场景下，我们的网站需要通过iframe标签嵌入第三方厂家的页面，这时候就得通过iframe标签去引入需要嵌入网页的网址了

案例

例如，2月15日是元宵节，为了庆祝元宵，我们需要在主站上线活动页，这个活动页刚好是一个第三方网站(欧阳修的一首词)，我们需要把他嵌入到主站中：

主站设计图如下:

主站实现代码如下：


  万家灯火，共聚团圆 
  正月十五元宵节

问题

把代码提交之后，打开我们的主站，效果却变成了这样：

查看控制台，有以下报错信息：?
Refused to display 'https://www.zzcyes.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

控制台说在ifame嵌入的第三方网站拒绝了我们的访问，因为它把X-Frame-Options设置成了deny。

X-Frame-Options

MDN对它的解释如下：

The X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 , </code>, <code><embed></code> 或者 <code><object></code> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 clickjacking 攻击。</p> </blockquote> <p>换一句话说，如果设置为 <code>deny</code>，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。另一方面，如果设置为<code>sameorigin</code>，那么页面就可以在同域名页面的<code>frame</code>中嵌套。</p> <ul> <li><code>deny</code>表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。</li> <li><code>sameorigin</code>表示该页面可以在相同域名页面的 frame 中展示。</li> <li><code>allow-from _uri_</code>表示该页面可以在指定来源的 frame 中展示。</li> </ul> <h2 id="解决方案">解决方案</h2> <p>知道<code>X-Frame-Options</code>的含义后，那么我们只需将<code>X-Frame-Options</code>的值设为<code>sameorigin</code>或<code>allow-from uri</code>即可。由于第三方页面是通过nginx部署的，因此，我们需要配置 nginx 发送 X-Frame-Options 响应头，把<code>sameorigin</code>或<code>allow-from uri</code>添加到 "http"，"server"或者 "location"的配置中(保存好配置后记得重启<code>nginx -s reload</code>)</p> <h3 id="x-frame-optionssameorigin">X-Frame-Options：sameorigin</h3> <p>如果主站和嵌入的第三方网页<strong>在同一个域中</strong>，可以把<code>add_header X-Frame-Options sameorigin</code>这一行，添加到nginx配置中:</p> <pre><code class="language-html"> server { #listen 80; listen 443 ssl; // 主站是https协议 server_name www.zzcyes.com; add_header X-Frame-Options sameorigin; // 省略其它配置 ... } </code></pre> <h3 id="x-frame-optionsallow-from-uri">X-Frame-Options：allow-from uri</h3> <p>如果主站和嵌入的第三方网页<strong>不在同一个域中</strong>，可以把<code>add_header X-Frame-Options "ALLOW-FROM url"</code>这一行，添加到nginx配置中去。这里的url是指你主站的url，也就是嵌入iframe的网页地址，不是iframe上访问的网址。<br> ?</p> <p>假设主站网址为<code>https://www.zzcyes.com</code>，配置如下:<code>add_header X-Frame-Options "ALLOW-FROM https://www.zzcyes.com"</code><br> ?</p> <p>若有多个主站需要嵌入第三方网页，则需要用逗号分隔多个主站的网址：<br> <code>add_header X-Frame-Options "ALLOW-FROM https://www.zzcyes.com,http://www.zzcyes.com"</code></p> <pre><code> server { #listen 80; listen 443 ssl; // 主站是https协议 server_name www.zzcyes.com; add_header X-Frame-Options "ALLOW-FROM https://www.zzcyes.com"; // 多个用逗号分隔 #add_header X-Frame-Options "ALLOW-FROM https://www.zzcyes.com,http://www.zzcyes.com"; ... } </code></pre> <p>注意：当按以上配置允许iframe展示的网站时，控制台打印如下错误：<br> <em>Invalid 'X-Frame-Options' header encountered when loading 'https://www.zzcyes.com/': 'ALLOW-FROM https://www.zzcyes.com'is not a recognized directive. The header will be ignored.</em></p> <p><img src="https://img.yipin100.com/p.php?img=https://www.zzcyes.com/images/iframe-load-url-05.png" alt="iframe-load-url-05.png" loading="lazy"></p> <p>控制台打印说我设置的标头X-Frame-Options不生效，我反复检查了下nginx的配置，确实没有问题。于是想了下会不会浏览器版本的，是不是不支持<code>allow-from</code>这个语法，果然，在mdn浏览器兼容性的表上查到了，果然不支持（chrome浏览器）<code>allow-from</code>这个语法，那么这种方案（在chrome浏览器上）就行不通了</p> <p><img src="https://img.yipin100.com/p.php?img=https://www.zzcyes.com/images/iframe-load-url-06.png" alt="iframe-load-url-06.png" loading="lazy"></p> <h3 id="content-security-policy">Content-Security-Policy</h3> <p>如果主站和嵌入的第三方网页<strong>不在同一个域中</strong>，通过设置X-Frame-options的值为<code>allow-from url</code>这个方法，显然在大部分浏览器上都不支持（IE和火狐除外）。同样在mdn对X-Frame-Options描述下有这么一段话：</p> <blockquote> <p>The added security is only provided if the user accessing the document is using a browser supporting X-Frame-Options. Content-Security-Policy HTTP 头中的 frame-ancestors 指令会替代这个非标准的 header。CSP 的 frame-ancestors 会在 Gecko 4.0 中支持，但是并不会被所有浏览器支持。然而 X-Frame-Options 是个已广泛支持的非官方标准，可以和 CSP 结合使用。</p> </blockquote> <p>这里引出了<code>Content-Security-Policy</code>，具体用法请到MDN查阅。</p> <h2 id="文章">文章</h2> <ul> <li>X-Frame-Options - HTTP | MDN</li> <li>Content-Security-Policy - HTTP | MDN</li> </ul> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid643-0.html' class='tagbtn' target='_blank'>网络</a><a href='/t/etagid626-0.html' class='tagbtn' target='_blank'>Nginx</a><a href='/t/etagid49-0.html' class='tagbtn' target='_blank'>前端</a><a href='/t/etagid3388-0.html' class='tagbtn' target='_blank'>iframe</a><a href='/t/etagid15458-0.html' class='tagbtn' target='_blank'>frame</a><a href='/t/etagid6134-0.html' class='tagbtn' target='_blank'>URL</a><a href='/t/etagid14177-0.html' class='tagbtn' target='_blank'>csp</a><a href='/t/etagid15459-0.html' class='tagbtn' target='_blank'>X-Frame-Options</a><a href='/t/etagid15460-0.html' class='tagbtn' target='_blank'>Content-Security-Pol</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566392.html">linux环境开机自启动nginx</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565613.html">nginx下配置多个web服务</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565808.html">一步一步配置docker（tomcat+jenkins+phpmyadmin+nginx）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565394.html">基于CDN边缘网络智能优化图片和视频</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565333.html">Django url路由分配</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565320.html">阿里云服务器搭建Nginx+rtmp推流服务器</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565426.html">2019CSP-S初赛知识点汇总</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565046.html">curl 度量时间</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564569.html">浅谈 RDMA 与无损网络</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564944.html">网络编程中URL的encode和decode</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564773.html">nginx反向代理websocket wss或ws端口</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="/skin/bootstrap.bundle.js"></script> </body> </html>