SecurityError:阻止具有原点的帧访问跨原点帧

如果地址的以下部分中至少有一部分未保留，则认为来源不同：

协议：//主机名：端口/…

如果要访问帧，则协议、主机名和端口必须与域相同

^{注意：众所周知，Internet Explorer并不严格遵守此规则，有关详细信息，请参见此处。}

例子

下面是从http://www.example.com/home/index.html

URL结果
http://www.example.com/home/other.html       -&燃气轮机；成功
http://www.example.com/dir/inner/another.php -&燃气轮机；成功
http://www.example.com:80                    -&燃气轮机；成功（HTTP的默认端口）
http://www.example.com:2251                  -&燃气轮机；失败：不同的端口
http://data.example.com/dir/other.html       -&燃气轮机；失败：不同的主机名
https://www.example.com/home/index.html:80   -&燃气轮机；失败：不同的协议
ftp://www.example.com:21                     -&燃气轮机；失败：不同的协议&amp；港口城市
https://google.com/search?q=james+债券->；故障：不同的协议、端口和；主机名

变通办法

即使同源策略阻止脚本访问具有不同来源的站点的内容，如果您拥有这两个页面，您也可以使用window.postMessage及其相关messageevent在这两个页面之间发送消息，如下所示：

• 在主页中：

  const frame=document.getElementById（'your-frame-id'）；
  frame.contentWindow.postMessage（/*此处的任何变量或对象*/，'http://your-second-site.com');
  

  postMessage（）的第二个参数可以是'*'，以指示对目标的来源没有偏好。在可能的情况下，应始终提供目标来源，以避免泄露您发送到任何其他站点的数据

• 在您的中&lt；iframe&gt（包含在主页中）：

  window.addEventListener（'message'，event=&gt{
//重要提示：检查数据的来源！
if（event.origin.startsWith（'http://your-first-site.com')) {
//数据是从您的站点发送的。
//使用postMessage发送的数据存储在event.Data中：
console.log（事件数据）；
}否则{
//数据不是从您的站点发送的！
//小心！不要用它。这是另一个分支
//为了清楚起见，你通常不需要它。
回来
}
});


此方法可以在两个方向上应用，也可以在主页中创建侦听器，并从框架接收响应。同样的逻辑也可以在弹出窗口和主页生成的任何新窗口（例如使用window.open（））中实现，没有任何区别

在浏览器中禁用同源策略