HTML <iframe> 标签sandbox属性

<iframe>标签sandbox属性定义和用法

sandbox属性为iframe中的内容启用了一组额外的限制。
当sandbox属性存在时，它将：

将内容视为来自独特的来源
阻止表单提交
阻止脚本执行
禁用API
阻止链接定位到其他浏览上下文
阻止内容使用插件（通过<embed>，<object>，<applet>或其他）
阻止内容导航其顶级浏览上下文
阻止自动触发的功能（例如自动播放视频或自动聚焦表单控件）

sandbox属性的值可以是sandbox（然后应用所有限制），也可以是以空格分隔的预定义值列表，这些值将删除特定限制。

<iframe>标签sandbox属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

10.0（含）以上	4.0（含）以上	17.0（含）以上	5.0（含）以上	15.0（含）以上

HTML4.01和HTML5之间的差异

sandbox属性是HTML5中的新属性。

<iframe>标签sandbox属性语法

<iframe>标签sandbox属性实例

allow-scripts的例子：

<!DOCTYPE html>
<html>
<body>

<iframe src="/jc_script/tag/iframe_sandbox_demo1.html" sandbox>
  <p>您的浏览器并不支持iframe</p>
</iframe>

<p>“获取日期和时间”按钮将在内联框架中运行脚本。</p>
<p>由于设置了sandbox属性，因此不允许内联框架的内容运行脚本。</p>
<p>您可以在sandbox属性中添加“allow-scripts”，以允许JavaScript运行。</p>

<p><strong>注意:</strong> Internet Explorer 9及更早版本或Opera 12及更早版本不支持sandbox属性。</p>

</body>
</html>

尝试一下

allow-forms的例子：

<!DOCTYPE html>
<html>
<body>

<iframe src="/jc_script/tag/iframe_sandbox_demo2.html" sandbox="">
  <p>Your browser does not support iframes.</p>
</iframe>

<p>“提交”按钮将在内联框架中提交表单。</p>
<p>由于sandbox属性被设置为空字符串("")，所以内联框架中的表单提交将被阻止。</p>
<p>将“allow-forms”添加到sandbox属性，以允许表单提交。</p>

<p><strong>注意:</strong> Internet Explorer 9及更早版本或Opera 12及更早版本不支持sandbox属性。</p>

</body>
</html>

尝试一下

允许脚本和访问服务器内容：

<!DOCTYPE html>
<html>
<body>

<iframe src="/jc_script/tag/iframe_sandbox_demo3.html" sandbox="allow-same-origin allow-scripts">
  <p>您的浏览器并不支持iframe。</p>
</iframe>

<p>尝试删除sandbox属性值或更改它。</p>

<p><strong>注意:</strong> Internet Explorer 9及更早版本或Opera 12及更早版本不支持sandbox属性。</p>

</body>
</html>

尝试一下

<iframe>标签sandbox属性值

属性值	描述
(no value)	适用所有限制
allow-forms	重新启用表单提交
allow-pointer-lock	重新启用API
allow-popups	重新启用弹出窗口
allow-same-origin	允许将iframe内容视为来自同一来源
allow-scripts	重新启用脚本
allow-top-navigation	允许iframe内容导航其顶级浏览上下文