javascript iframe跨域详解

下面详细讲解 JavaScript Iframe 跨域的完整攻略，说到 iframe，一定要涉及到跨域问题。当 iframe 页面和父页面处于不同域时，由于同源策略的限制，JavaScript 无法获取到 iframe 页面的内容，也无法操作 iframe 页面中的元素。但是，在某些场景下，我们需要在父页面中嵌入一个 iframe 来展示一个来自不同域的页面。那么，如何实现跨域访问嵌入的页面呢？

1. 跨域与同源策略

1.1 什么是跨域？

跨域是指在浏览器同源策略的限制下，JavaScript 无法访问不同源（协议、域名、端口号）的资源。例如，当在页面 A 中通过 Ajax 请求访问页面 B 中的接口时，由于两个页面的域名不同，所以请求会被浏览器拦截。

1.2 同源策略

同源策略是一种重要的安全策略，它限制了来自不同源的脚本在文档或脚本中执行的访问。同源策略是浏览器最核心也最基础的安全功能。通过同源策略，可以避免恶意网站通过 iframe 窃取用户信息及避免 CSRF 等安全问题的产生。

同源指的是两个页面具有相同的协议、域名和端口号。如果两个页面在这三个方面有任何一个不同，就被视为不同源。在考虑如何实现跨域访问 iframe 页面时，就需要理解同源策略。

2. 解决方案

2.1 window.postMessage() 方法

window.postMessage() 方法是 HTML5 引入的一种新解决方案，它能够在跨域的情况下实现窗口间通信。postMessage() 方法允许来自不同源的脚本彼此通信，而无需了解对方的源代码。这种技术可以用来提供各种跨文档通信场景的支持，包括实现不同源之间的页面间通信。

在父页面中使用 window.postMessage() 方法：

// iframe 加载后，发送消息给 iframe
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('hello', 'http://otherdomain.com');

在 iframe 页面中使用 window.postMessage() 方法：

// 监听来自父窗口的消息
window.addEventListener('message', function (event) {
  // 判断消息来源是否正确
  if (event.origin === 'http://example.com') {
    // 执行操作
  }
}, false);

2.2 后端代理

后端代理是一种相对简单的跨域解决方案，在跨域问题比较简单的情况下可以采用。后端代理的基本原理是通过服务器作为中介，将前端请求转发至目标服务器，然后将目标服务器返回的响应数据再返回给前端。

例如，可以通过在服务器上设置一个路由，将所有该路由下的请求转发至目标服务器：

app.post('/proxy', (req, res) => {
  const request = http.request({
    hostname: 'target-domain.com',
    path: req.path,
    method: req.method,
    headers: req.headers
  }, (response) => {
    res.set(response.headers);
    response.pipe(res);
  });

  request.end();
});

3. 示例说明

下面分别通过实例，展示上述两种跨域解决方案的具体实现。

3.1 使用 window.postMessage() 方法

在父页面 index.html 中，嵌入了一个跨域 iframe，iframe 加载一个来自其它域名的页面 cross.html，此时，index.html 与 cross.html 不同源：

<!-- index.html -->
<iframe src="http://cross-domain.com/cross.html" id="iframe" />

在 index.html 页面中，通过 window.postMessage() 方法，给 iframe 发送消息：

const iframe = document.getElementById('iframe');
iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage(
    { message: 'hello, iframe' },
    'http://cross-domain.com'
  );
});

window.addEventListener('message', (e) => {
  if (e.origin !== 'http://cross-domain.com') return;
  console.log(e.data); // 监听 iframe 返回的消息
}, false);

在 cross.html 页面中，通过 window.postMessage() 方法，接收来自父页面的消息：

window.addEventListener('message', (e) => {
  if (e.origin !== 'http://your-domain.com') return;
  console.log(e.data); // 监听父页面返回的消息
  e.source.postMessage(
    { message: 'hello, parent' },
    'http://your-domain.com'
  );
});

3.2 使用后端代理

在父页面 index.html 中，发起 Ajax 请求，并使用后端代理获取跨域接口：

fetch('/api/proxy?url=http://cross-domain.com/api/data')
  .then((res) => res.json())
  .then((data) => console.log(data));

在服务器端，设置一个路由，将前端请求转发至目标服务器：

app.get('/api/proxy', async (req, res) => {
  const response = await axios.get(req.query.url);
  res.json(response.data);
});

这里使用了 axios 库来发送请求，当然也可以使用其他类似的库，或者直接使用 Node.js 的 http 模块。注意，这里为了简化代码，使用了 GET 方法，实际应用中需要根据情况填写正确的请求方法和请求头信息。

至此，JavaScript Iframe 跨域详解的完整攻略已经讲解完毕。