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 <meta>.
意思是只能通过发送的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 文件中:
<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
...
</system.webServer>
iframe优缺点、X-Frame-Options(如何防止点击劫持、设置页面是否能作为iframe嵌套)、iframe长轮询和应用场景相关推荐
- 轮询,长连接,长轮询原理及实现方式,优缺点
轮询,长连接,长轮询原理及实现方式,优缺点 在前一篇文章中我们了解了webSocket,就很有必要了解一点web通信技术.常用的轮询,长连接原理及实现方法. 通常的web应用的交互过程是:客户端发送请 ...
- iframe的属性及其简单使用(点击标签切换页面)
iframe的相关属性 详细内容参考:HTML <iframe> 标签 属性 值 描述 align left right top middle bottom 不赞成使用.请使用样式代替. ...
- html中嵌套iframe页面_selenium表单切换(iframe)
在做web自动化的过程中会遇到一些弹出的登录页面,定位后,执行程序发现还是出现报错,其实定位可能没有问题,而是表单再作怪,也就是iframe iframe iframe是HTML标签,作用是文档中的文 ...
- Selenium 如何处理多层嵌套 iframe
文章目录 Selenium 如何处理多层嵌套 iframe 1.如果 iframe 里面还套了一个 iframe 2.如何不直接回到主文档,而是返回上一层 iframe Selenium 如何处理多层 ...
- 广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B...
广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B 注:域名B为afish.cnblogs.com 域名A页面代码: <!DOCTYPE html PUBLIC ...
- php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
- HTML5怎么编辑另一个页面,html中嵌套iframe页面 如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面 将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
- jsp iframe嵌入php,jsp嵌套iframe从iframe中表单提交并传值到外层_html/css_WEB-ITnose
今天因需求迭代 更改元来代码 遇到了这么个问题 就是想在 iframe中提交后进行整个页面的跳转 并把iframe中的值传到外层jsp 大概就是这个样子 外层 a.jsp 内层 b.jsp 于是想当然 ...
- [js] 使用ajax轮询接口有什么优缺点?
[js] 使用ajax轮询接口有什么优缺点? 首先,所谓轮询接口的原理是 利用 setTimeout 定时请求API接口优点: 1,可以简单不用二次 开发websocket 实现所需功能 几乎没有学习 ...
最新文章
- 分布式计算开源框架Hadoop入门实践
- Python基础语法总结,Python初学者必备
- 前后端对接的思考及总结
- PHP获取IP地址所在的地理位置
- 2019 surf project for a milestone
- iOS-英雄联盟人物展示
- 想领取开发套件,就来参加AIoT开发者大赛
- bi power 两个日期挑较早的日期_功率 BI 中的时间智能:利用时间
- c字符串分割成数组_excel这个复杂数组公式怎么读?
- Qt做发布版,解决声音和图片、中文字体乱码问题
- 曾经风光无限的 JSP,为什么现在很少有人使用了?
- 鼠标移入事件_NSTrackingArea 监听鼠标移入与移出事件
- poj 1032 Parliament 编程的小技巧
- 三菱plc pwm指令_三菱PLC常用指令汇总,含用法与注释
- 计算机自带键盘无法使用,笔记本电脑键盘用不了怎么回事_笔记本电脑键盘不能用如何解决-win7之家...
- 用PYTHON将微信聊天记录生成词云虐狗步骤
- 全新型App开放框架—Clouda
- 第四章第六题(圆上的随机点)(Random points on a circle)
- 深入了解Elasticsearch存储
- linux服务器上查看显卡(nvidia)型号
热门文章
- 【PrimeTime 基本命令】
- 四五年级计算机课,三四五年级信息技术教学计划
- 抖音python课程价格_刷个抖音的功夫,就能学把Python学了,微软入门课GitHub热榜第一...
- AUTOSAR-- ( 汽车开放系统架构 Automotive Open System Architecture )
- 普通火车为什么没有高铁快?--分布式概念入门
- 如何创建完美的Facebook封面照片
- Ubuntu 14.04中文输入法的安装
- 声音播放装置及其补偿方法 电容模式, 无电容模式(capless mode)
- SQL Server中clustered与nonclustered的区别
- Linux FTP命令全集(ftp指令)