HTML iframe sandbox 安全沙箱
iframe sandbox属性深入：sandbox=''最严格(禁止一切/JavaScript/表单/弹窗/顶层导航)、allow-scripts/allow-same-origin/allow-forms/allow-popups/allow-top-navigation逐项放开、iframe安全最佳实践 · 难度：入门 · +10XP
HTML iframe sandbox —— 安全地嵌入外部内容
默认情况下iframe里的页面可以执行JavaScript、提交表单。sandbox属性就是给iframe加限制的。
最安全的设置
<iframe src="untrusted.html" sandbox></iframe>sandbox不跟任何值=所有限制都开启！
按需放开权限
<iframe src="video.html" sandbox="allow-scripts allow-same-origin"></iframe>| 权限值 | 允许什么 |
|---|---|
| allow-scripts | 执行JavaScript |
| allow-same-origin | 视为同源 |
| allow-forms | 提交表单 |
| allow-popups | 打开弹窗 |
注意：同时设置allow-scripts和allow-same-origin有安全风险——iframe可以移除sandbox属性！
动手练习
- 基础练习：用iframe嵌入外部页面，加sandbox属性观察功能限制。
- 进阶应用：在网站中用iframe嵌入B站视频，设置安全的sandbox配置。
- 项目实战：做在线代码编辑器预览——textarea写HTML，sandbox iframe实时预览。