小龙的博客

iframe安全问题

1.iframe 

有些时候我们的前端页面需要用到第三方提供的页面组件,通常会以iframe的方式引入。典型的例子是使用iframe在页面上添加第三方提供的广告、天气预报、社交分享插件等等。

iframe在给我们的页面带来更多丰富的内容和能力的同时,也带来了不少的安全隐患。因为iframe中的内容是由第三方来提供的,默认情况下他们不受我们的控制,他们可以在iframe中运行JavaScirpt脚本、Flash插件、弹出对话框等等,这可能会破坏前端用户体验。

如果说iframe只是有可能会给用户体验带来影响,看似风险不大,那么如果iframe中的域名因为过期而被恶意攻击者抢注,或者第三方被黑客攻破,iframe中的内容被替换掉了,从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件等等,这问题可就大了。


2.iframe基本用法 

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

<iframe src="demo_iframe_sandbox.htm"></iframe>

我们来看看在iframe中还可以设置些什么属性:


iframe常用属性:

1.frameborder:是否显示边框,1(yes),0(no)

2.height:框架作为一个普通元素的高度,建议在使用css设置。

3.width:框架作为一个普通元素的宽度,建议使用css设置。

4.name:框架的名称,window.frames[name]时专用的属性。

5.scrolling:框架的是否滚动。yes,no,auto。

6.src:内框架的地址,可以使页面地址,也可以是图片的地址。

7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用

8.sandbox: 对iframe进行一些列限制,IE10+支持

我们通常使用iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转

window.location.href.

3.防止点击劫持 

我们在通过iframe使用别人提供的内容时,我们自己的页面也可能正在被不法分子放到他们精心构造的iframe或者frame当中,进行点击劫持攻击。 

这是一种欺骗性比较强,同时也需要用户高度参与才能完成的一种攻击。通常的攻击步骤是这样的:

攻击者精心构造一个诱导用户点击的内容,比如Web页面小游戏

将我们的页面放入到iframe当中

利用z-index等CSS样式将这个iframe叠加到小游戏的垂直方向的正上方

把iframe设置为100%透明度

受害者访问到这个页面后,肉眼看到的是一个小游戏,如果受到诱导进行了点击的话,实际上点击到的却是iframe中的我们的页面

点击劫持的危害在于,攻击利用了受害者的用户身份,在其不知情的情况下进行一些操作。如果只是迫使用户关注某个微博账号的话,看上去仿佛还可以承受,但是如果是删除某个重要文件记录,或者窃取敏感信息,那么造成的危害可就难以承受了。 

(1)防嵌套网页 

为了防止网站被钓鱼,可以使用window.top来防止你的网页被iframe.

//iframe2.htmlif(window != window.top){    window.top.location.href = correctURL;

这段代码的主要用途是限定你的网页不能嵌套在任意网页内。 

如果你想引用同域的框架的话,可以判断域名。

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

当然,如果你网页不同域名的话,上述就会报错。


(2)X-Frame-Options 

X-Frame-Options是一个响应头,主要是描述服务器的网页资源的iframe权限。目前的支持度是IE8+(已经很好了啊喂) 

有3个选项:

DENY:当前页面不能被嵌套iframe里,即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe

SAMEORIGIN:iframe页面的地址只能为同源域名下的页面

ALLOW-FROM:可以在指定的origin url的iframe中加载


简单实例:

X-Frame-Options: DENY

拒绝任何iframe的嵌套请求

X-Frame-Options: SAMEORIGIN

只允许同源请求,例如网页为 foo.com/123.php,則 foo.com 底下的所有网页可以嵌入此网页,但是 foo.com 以外的网页不能嵌入

X-Frame-Options: ALLOW-FROM http://s3131212.com

只允许指定网页的iframe请求,不过兼容性较差Chrome不支持

X-Frame-Options其实就是将前端js对iframe的把控交给服务器来进行处理。 

该属性是对页面的iframe进行一个主要限制,不过,涉及iframe的header可不止这一个,另外还有一个Content Security Policy, 他同样也可以对iframe进行限制,而且,他应该是以后网页安全防护的主流。


(3)CSP之页面防护 

和X-Frames-Options一样,都需要在服务器端设置好相关的Header. CSP 的作用, 真的是太大了,他能够极大的防止你的页面被XSS攻击,而且可以制定js,css,img等相关资源的origin,防止被恶意注入。不过兼容性不好。 

而且目前市面上,流行的是3种CSP头,以及各种浏览器的兼容性: 

 

使用主要是在后端服务器上配置,在前端,我们可以观察Response Header 里是否有这样的一个Header:

Content-Security-Policy: default-src 'self'

这就表明,你的网页是启用CSP的。


4.限制iframe的第三方网页 

sandbox: 

当然,我们面临的安全问题还有一个,就是当iframe别人的页面时,我们需要对其进行安全设限,虽然,跨域时iframe的安全性会大很多,但是,互联网是没有安全的地方。在以前,我们会进行各种trick来防止自己的页面被污染,现在h5提供的一个新属性sandbox可以很好的解决这个问题。 

通过它可以对iframe的行为进行各种限制,充分实现“最小权限“原则。使用sandbox的最简单的方式就是只在iframe元素中添加上这个关键词就好,就像下面这样:

<iframe sandbox src="..."> ... </iframe>

sandbox还忠实的实现了“Secure By Default”原则,也就是说,如果你只是添加上这个属性而保持属性值为空,那么浏览器将会对iframe实施史上最严厉的调控限制,基本上来讲就是除了允许显示静态资源以外,其他什么都做不了。比如不准提交表单、不准弹窗、不准执行脚本等等,连Origin都会被强制重新分配一个唯一的值,换句话讲就是iframe中的页面访问它自己的服务器都会被算作跨域请求。 

另外,sandbox也提供了丰富的配置参数,我们可以进行较为细粒度的控制。一些典型的参数如下:

allow-forms:允许iframe中提交form表单

allow-popups:允许iframe中弹出新的窗口或者标签页(例如,window.open(),showModalDialog(),target=”_blank”等等)

allow-scripts:允许iframe中执行JavaScript

allow-same-origin:允许iframe中的网页开启同源策略


本文标题:iframe安全问题
本文链接:https://xl.cndyun.com/post/369.html
作者授权:除特别说明外,本文由 admin 原创编译并授权 小龙的博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2018 小龙的博客 All Rights Reserved 
蒙公网安备 15020202000127号 蒙ICP备16000686号

分享:

支付宝

微信