javascript iframe跨域详解

下面详细讲解 JavaScript Iframe 跨域的完整攻略，说到 iframe，一定要涉及到跨域问题。当 iframe 页面和父页面处于不同域时，由于同源策略的限制，JavaScript 无法获取到 iframe 页面的内容，也无法操作 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 跨域详解的完整攻略已经讲解完毕。