未捕获的 DOMException：阻止具有源“http://localhost:3000”的框架访问跨域框架答案

【问题标题】：Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame未捕获的 DOMException：阻止具有源“http://localhost:3000”的框架访问跨域框架
【发布时间】：2018-12-14 00:33:52
【问题描述】：

我正在尝试更改 iframe 中的样式，我为 iframe 提供了 sandbox="allow-same-origin allow-scripts" 属性，但我仍然收到“Blocked a frame with origin”还有什么问题？

<iframe
  height="100%"
  sandbox="allow-same-origin allow-scripts"
  src={formLink}
  onLoad={event => {
    console.log('event', event, event.target);
    const iframeEle = event.target;
    const iframeEleDocument = (iframeEle.contentWindow || iframeEle.contentDocument);
    console.log('iframeEleDocument', iframeEleDocument);
    debugger;
    iframeEleDocument.body.style.backgroundColor = "red";
  }}
/>

【问题讨论】：

不同的端口？
如果端口不同，我该如何处理？
postMessage 因为不同的端口被视为不同的域。
stackoverflow.com/questions/31184505/…
那你就不能通过跨域js修改它的内容了

标签： javascript html sandbox

【解决方案1】：

我认为postMessage 是这样做的安全方式。你可以使用postMessage在你的iframe中设置一个事件函数，你可以在那里做你想做的事情。

GitHub上有很多关于postMessage的货，你可以很方便的做。

【讨论】：