文件的同源策略 - iFrame 的问题答案

【问题标题】：Same-origin policy for files - problem with iFrames文件的同源策略 - iFrame 的问题
【发布时间】：2019-10-07 10:33:12
【问题描述】：

我目前正在为文件的同源政策而苦苦挣扎：我的一个完全基于文件的项目已经工作了多年，直到政策发生变化。该项目由 index.html 组成：

<html>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <iframe id="frame1" src="frame1.html" width="220" height="450"></iframe> 
          </td>
          <td>
            <iframe id="frame2" src="frame2.html" width="850" height="450"></iframe>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

还有两个包含为 iframe 的文件（frame1.html 和 frame2.html）。在 frame1.html 和 frame2.html 中，我执行以下 javascript 调用：

parentWindow = window.parent;
var frames = parentWindow.frames;

为了通过

访问另一帧的数据

frames[x].

后跟所需的属性。

根据https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Same-origin_policy_for_file:_URIs，它应该可以工作，因为两个框架都将 index.html 作为它们的祖先，但是（例如在 Firefox 中）我收到了这个错误：

SecurityError: Permission denied to access property on cross-origin object

谁能帮忙？我可能必须删除 iframe 吗？任何提示表示赞赏！

提前非常感谢，最好的

亚历克斯

【问题讨论】：

frame1.html 和 frame2.html 是否与父窗口文件在同一个域中？
它们曾经位于 ./subframes 文件夹中。将它们全部放在同一个主目录中会导致同样的问题。

标签： javascript html security

【解决方案1】：

任何与 direkt iframe-access 相关的操作都失败了，但是，我想出了一个适合我的替代方案：我使用父 iframe 作为中继，而不是 iframe 之间的直接通信。在这种情况下，我通过

发送消息

window.top.postMessage(['destinationIframe','desiredFunction',data1,..,dataX],'*');

从 iframe zu 父级，将它们转发到目标 iframe。父级和 iframe 的消息接收是通过监听器实现的：


window.onmessage = function(e){
    if (e.data[1] == 'xyz') {
       // do something
    }
};

【讨论】：