HTML的iframe跨域安全sandbox怎么配-html教程-PHP中文网

空sandbox属性导致iframe白屏或net::err_blocked_by_response，因浏览器直接丢弃http响应体、不启动html解析；必须显式声明如allow-scripts等权限才能启用解析与加载，且属性须在dom插入前写死。

html的iframe跨域安全sandbox怎么配

空 sandbox 属性等于 iframe 白屏或 net::ERR_BLOCKED_BY_RESPONSE

直接写 sandbox 或 sandbox="" 不是“开启沙箱”，而是触发浏览器最底层的内容拦截：HTTP 响应体被丢弃，HTML 解析器根本不启动。现象是 iframe 完全空白，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，控制台静默无报错。这不是加载失败，是内容压根没被处理。

验证方式很简单：document.querySelector('iframe').sandbox 返回空的 DOMTokenList [] 就说明没开任何权限，等同于锁死状态。

必须显式声明至少一个 allow- token 才能启动解析和加载，比如 sandbox="allow-scripts"
sandbox=" "（带空格）也等效于空值，同样白屏
动态设置 iframe.sandbox = "allow-scripts" 无效；属性必须在 DOM 插入前就写死

跨域 iframe 必须配 allow-scripts allow-forms，但绝不能加 allow-same-origin

金融、支付、认证类跨域 iframe 的底线配置是 sandbox="allow-scripts allow-forms"。它只解禁脚本执行和表单提交，其他高危能力全部锁死：

allow-scripts：让第三方 SDK（如微信 JS-SDK、支付宝收银台脚本）能初始化、签名、调起支付流程
allow-forms：使银行卡号、CVV 等字段可正常提交（注意：提交仍受 CORS 控制，不会自动发到父域）
不加 allow-same-origin：防止 iframe 读取父页 localStorage 中的 session token 或用户 ID
不加 allow-popups：禁用 window.open()，避免跳转钓鱼页
不加 allow-top-navigation：杜绝 top.location = 'https://phishing.com' 全页劫持

如果硬给跨域 iframe 加 allow-same-origin，浏览器会静默忽略该 token（因 src 与父页不同源），既得不到权限，又暴露配置疏漏——这是线上常见误配。

allow-scripts 不等于 onclick 能用，内联事件仍被屏蔽

allow-scripts 只解禁外链脚本（<script src="xxx.js"></script>）和 eval() 类执行，但以下行为依然被静默拦截：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<button onclick="fetch('/api')">click</button> —— 所有内联事件处理器失效
<script>alert(1)</script> —— 内联 script 标签被忽略
javascript:void(0)、document.write()、同步 XMLHttpRequest

原因在于：内联 handler 属于 HTML 解析阶段行为，受更底层策略约束。即使开了 allow-scripts，控制台也不会报错，只是绑定完全不生效。

正确做法：把逻辑移入外部 JS，或用 addEventListener 在 DOMContentLoaded 后绑定；若必须兼容无法修改的第三方 HTML（含大量 onclick），仅加 allow-scripts 不够，需评估是否允许 allow-popups（部分浏览器会放宽，但不可靠）。

跨域通信只能靠 postMessage，且 origin 必须严格校验

沙箱 iframe 的 origin 被强制设为 "null"，所有存储 API（localStorage、cookie）都绑定到一个临时、无持久化、父页完全不可见的上下文。真正可用的跨域通道只有 postMessage。

子页发送时：必须指定明确 target origin，如 window.parent.postMessage({ type: 'pay_result' }, 'https://yourdomain.com')
父页监听时：必须显式比对 e.origin === 'https://pay.bank.com'，拒绝 '*'
子页若无法修改（如银行方不提供 postMessage 支持），则支付结果必须走服务端异步通知，前端只轮询订单状态

很多团队配完 sandbox 就以为万事大吉，但真实线上问题往往出在边界场景：动态插入的 iframe（比如 React 中用 dangerouslySetInnerHTML 渲染）可能漏掉 sandbox 属性，导致未受控内容直接执行脚本。