Chrome115更新引发iframe跨域失败，企业系统受到重创

2023-07-02 02:38:01

Chrome 115 更新：应对跨域 iframe 失败的解决方案

问题根源

Chrome 115 更新带来了浏览器安全策略的重大变更，对 iframe 跨域请求施加了限制。过去，iframe 可以轻松加载不同域名的内容，但这种做法存在安全隐患。为了保护用户免受攻击，谷歌限制了 iframe 跨域请求，仅允许来自同一域名的请求。

对企业系统的影响

Chrome 115 更新对使用 iframe 加载不同域名内容的企业系统产生了重大影响。常见的应用包括广告、统计数据和第三方服务。随着更新的发布，这些 iframe 加载失败，导致系统故障。例如，电商网站可能无法加载产品评论，在线学习平台可能无法加载视频课程。

解决方案

应对 Chrome 115 iframe 跨域失败问题，有四种常见解决方案：

1. CORS（跨域资源共享）

CORS 是一种标准，允许不同域名的请求。通过配置服务器端 CORS 头，可以允许来自 Chrome 115 的 iframe 请求。

示例代码：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Headers: Content-Type, Authorization

2. postMessage() 方法

postMessage() 方法允许 iframe 和父窗口通信。数据可以通过 iframe 发送到父窗口，然后由父窗口再发送到 iframe。

示例代码：

// iframe 中的代码
parent.postMessage('你好，父窗口！', 'https://example.com');

// 父窗口中的代码
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log(event.data); // '你好，父窗口！'
  }
});

3. JSONP（JSON with Padding）

JSONP 是一种技术，允许从不同域名加载 JSON 数据。通过创建一个带有 JSONP 回调函数的