html5嵌入页面跨域报错_html5嵌入页跨域解决法【方案】_技术教程

iframe跨域时无法访问contentWindow是同源策略强制保护，须用postMessage配合源校验实现安全通信，document.domain已废弃。

iframe 跨域时无法访问 contentWindow

当用嵌入不同源（协议、域名、端口任一不同）的页面时，浏览器会阻止脚本访问 iframe.contentWindow 或 iframe.contentDocument，直接报错 Blocked a frame with origin "https://a.com" from accessing a cross-origin frame.。这不是 bug，是浏览器同源策略的强制保护。

解决思路不是“绕过”策略，而是通过合法通信机制协作：

双方页面都需主动配合，不能单边修改
主页面调用 window.postMessage() 发送消息，嵌入页监听 message 事件接收
嵌入页回复时也必须指定目标源（event.source.postMessage(..., event.origin)），不能写 *（除非你明确信任所有来源）
主页面监听自身 message 事件时，务必校验 event.origin 和 event.source，防止伪造消息

postMessage 传参和响应不生效？检查这几点

postMessage 看似简单，但实际常因细节失效。常见卡点：

发送方未等 iframe 加载完成就调用 postMessage —— 应监听 iframe.onload 或 DOMContentLoaded 后再发
接收方没加 event.origin !== 'https://truste d.com' 校验，导致被恶意页面冒充
发送数据含函数、DOM 节点等无法序列化的值，会静默失败 —— 只能传可 JSON 序列化的对象
嵌入页在 iframe 内调用 parent.postMessage，但主页面绑定了错误的事件监听器（比如绑在 window 上却忘了加 useCapture: false 默认行为，其实不影响）

示例（主页面发）：

iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage({ type: 'INIT', data: { theme: 'dark' } }, 'https://embed.example.com');
});

嵌入页想主动通知主页面高度变化，怎么安全传？

这是典型场景：嵌入页内容动态撑高，需要通知父页调整 iframe 高度。关键在于避免无限循环和 XSS 风险：

嵌入页每次调用 parent.postMessage({ type: 'RESIZE', height: 520 }, parentOrigin) 前，先确认 parentOrigin 是白名单中的源（如从初始化消息里记下）
主页面收到后，只更新 iframe.style.height，**不要**直接执行 eval() 或插入 HTML 字符串
若嵌入页高度频繁变动，建议加防抖（如 100ms 内只发最后一次）
别依赖 iframe.contentDocument.body.scrollHeight —— 如果嵌入页 CSS 有 height: 100% 或 position: fixed 元素，这个值可能不准；更稳妥的是由嵌入页 JS 主动上报