使用内联源（data:text/html...）及JS创建的IFrame出现跨域访问错误

这个问题我之前踩过坑！这是浏览器的**同源策略（Same-Origin Policy）**在起作用——它会严格限制不同源的页面之间直接访问DOM，目的是防止恶意页面窃取用户的敏感数据，属于浏览器的核心安全机制。

下面分不同场景给你对应的解决方案：

1. 预期同域却出现跨域错误 #

如果你的IFrame和主页面本来应该是同域的，但还是报错，先检查这几点：

• 确认两者的协议（http/https）、域名、端口完全一致！哪怕都是localhost，端口一个是8082一个是8080，也会被浏览器判定为不同源。
• 动态创建IFrame时，一定要等它加载完成再去访问contentWindow.document，可以通过load事件监听来确保：

const myIframe = document.createElement('iframe');
myIframe.src = '你的同域页面地址';
document.body.appendChild(myIframe);

// 等IFrame加载完成再操作
myIframe.addEventListener('load', () => {
  try {
    const iframeDoc = myIframe.contentWindow.document;
    // 这里就能正常操作IFrame的DOM了
  } catch (err) {
    console.error('访问失败:', err);
  }
});

2. 内联data:text/html的IFrame跨域问题 #

用data:text/html作为src的IFrame，很多浏览器会默认把它归为“不同源”。解决办法是给IFrame添加sandbox属性，同时开启allow-same-origin权限：

const myIframe = document.createElement('iframe');
// 配置sandbox，允许同源和脚本执行（按需添加其他权限）
myIframe.sandbox = 'allow-same-origin allow-scripts';
myIframe.src = 'data:text/html,<html><body>这是内联内容</body></html>';
document.body.appendChild(myIframe);

myIframe.addEventListener('load', () => {
  const iframeDoc = myIframe.contentWindow.document;
  // 现在可以正常访问了
});

注意：sandbox会限制IFrame的权限，只添加你实际需要的（比如allow-forms允许表单提交），别给过多权限，避免安全风险。

3. 真正跨域场景的通信方案 #

如果IFrame确实是不同源的（比如主页面是localhost:8082，IFrame是其他域名），那直接访问DOM是不可能的——这时候就得用postMessage API来实现跨域通信：

主页面发送消息给IFrame： #

myIframe.addEventListener('load', () => {
  // 第二个参数填IFrame的源，比如"https://目标域名.com"，用*的话允许任意源但不安全
  myIframe.contentWindow.postMessage('要传递的数据', 'https://目标域名.com');
});

// 接收IFrame的回复
window.addEventListener('message', (event) => {
  // 一定要验证消息来源，防止恶意页面的攻击
  if (event.origin === 'https://目标域名.com') {
    console.log('收到IFrame的回复:', event.data);
    // 处理返回的数据
  }
});

IFrame内部接收并回复消息： #

window.addEventListener('message', (event) => {
  // 验证主页面的来源，确保可信
  if (event.origin === 'http://localhost:8082') {
    console.log('收到主页面的消息:', event.data);
    // 处理后回复主页面
    event.source.postMessage('处理完成的结果', event.origin);
  }
});

这里一定要验证event.origin，别直接信任所有消息，不然容易被恶意利用。

内容的提问来源于stack exchange，提问作者Jelle den Burger