iframe优缺点、X-Frame-Options（如何防止点击劫持、设置页面是否能作为iframe嵌套）、iframe长轮询和应用场景

目录

iframe优缺点

优点

缺点 

为什么尽量少用iframe

iframes阻塞页面加载，影响网页加载速度

唯一的连接池

解决

iframe应用场景

iframe长轮询

iframe跨域使用

防嵌套网页（点击劫持）

X-Frame-Options （设置页面能否作为iframe嵌套）

参数

DENY

SAMEORIGIN

ALLOW-FROM uri

配置方法

Apache

nginx

配置 IIS

---

iframe优缺点

优点

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点 

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去； 

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

为什么尽量少用iframe

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。

使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)，即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。

iframes阻塞页面加载，影响网页加载速度

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。

唯一的连接池

对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+和Opera 9+增至4个，Chrome 1+、IE 8及Firefox 3增至6个。

在大多数浏览器中，连接被主页面和它的 iframe所共享，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下iframe中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。

总之，iframe会给你的页面性能带来冲击，尽可能不使用iframe，当确实需要时，谨慎地使用他们。目前框架的优点可以使用Ajax实现，这在某种角度也是一种替代方案。

解决

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

 document.getElementById("myframe").src="http://www.taobao.com";

iframe应用场景

iframe的页面和父页面（parent）是分开的，所以它意味着，这是一个独立的区域，不受 parent的CSS或者全局的JavaScript的影响。

1.典型的，比如所见即所得的网页编辑器；

2.跨域通信。JavaScript跨域总结与解决办法 ，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放；

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代；

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换；

5.用iframe实现无刷新文件上传，在FormData不可用时作为替代方案；

6.创建一个全新的独立的宿主环境。iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范；

7.用来加载广告，例如联盟广告；

8.一般邮箱使用iframe，如QQ邮箱；

9.一些简单的后台页面。

iframe长轮询

异步创建iframe，然后reload, 和后台协商好, 看后台将返回的信息放在text中。

var iframeCon = docuemnt.querySelector('#container'),
        text; //传递的信息
    var iframe = document.createElement('iframe'),
        iframe.id = "frame",
        iframe.style = "display:none;",
        iframe.name="polling",
        iframe.src="target.html";
    iframeCon.appendChild(iframe);
    iframe.οnlοad= function(){
        var iloc = iframe.contentWindow.location,
            idoc  = iframe.contentDocument;
        setTimeout(function(){
            text = idoc.getElementsByTagName('body')[0].textContent;
            console.log(text);
            iloc.reload(); //刷新页面,再次获取信息，并且会触发onload函数
        },2000);
    }

iframe跨域使用

iframe标签（属性介绍（sandbox、srcdoc、scrolling）、iframe对象、onload事件、父集获取iframe内节点（同源和不同源情况）、domain修改规则和示例）_AIWWY的博客-CSDN博客

防嵌套网页（点击劫持）

因为iframe享有着click的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。 攻击者可以使用一个透明的、不可见的iframe，覆盖在目标网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击iframe页面的一些功能性按钮上，导致被劫持。

钓鱼网站就是使用这个技术，通过诱导用户进行点击，比如设计一个"妹妹寂寞了"等之类的网页，诱导用户点击，但实际结果，你看到的不是"妹妹",而是被恶意微博吸粉。 
所以为了防止网站被钓鱼，可以使用window.top来防止你的网页被iframe.

if(window != window.top){
    window.top.location.href = correctURL;
}

这段代码的主要用途是限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话，可以判断域名。

if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}

当然，如果你网页不同域名的话，上述就会报错。
所以，这里可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。可能有些浏览器这样写是不会报错，所以需要降级处理。
这时候再进行跳转即可.

try{
　　top.location.hostname;  //检测是否出错
　　//如果没有出错，则降级处理
　　if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
　　}
}
catch(e){
　　top.location.href = window.location.href;
}

这只是浏览器端，对iframe页面的权限做出相关的设置。 我们还可以在服务器上，对使用iframe的权限进行设置.

X-Frame-Options （设置页面能否作为iframe嵌套）

用来确认是否浏览器可以在frame或iframe标签中渲染一个页面，网站可以用这个头来保证他们的内容不会被嵌入到其它网站中，以来避免点击劫持。

参数

DENY

表示该页面不允许在 frame 中展示（拒绝任何iframe的嵌套请求），即便是在相同域名的页面中嵌套也不允许。

等价于：

if(window != window.top){
    window.top.location.href = window.location.href;
}

SAMEORIGIN

表示该页面可以在相同域名页面的iframe 中展示，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入。

设置后如果在不同域名页面通过iframe加载会报下面错误：in a frame because it set 'X-Frame-Options' to 'sameorigin'.

等价于：

if (top.location.hostname != window.location.hostname) { 
　　　　top.location.href =window.location.href;
}

ALLOW-FROM uri

表示该页面可以在指定的uri页面中被iiframe加载。

配置方法

注意通过meta标签设置会报如下错误：

X-Frame-Options may only be set via an HTTP header sent along with a document. It may not be set inside .

意思是只能通过发送的http头部设置并和文件一起发送，不能在meta标签中设置。

Apache

配置 Apache 在所有页面上发送 X-Frame-Options 响应头，需要把下面这行添加到 ‘site’ 的配置中:

Header always append X-Frame-Options SAMEORIGIN

nginx

配置 nginx 发送 X-Frame-Options 响应头，把下面这行添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置中:

## 表示该页面可以在相同域名页面的 frame 中展示
add_header X-Frame-Options SAMEORIGIN;
## 表示该页面可以在指定来源的 frame 中展示
#add_header X-Frame-Options "ALLOW-FROM  http://domain.com";

配置 IIS

配置 IIS 发送 X-Frame-Options 响应头，添加下面的配置到 Web.config 文件中:

 
  ...
 
 
 
 
 
  ...