跨域IFrame访问异常：Chrome/Safari报错Firefox正常，求Chrome适配方案

首先明确：你遇到的错误和iframe嵌入权限无关，而是iframe内的我方网站脚本尝试直接访问父页面（客户端网站）的DOM/对象，触发了浏览器的同源安全限制——Chrome、Safari严格执行该规则，Firefox可能因脚本未触发跨域访问或旧版本兼容逻辑未报错，但本质问题是跨域DOM操作本身不被允许。

关于当前Nginx配置的优化 #

你配置的X-Frame-Options: allow-from语法已被Chrome弃用，现代浏览器仅认可CSP的frame-ancestors规则（这是X-Frame-Options的官方替代方案），因此可以清理Nginx配置，保留有效规则即可：

add_header Content-Security-Policy "frame-ancestors 'self' http://client-website.com" always;

该配置足以让Chrome、Safari允许我方网站被客户端网站嵌入iframe。

核心错误的解决方法 #

要解决跨域DOM访问被拦截的问题，必须使用浏览器原生的postMessage API实现iframe与父页面的安全通信，替代直接访问跨域window对象的代码：

1. 我方iframe页面向父页面发送消息 #

// 我方网站脚本：发送消息到客户端父页面，限制仅允许指定源接收
window.parent.postMessage(
  { type: 'your-action-type', data: '需要传递的内容' },
  'http://client-website.com'
);

2. 客户端父页面监听并处理消息 #

// 客户端网站脚本：监听来自我方网站的消息，验证来源防止恶意请求
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://our-website.com') return;
  
  if (event.data.type === 'your-action-type') {
    // 处理收到的数据
    console.log('收到消息：', event.data.data);
    // 可选：回复消息给iframe
    event.source.postMessage(
      { type: 'response', data: '处理结果' },
      event.origin
    );
  }
});

3. 父页面向iframe发送消息（如需） #

如果客户端页面需要主动向iframe发送指令，可通过iframe元素的contentWindow调用postMessage：

// 客户端网站脚本：获取iframe元素并发送消息
const ourIframe = document.getElementById('your-iframe-id');
ourIframe.contentWindow.postMessage(
  { type: 'parent-action', data: '指令内容' },
  'https://our-website.com'
);

同时在我方iframe页面添加对应的消息监听逻辑即可。

内容的提问来源于stack exchange，提问作者Karthi