HTML <iframe> sandbox 属性

HTML iframe 标签参考手册 HTML <iframe> 标签

带有额外限制的 <iframe>：

<iframe src="/examples/demo_iframe_sandbox.html" sandbox="">
  <p>您的浏览器不支持 iframes.</p>
</iframe>

<p>"获得日期和时间" 按钮会在行内框架中运行一段脚本。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，行内框架的内容不允许运行脚本。</p>
<p>如果向 sandbox 属性添加 "allow-scripts"，则允许运行 JavaScript。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10、Firefox、Chrome 和 Safari 支持 sandbox 属性。

注意：Opera 和 Internet Explorer 9 及之前的版本不支持 sandbox 属性。

定义和用法

如果指定了空字符串（sandbox=""），该属性对呈现在iframe框架中的内容启用一些额外的限制条件。

sandbox 属性的值既可以是一个空字符串（将会启用所有的限制），也可以是用空格分隔的一系列指定的字符串。

HTML 5通过sandbox属性提升iFrame的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。

HTML 5规范的编辑Ian Hickson谈到了sandbox的好处，它可以防止如下操作：

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

HTML 4.01 与 HTML5之间的差异

sandbox 属性是 HTML5 中的新属性。

语法

<iframe sandbox="value">

属性值

值 描述
"" 启用所有限制条件
allow-same-origin 允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。
allow-top-navigation 嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。

更多实例

一个允许表单提交的 <iframe> sandbox - 启用一系列额外限制，但允许表单提交。

<iframe src="/examples/demo_iframe_sandbox_form.html" sandbox="">
  <p>您的浏览器不支持 iframes.</p>
</iframe>

<p>"提交" 按钮将提交行内框架内的表单。</p>
<p>由于 sandbox 属性被设置为空字符串 ("")，将屏蔽对行内框架中表单的提交。</p>
<p>如果向 sandbox 属性添加 "allow-forms"，则允许表单提交。</p>
<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>

尝试一下 »

一个允许脚本和访问服务器内容的 <iframe> sandbox - 启用一系列额外限制，但允许脚本和访问服务器内容。

<iframe src="/examples/demo_iframe_sandbox_origin.html" sandbox="allow-same-origin allow-scripts">
  <p>您的浏览器不支持 iframe 标签。</p>
</iframe>

<p>请试着删除 sandbox 属性，或者改变其设置。</p>

<p><b>注释：</b>IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。</p>

尝试一下 »

HTML iframe 标签参考手册 HTML <iframe> 标签