从沙箱 iFrame 到主窗口的 PostMessage,origin 始终为 null

2024-01-16

关于 javascript postMessage 事件的事件起源,我不明白一些事情。

这是我的主页:

<html>
<body>

<h1>Test</h1>
<h2>Outside</h2>

<iframe src="iframe-include.html" 
    width="100%" height="100" 
    sandbox="allow-scripts"></iframe>

<script type="text/javascript">
window.addEventListener('message', function (event) {
    console.log(event);
}, false);
</script>

</body>
</html>

和我的 iFrame 内容

<html>
<body>

<h3>Inside</h3>

<script type="text/javascript">
var counter = 1,
    domain = window.location.protocol + '//' + window.location.host,
    send = function () {
        window.setTimeout(function () {
            console.log('iframe says:', domain);
            window.parent.postMessage(counter, domain);
            counter += 1;
            send();
        }, 3000);
    };

send();
</script>

</body>
</html>

查看控制台,事件对象的 origin 属性始终为 null,即使 iFrame 中的域变量是正确的。

我的控制台说:

iframe-include.html:11 iframe says: http://127.0.0.1:8181
iframe.html:11 MessageEvent {isTrusted: true, data: 2, origin: "null", lastEventId: "", source: Window…}

在每个文档中,它都说检查“消息”事件侦听器内的 event.origin 非常重要。但如果它总是为空怎么办?

谢谢您的帮助


正如所指出的here https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/,在这种情况下,有一种非常好的方法可以确定发件人,而无需给出allow-same-origin允许:

  // Sandboxed iframes which lack the 'allow-same-origin'
  // header have "null" rather than a valid origin. This means you still
  // have to be careful about accepting data via the messaging API you
  // create. Check that source, and validate those inputs!
  var frame = document.getElementById('sandboxed');
  if (e.origin === "null" && e.source === frame.contentWindow)
    alert('Result: ' + e.data);

