gpt4 book ai didi

javascript - 将应用程序移动到子域时出现跨域安全错误 (2018)

转载 作者:行者123 更新时间:2023-11-28 02:26:32 25 4
gpt4 key购买 nike

背景信息:我们有一个运行在 https://system.example.com 上的平台.该平台由 10 个独立的 Web 应用程序组成(全部用 PHP 和 JS 编写)。每个应用程序在历史上都位于同一子域的子目录中:

  • https://system.example.com/app1/
  • https://system.example.com/app2/
  • ...
  • https://system.example.com/app10/

我们正在重建其中一个应用程序,app2 , 并决定将其托管在一个新的独立子域 https://app2.example.com 上.

app2 的一部分应用程序使用 JavaScript 打开 app10 的弹出窗口.此弹出窗口中的大多数功能都按预期工作。但是,当尝试在弹出窗口中使用“保存”按钮时,我的浏览器控制台显示:

Uncaught DOMException: Blocked a frame with origin "https://app2.example.com" from accessing a cross-origin frame. at https://system.example.com/app10/manage.php:1:334

我都读过 SecurityError: Blocked a frame with origin from accessing a cross-origin framehttps://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage但仍不清楚如何解决此问题。

我的代码和流程如下:

弹出窗口是从https://app2.example.com打开的通过一个带有 onclick 的按钮事件处理程序:

<button onclick="postToPopUp('https://system.example.com/app10/manage.php', 'fileManage', 'width=800px,height=600px', ['f_id', '123'], 'app2', 'filesCallbackManage')">Open app10</button>

postToPopup()函数用于传递来自 app2 的 POST 数据进入https://system.example.com/app10/manage.php基于 Javascript window.open pass values using POST - 这很好用。

当我单击弹出窗口中的“保存”按钮时出现问题,该按钮在弹出窗口中呈现以下标记:

<!doctype HTML><html><head><title>upload</title>
<script type="text/javascript" language="javascript" charset="utf-8">
var fileObject = {"files":{"0":{"f_id":"1784","f_title":"test07.pdf"},"f_id":123}};
window.opener.filesCallbackManage(fileObject);
window.close();
</script><body></body></html>

当一切都在同一个子域下时,它最初所做的被称为 js 函数 filesCallbackManage()位于 https://system.example.com/app2 的代码中.函数本身传递了一个对象,fileObject ,它更新了内部用户界面的各个部分 app2 .由于 window.close();,单击“保存”按钮后弹出窗口关闭

尽管我读过有关使用 postMessage 的内容我不明白这是怎么回事,或者这是否是解决我的问题的正确方法?数据是从子域 https://app2.example.com 发布的至 https://system.example.com/app10正确。问题是 filesCallbackManage()不会因为交叉来源限制而开火。在我的代码中 https://app2.example.com我有一个简单的语句来查看它是否正在触发:

function filesCallbackManage(data)
{
console.log('filesCallbackManage has fired');
}

由于我遇到的问题,这永远不会触发。我收到前面提到的控制台错误和一个空白的弹出窗口(从技术上讲这是正确的,因为上面标记中的 <body> 标记中没有任何内容)但是窗口没有关闭并且没有触发回调。

Mozilla 网站上给出的示例不够广泛,无法理解它如何适应此类场景。请问有人可以详细说明吗?此外,链接的 Stack Overflow 帖子已有 4 年历史,因此我想确保我发布的所有内容都是安全且最新的。

最佳答案

The postToPopup() function is used to pass POST data

跨源提交表单是可以的。所以你可以这样做。

The problem occurs when I click a "Save" button inside the popup

您正在尝试跨源访问窗口的 DOM。这是被禁止的。

Although I've read about using postMessage I don't understand how this fits in or whether this is even the correct solution to my problem?

postMessage 尽可能接近跨源访问窗口的 DOM。

你不能这样做。

var fileObject = {"files":{"0":{"f_id":"1784","f_title":"test07.pdf"},"f_id":123}};
window.opener.filesCallbackManage(fileObject);

相反,您必须发送消息:

window.opener.postMessage(fileObject, "https://system.example.com");

并有监听它的代码:

addEventListener("message", receiveMessage);

function receiveMessage(event) {
if (event.origin !== "http://app2.example.com") { return false; }
filesCallbackManage(event.data);
}

关于javascript - 将应用程序移动到子域时出现跨域安全错误 (2018),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53722458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com