跨域 PostMessage 方法失败答案

【问题标题】：Cross-Origin PostMessage method fails跨域 PostMessage 方法失败
【发布时间】：2014-01-15 06:00:44
【问题描述】：

（我翻遍了所有地方，发现了许多修复和文档，但我发布这个是因为它们都没有为我工作。）

我有 2 个 MVC4 站点正在开发中。 SSO（HTTPS）和视频（HTTP）
（现在都是本地主机）

视频加载一个页面，其中 IFRAME 指向 SSO 上的页面。它正确加载页面。

SSO 页面有这个 javascript：

window.onmessage = function (e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

视频页面有这个代码：

<iframe frameborder="0" width="100px" height="100px" id="LbpSsoFrame" src="https://localhost:44301/Sso/InFrame"></iframe>

页面加载完成后，我使用chrome的控制台（Chrome V32.0.1700.41 m Aura）调用如下代码行：

LbpSsoFrame.contentWindow.postMessage('hello', '*');

我收到此错误：

code: 18
message: "Blocked a frame with origin "http://localhost:46086" from accessing a cross-origin frame."
name: "SecurityError"
stack: "Error: Blocked a frame with origin "http://localhost:46086" from accessing a cross-origin frame.↵    at <anonymous>:2:12↵    at Object.InjectedScript._evaluateOn (<anonymous>:603:39)↵    at Object.InjectedScript._evaluateAndWrap (<anonymous>:562:52)↵    at Object.InjectedScript.evaluate (<anonymous>:481:21)"

我站在一堵砖墙前，希望其他人能知道我做错了什么或还需要做什么。谢谢。

【问题讨论】：

我会花一点时间来表达我正在尝试设置 SSO。我最初试图使用 JQuery Posts 到另一个站点，带有 CORS 标头，这适用于一般通信，但浏览器不会存储来自 CORS 调用的 Cookie。 - 现在我正在尝试使用 IFrame 和 PostMessage 组合来发送可以使用 iframe 页面存储/检查 cookie 的传出请求，然后将其他数据包信息返回到可用于在服务上识别用户的站点请求。

标签： javascript asp.net-mvc http cross-domain

【解决方案1】：

Yahoo，我发现了问题：我不应该将 LbpSsoFrame 作为对象调用。我不确定为什么。

这是有效的代码：

document.getElementById('LbpSsoFrame').contentWindow.postMessage('hello', '*');

这就是我所拥有的：

LbpSsoFrame.contentWindow.postMessage('hello', '*');

修复了那条线，我收到了消息。

我本来以为

document.getElementById('LbpSsoFrame')

和

LbpSsoFrame

对同一事物有不同的称呼。谁能向我解释一下有什么区别？两者都可以调用 post 消息，但直接使用对象时会收到 HTTPS/HTTP 警告或其他警告。

现在可以了，但我还是有点不知道为什么。

【讨论】：

我确定某些浏览器需要 document.getElementById，因为只有某些浏览器将标签 ID 公开为立即可用的变量。
我可以确认这是问题所在。问题是除了来自其他来源的contentWindow 的postMessage 之外，您无法真正访问任何东西。我的问题是我首先通过承诺返回contentWindow，然后调用postMessage。但是从 promise 返回 contentWindow 会使其检查其他属性，然后抛出异常。