请注意,原点不是null, it's "null".

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从沙箱 iFrame 到主窗口的 PostMessage,origin 始终为 null 的相关文章

  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 使用 CSS 等高列

    我想对我的 CSS 表使用百分比 不幸的是 它对我不起作用 这段代码有什么问题 我应该使用 flexbox 而不是 table 吗 我想使用表格 因为我想要相同高度的列 ul list style none margin 0 display
  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 删除数组中所有对象的属性

    我想删除bad数组中每个对象的属性 有没有比使用更好的方法for循环并从每个对象中删除它 var array bad something good something bad something good something for var
  • GWT - 让 CellTable 单元格使用 HTML?

    我有一个 CellTable 我想将 HTML 代码放入单元格中 以下代码不起作用 空格已从输出中删除 TextColumn
  • 包含括号的变量会导致问题[重复]

    这个问题在这里已经有答案了 简单的事情 当单击按钮并将其写入文本字段时 我读取选择框的值 选择框
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 如何应对 WebStorm 中大量未解决的变量警告?

    我有一个从服务器获取数据的函数 function getData data console log data someVar 网络风暴说someVar是一个未解决的变量 我怎样才能摆脱这样的警告 我看到几个选项 禁止 IDE 设置中的警告
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 父级 div 未扩展到子级的高度

    正如你将看到的 我有一个div innerPageWrapper 包围包含内容的 div innerPageWrapper在视觉上也确实充当布局中的半透明边框 我的问题是 innerPageWrapper不会扩展以容纳内部的子元素 更不用说
  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • 编辑时可以在文本框控件内使用 Angular 的管道格式化程序吗?

    我已经声明了一种将大数字分成三位数组的格式 并像这样经常使用它 div Huge number i am huge make threesome div 现在 有一个对相应功能的请求 但在像这样的输入控件中实现
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • 如何在ggplot2中通过点绘制45度线

    我有一个对数刻度的散点图 其中垂直和水平参考线穿过 1 1 下面的虚线 我想添加与虚线参考线成 45 度角的额外参考线 以便它们恰好平分虚线参考线创建的四个 部分 例如 下面我刚刚通过眼睛添加的较细实线 我怎样才能用 ggplot 做到这一
  • 使用任何 Android 设计支持库元素时出错

    从设计支持库中扩充任何内容时出错 xml
  • 如何从 Ruby on Rails 解析 json 数据或(json 代码)

    我有一个 Ruby on Rails 源代码 现在我想解析数据并发送数据 在我的代码中 它将从用户获取名称并显示它 如何解析 ROR 中的数据 这是我的controller rb代码 def index hotels Hotel all r
  • shell 文本编辑器如何工作?

    我对编程相当陌生 但我想知道 shell 文本编辑器 如 vim emacs nano 等 如何能够控制命令行窗口 我主要是一名 Windows 程序员 所以也许 nix 上的情况有所不同 据我所知 只能将文本打印到控制台并要求输入 文本编
  • 如何扫描 pandas 数据帧中所有大于某值的值并返回与该值对应的行号和列号?

    我有一个问题 我有如下所示的巨大数据集 相关系数矩阵 A B C D E A 1 0 413454352 0 615350574 0 479720098 0 34261232 B 0 413454352 1 0 568124328 0 31
  • 提交-拉-合并-推还是拉-合并-提交-推?

    我们几周前开始使用 Mercurial 大多数开发人员都遵循以下工作流程 致力于某项功能 commit m 致力于功能 ABC pull u If branch merge 提交 m 合并 push 今天 我们的一位开发人员建议我们这样做
  • Keras ImageDataGenerator 流程方法中的 save_to_dir 遇到问题

    我想保存 ImageDataGenerator 正在创建的增强图像 以便以后使用它们 当我执行以下代码时 它运行正常 但我希望保存的图像没有显示在我尝试保存它们的目录中 gen image ImageDataGenerator rotati
  • Future 任务完成后 Java 进程没有退出

    这是我使用 Future 的代码片段 import java util concurrent import java util public class FutureDemo public FutureDemo Future Executo
  • 更改或删除 App Store 中的开发者名称

    我已经为我的客户创建了一个应用程序 我们已经用我的帐户发布了该应用程序 现在 他们想将开发商名称更改为他们公司的名称 有没有办法更改开发商名称 我可以将我的应用程序移至他们的企业帐户 以便开发者名称更改为他们的企业名称吗 是的 自 WWDC
  • 阅读 Fetch Promise 的正文

    我有以下用于上传到 Google Cloud 存储的快速端点 它工作得很好 来自 google api 的响应给了我一个唯一的文件名 我想将其传回我的前端 app post upload req res gt var form new fo
  • Spring Boot 与 POM 打包聚合器

    是否可以使用 Spring Boots Maven 插件命令spring boot run当项目的父POM因其子项目而使用打包模式POM时 我有一个多模块 Maven 项目 其中有一个 主 POM 它又是 Spring Boot 父模块的子
  • iPhone内存警告级别=2

    我有一个应用程序 可以将大量视图堆叠在一起 在某些时候 我收到内存警告级别 2 这是预期的 问题是 当我运行 Instruments 时 我没有任何内存泄漏 并且该应用程序占用了大约 9 10MB 的空间 这不是that我会说很多吗 问题是
  • 如何根据属性查找两个数组列表之间的差异?

    我有两个数组列表 每个都有 Employee 类型的对象列表 Employee 类如下所示 public class Employee Employee String firstname String lastname String emp
  • 防止 Thread.CurrentPrincipal 跨应用程序域传播

    有人可以阻止当前线程的 IPrincipal 在应用程序域边界上传播吗 我无法控制分配给线程的 IPrincipal 但我可以控制创建应用程序域 我想要这样做的原因是为了防止在主要对象类型程序集在其他域中不可用时发生序列化错误 Edit E
  • 如何为 1x1 Android 小部件创建清晰的背景图像?

    我正在创建一个 1x1 小部件 无论我尝试什么 我都无法让背景图像看起来漂亮且清晰 我已经阅读了几乎所有我能找到的资源 但我仍然无法获胜 我正在为 HTC Desire Nexus 1 进行设计 希望有人告诉我在 Photoshop 中创建
  • 在 Node.JS 中引用相对于应用程序根目录的文件的正确方法

    我有一个在 AWS EC2 的 Linux 上运行的 Node JS 应用程序 它使用 fs 模块读取 HTML 模板文件 这是应用程序的当前结构 server js templates my template html services
  • Angular 6 迁移 -.angular-cli.json 到 angular.json

    我已经将我的项目升级到 Angular 6 除了转换之外一切都很顺利 angular cli json文件 从我遵循的指南来看 据说这会自动转换它 npm install g angular cli npm 安装 angular cli n
  • 构建 SparkSession

    我有在齐柏林飞艇担任翻译的火花 我使用的是Spark2 0 我构建了一个Session Create 一般来说 你不应该初始化SparkSession nor SparkContext在齐柏林飞艇 Zeppelin 笔记本配置为为您创建会话
  • Haskell 中 (^) 的奇怪行为

    为什么 GHCi 下面给出了错误的答案 GHCi gt 20 24373193905347 12 2 20 24373193905347 24 4 503599627370496e15 Python3 gt gt gt 20 2437319
  • 从沙箱 iFrame 到主窗口的 PostMessage,origin 始终为 null

    关于 javascript postMessage 事件的事件起源 我不明白一些事情 这是我的主页 h1 Test h1 h2 Outside h2 和我的 i