- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
背景信息:我们有一个运行在 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 frame和 https://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/
在我的应用程序中播放背景音乐时遇到问题。 首先,我在第一个 Storyboard View Controller 中的 ViewDidLoad 方法中开始播放音乐。即使我从一个页面跳转到另一个页面,它
我想跨行连接数组,然后进行不同的计数。理想情况下,这会起作用: WITH test AS ( SELECT DATE('2018-01-01') as date, 2 as value,
这是一个场景: Repo A 是一个包含大量模块和依赖项的怪异代码。安装起来并不容易。它由其他人维护并托管在 Github 上。 Repo A 包含一个非常有用的模块 X,并且几乎不依赖于 Repo
目前,我在一台服务器上运行了一个应用程序。有一个 crontab 设置,因此根据指定的规则,在某些时间运行任务。 现在,我正在考虑将我的应用程序迁移到 docker 容器中,以便我能够独立运行我的应用
我有一个全局表,我想在两个不同的 Lua 状态之间保持同步。根据我所阅读和理解的内容,唯一的方法似乎是,在我的 C 后端,在状态之间进行表的深层复制(如果表已被修改)。有没有更好的办法 ? 另外,我看
我们目前有一个 asmx webservice,它公开了一个方法来对 Sql 数据库进行各种更新,内部包装在 SqlTransaction 中。 我正在 WCF 中重写此服务,我们希望将现有方法拆分为
我是 Qt 的新手,所以请原谅这个问题的简单性,但我对 Qt 线程有点困惑。假设我有 3 个线程:主要的默认 GUI 线程和我自己创建的 2 个线程(称为 WorkerThread)。我的每个 Wor
我们的产品有一个 Restful API 和一个服务器渲染的应用程序(CMS)。两者共享数据库。两者都是用django编写的 两者所需的字段和模型并不是相互排斥的,有些仅针对 API,有些针对 CMS
我正在实现一个基于角色的访问控制系统,它具有以下数据库表。 groups --------- id (PK) name level resources --------- id (PK) name r
我有三个应用程序,为了便于管理,我希望将它们分开。他们按照建议作为 Plack 服务器运行 here , 代理在 nginx 后面。 我想有一个单独的应用程序来管理登录,并在所有其他应用程序之间共享该
我的主窗口上有一个 UIWebView。我可以通过我的第二个 View Controller 来控制它吗?如果可以的话你能给我举个例子吗? 最佳答案 是的,你可以。 “如何”是一个基本的 Cocoa/
我想制作一个小型应用程序,从连接到串行端口的设备收集数据,并将其通过 LAN 传递到另一个应用程序,后者将其存储在数据库中。 我已经在一台 PC 上的一个应用程序中完成了此操作,因此实际上会将应用程序
从主 AppDomain,我试图调用在不同 AppDomain 中实例化的类型中定义的异步方法。 比如下面的类型MyClass继承自 MarshalByRefObject并在新的 AppDomain
因为 LiveServerTestCase继承自 TransactionTestCase ,默认行为是在每个测试方法结束时删除测试数据。我想用LiveServerTestCase类,但保留方法之间的测
我正在开发我的第一个 WPF/MVVM 应用程序,但我在命令知识方面遇到了限制! 这是我的场景。 我有一个窗口——Customer.xaml。 它包含 2 个用户控件 查看CustomerSearch
这是我的 WPF 应用程序模型的简化版本: Employee +Name:string Client +Name:string +PhoneNumber:string Appointmen
我有一个 mercurial 存储库,它使用子存储库功能(如 .hgsub 文件中定义的)引入依赖项,但我正在努力让它在 TeamCity 中工作。 我启用了 mercurial_keyring 扩展
我正在尝试使用新的 Azure 虚拟网络公共(public)预览版的对等互连功能来加入我在两个不同订阅(即不同租户)上拥有的两个网络。这可能吗?我没有看到任何其他说法,但是当我尝试在 PowerShe
我有 2 个存储库。由于主干代码位于一个 protected 存储库中,因此我进行了 checkout ,然后 checkin 到另一个存储库(因为用户没有第一个 protected 存储库的权限)。
我有一个项目,其调用结构与此类似: 主要项目/应用 我的图书馆代码 别人的库代码 我的图书馆代码 一切都是用 C# 编写的,我可以访问“其他人的库代码”。他们的代码不包含在我的项目中,因为它是开源的而
我是一名优秀的程序员,十分优秀!