web安全策略之iframe-sandbox

前言

sandbox是html5的新属性,主要是提高iframe安全系数。iFrames因安全问题而臭名昭著,这主要是因为iFrames常常被用于嵌入第三方内容,而后者则可能会执行某些恶意操作。这样可以有效防止iframe对父页面进行攻击(禁用插件,禁止其他浏览上下文的导航,禁止弹出窗口和模式对话框)。sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。这种方式将sandbox内容与父页面进行了分离,因此限制了被嵌入内容的权限。它可以防止如下操作:

◆访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了)
◆执行脚本
◆通过脚本嵌入自己的表单或是操纵表单
◆对cookie、本地存储或本地SQL数据库的读写

<iframe src=‘www.baidu.com' sandbox=''>iframe>

IE 9 以及更早的版本不支持 sandbox 属性,Opera 12 以及更早的版本也不支持该属性。


sandbox属性
描述
“” 应用以下所有的限制。
allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。

例子 index.html

<html>
    <title>indextitle>
    <body>
        <h1>indexh1>
        <iframe src="child.html" sandbox="">iframe>
    body>
html>
例子 child.html

<html>
    <title>childtitle>
    <script type="text/javascript">
        alert('child');
    script>
    <body>
        <h1>childh1>
        <form id="form" action="http://www.baidu.com">
            <input type="submit" value="sub">
        form>
    body>
html>
例子解释

这样child.html页面的alert 和 form提交都无法执行。防止child页面对index页面的操作。child域从而独立。index可以继续控制child,而child无法控制index。

结论

sandbox是专门为iframe而定制的一个属性,现在对浏览器兼容来说不能完美兼容。但只是一个简单的代码在写的时候建议加入’sandbox’。还是起到一定的安全作用的。还有如果别人用js移除sandbox,必须下次页面重现刷新才会执行。而刚好页面渲染循序是,html>css>js文件。因此如果是用js移除sandbox属性应该是无效的。就一行代码别懒了。hh

你可能感兴趣的:(前端技术,html5,沙盒,web,安全,对话框)