企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

iframe安全性探索

JavaScript笔记 码云 54℃ 0评论
目录
[隐藏]

之前写过一篇关于iframe的入门文章《iframe的初步认识》,带领大家初步了解iframe,接下来的内容让我们来看一下有关它的安全性方面的问题。iframe出现安全性有两个方面,一个是你的网页被别人iframe,一个是你iframe别人的网页。当你的网页被别人iframe时,比较蛋疼的是被钓鱼网站利用,然后victim+s留言逼逼你。真.简直了。所以为了防止页面被一些不法分子利用,我们需要做好安全性措施。

防嵌套网页

比如,最出名的clickhacking就是使用iframe来拦截click事件。因为iframe享有着click的最优先权,当有人在伪造的主页中进行点击的话,如果点在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

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

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

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

3、ALLOW-FROM:可以在指定的originurl的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的把控交给服务器来进行处理。

//js
if(window != window.top){
    window.top.location.href = window.location.href;
}
//等价于
X-Frame-Options: DENY
//js
if (top.location.hostname != window.location.hostname) { 
    top.location.href =window.location.href;
}
//等价于
X-Frame-Options: SAMEORIGIN

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

CSP之页面防护

和X-Frames-Options一样,都需要在服务器端设置好相关的Header.CSP的作用,真的是太大了,他能够极大的防止你的页面被XSS攻击,而且可以制定js,css,img等相关资源的origin,防止被恶意注入。不过他的兼容性,也是渣的一逼。目前支持Edge12+以及IE10+。而且目前市面上,流行的是3种CSP头,以及各种浏览器的兼容性

iframe安全性探索

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

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

这就表明,你的网页是启用CSP的。通常我们可以在CSP后配置各种指定资源路径,有

default-src,

script-src,

style-src,

img-src,

connect-src,

font-src,

object-src,

media-src,

sandbox,

child-src,

如果你未指定的话,则是使用default-src规定的加载策略.默认配置就是同域:default-src“self”.这里和iframe有一点瓜葛的就是child-src和sandbox.child-src就是用来指定iframe的有效加载路径。其实和X-Frame-Options中配置allow-origin是一个道理。不过,allow-origin没有得到厂商们的支持。而,sandbox其实就和iframe的sandbox属性(下文介绍),是一样一样的,他可以规定来源能够带有什么权限.来个栗子:

Content-Security-Policy: child-src 'self' http://mybj123.com; sandbox allow-forms allow-same-origin

此时,iframe的src就只能加载同域和example.com页面。最后再补充一点:使用CSP能够很好的防止XSS攻击,原理就是CSP会默认escape掉内联样式和脚本,以及eval执行。但是,你可以使用srcipt-src进行降低限制.

Content-Security-Policy: script-src 'unsafe-inline'

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

sandbox

sandbox就是用来给指定iframe设置一个沙盒模型限制iframe的更多权限.sandbox是h5的一个新属性,IE10+支持(md~).启用方式就是使用sandbox属性:

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

这样会对iframe页面进行一系列的限制:

1.script脚本不能执行

2.不能发送ajax请求

3.不能使用本地存储,即localStorage,cookie等

4.不能创建新的弹窗和window

5.不能发送表单

6.不能加载额外插件比如flash等

看到这里,我也是醉了。好好的一个iframe,你这样是不是有点过分了。不过,你可以放宽一点权限。在sandbox里面进行一些简单设置

<iframe sandbox=”allow-same-origin” src=”...”></iframe>

常用的配置项有:

配置 效果
allow-forms 允许进行提交表单
allow-scripts 运行执行脚本
allow-same-origin 允许同域请求,比如ajax,storage
allow-top-navigation 允许iframe能够主导window.top进行页面跳转
allow-popups 允许iframe中弹出新窗口,比如,window.open,target=”_blank”
allow-pointer-lock 在iframe中可以锁定鼠标,主要和鼠标锁定有关

可以通过在sandbox里,添加允许进行的权限.

<iframe sandbox=”allow-forms allow-same-origin allow-scripts” src=”...”></iframe>

这样,就可以保证js脚本的执行,但是禁止iframe里的javascript执行top.location=self.location。哎,其实,iframe的安全问题还是超级有的。比如location劫持,Refers检查等。不过目前而言,知道怎么简单的做一些安全措施就over了,白帽子们会帮我们测试的。

转载请注明:码云笔记 » iframe安全性探索

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址