在Chrome扩展程序中,如何将跨域消息从父内容脚本发送到特定子iframe中的内容脚本

我正在开发带有清单的Chrome扩展程序,该清单目前可以访问所有主机。后台脚本将内容脚本注入所有框架。加载DOM后,首页/框架中的内容脚本开始遍历DOM树。当步行者遇到iframe时,它需要向该iframe窗口关联的特定内容脚本发送消息(可能是跨源)以开始其工作,并在此消息中包括一些序列化数据。父窗口将暂停执行,并等待子窗口完成遍历,并向其发送一条消息,告知其已完成序列化数据。父母然后继续工作。我尝试了两种方法来解决此问题:

  1. frameElement.contentWindow.postMessage:这在大多数情况下有效,但并非总是如此。有时,与iframe窗口关联的内容脚本消息事件侦听器从不接收该消息。我无法确定原因,但我认为是在我的听众打电话之前已附加了听众event.stopImmediatePropagation()例如,在yahoo主页(https://www.yahoo.com)上,将消息发布到与iframe源https://s.yimg.com/rq/darla/2-9-相关联的我的内容脚本时9 / html / r-sf.html,该消息永远不会收到。这是与广告相关的iframe。也许阻止消息是有意的。发布消息时没有错误,并且我使用“ *”的targetOrigin。
  2. chrome.runtime.sendMessage:我可以向后台页面发送消息,但无法弄清楚如何告诉后台页面将消息中继到哪个帧。父窗口内容脚本不知道与DOM遍历中遇到的子框架元素相关联的chrome扩展frameId。因此,它无法告诉后台页面如何定向消息。

对于第2点,我尝试了两种在stackoverflow上发现的技术:

  1. 使用此问题中描述的概念:在父窗口中,确定iframe在window.frames数组中的位置,然后使用该索引将消息发布到后台页面。后台页面将消息发布到消息数据中具有所需索引的所有帧。仅在window.parent.frames数组中找到其窗口对象位置的iframe会与从消息中接收到的索引匹配,从而继续进行遍历。这可以正常工作,但是window.frames在异步消息传递过程中容易受到阵列中更改的影响(如果在发送消息后删除iframe,则索引值可能不再与所需的帧匹配)。
  2. frameElement.name在父窗口中使用而不是第1点的索引值使用相同的消息传递技术,将名称发送给子iframe以与其window.name进行比较我相信window.nameframeElement.name创建iframe元素时就可以得到它的价值但是,由于我不控制框架元素的创建,因此name属性通常是一个空字符串,不能依赖于将iframe元素唯一地匹配到它们的窗口。

我有办法可靠地将消息发送到与在DOM树中行走时找到的iframe元素相关联的内容脚本吗?

罗伯·W

chrome.runtime.sendMessage从内容脚本调用时,chrome.runtime.onMessage侦听器的第二个参数(“发送者”)包括属性urlframeId您可以(从一个扩展页面,例如背景页)将消息发送到特定的框架使用chrome.tabs.sendMessage与给定的frameId

如果您想随时了解所有框架的列表(及其框架ID),请使用chrome.webNavigation.getAllFrames如果这样做,则可以在选项卡中构造框架树,然后将该信息发送到所有框架以进行进一步处理。

可靠postMessage/onMessage

frameElement.contentWindow.postMessage:这在大多数情况下有效,但并非总是如此。有时,与iframe窗口关联的内容脚本消息事件侦听器从不接收该消息。我无法确认原因,但我认为是在我的听众打电话之前已附加了听众event.stopImmediatePropagation()

可以通过在以下位置运行脚本"run_at":"document_start"并立即注册message事件侦听器来对此进行反击然后,您的处理程序将始终被首先调用,并且页面无法通过取消它event.stopImmediatePropagation()但是,请勿盲目地信任其他框架中的信息,并始终验证消息(例如,通过后台页面与其他框架进行通信)。

结合两种方法

第一种方法提供了一种在框架之间交换数据的安全方法,但是没有提供将框架链接到特定DOM元素的通用方法。
第二种方法允许您定位特定的(i)frame元素,但是任何网页都可以这样做,因此该方法本身并不可靠。通过将两者结合起来,您可以获得链接到DOM元素的安全通信通道。

这是一个应用上述方法在帧A和B之间进行通信的基本示例:

  1. A中的内容脚本:

    1. 将消息发送到后台页面(例如,包含帧B的索引的消息)。
  2. 背景页面:

    1. 接收来自A的消息。
    2. 生成随机随机数,例如Rcrypto.getRandomValues)。
    3. 存储从R的映射frameId(以及可选的包含在来自A的消息中的其他信息)。
    4. 使用此随机值调用响应回调。
  3. A中的内容脚本:

    1. 从后台页面接收R。
    2. 呼叫postMessage在框架B和通- [R
  4. B中的内容脚本:

    1. 从A接收R。
    2. 向后台页面发送一条消息以检索frameId(以及从A检索到的其他信息)。

注意:对于坚如磐石的应用程序,您需要考虑以下事实:在所有这些步骤中都删除了框架。如果您忽略了此过程的异步性质,则可能会使应用程序处于不一致状态。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chrome扩展程序将Background.js中的消息发送到内容脚本

来自分类Dev

Chrome扩展程序将消息从iFrame发送到事件页面,然后再发送到内容脚本

来自分类Dev

Chrome扩展程序错误,尝试将数组从内容脚本发送到弹出脚本

来自分类Dev

在Chrome扩展程序的背景页面的onClick事件上将消息发送到内容脚本

来自分类Dev

无法使用Chrome扩展程序中的postMessage从父窗口将数据发送到iframe

来自分类Dev

Chrome扩展程序创建新标签页,并将消息从popup.js发送到新标签页的内容脚本

来自分类Dev

Chome扩展:将chrome.storage数据从后台脚本发送到弹出窗口/内容脚本

来自分类Dev

Chome扩展:将chrome.storage数据从后台脚本发送到弹出窗口/内容脚本

来自分类Dev

将chrome.storage中设置的值从选项页面发送到内容脚本

来自分类Dev

从Chrome扩展程序中的内容脚本传递消息

来自分类Dev

从Chrome扩展程序中的内容脚本传递消息

来自分类Dev

无法在Chrome扩展程序中从后台页面向内容脚本发送消息

来自分类Dev

Delphi和Indy-如何将IdTCPServer中的内容发送到特定的IdTCPClient

来自分类Dev

在Chrome扩展程序中停止内容脚本

来自分类Dev

如何自动测试Chrome扩展程序中的内容脚本?

来自分类Dev

如何取消Chrome扩展程序内容脚本中的事件绑定?

来自分类Dev

无法在Chrome扩展程序中使用postMessage从父窗口将数据发送到iframe

来自分类Dev

Chrome扩展程序中内容脚本和弹出脚本之间的消息传递

来自分类Dev

如何将JQuery ui加载到chrome扩展内容脚本中?

来自分类Dev

如何将 php 脚本中的 SQL 数据增益发送到 python 脚本?

来自分类Dev

如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

来自分类Dev

内容脚本中的chrome.runtime.sendMessage不发送消息

来自分类Dev

将sqlresult从后台发送到内容脚本

来自分类Dev

Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

来自分类Dev

Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

来自分类Dev

如何将文本区域的内容发送到Typescript / Javascript / HTML中的函数

来自分类Dev

如何将json文件中的内容发送到前端?

来自分类Dev

如何将消息发送到Node.js中的特定客户端

来自分类Dev

Chrome扩展程序不显示内容脚本中的数据

Related 相关文章

  1. 1

    Chrome扩展程序将Background.js中的消息发送到内容脚本

  2. 2

    Chrome扩展程序将消息从iFrame发送到事件页面,然后再发送到内容脚本

  3. 3

    Chrome扩展程序错误,尝试将数组从内容脚本发送到弹出脚本

  4. 4

    在Chrome扩展程序的背景页面的onClick事件上将消息发送到内容脚本

  5. 5

    无法使用Chrome扩展程序中的postMessage从父窗口将数据发送到iframe

  6. 6

    Chrome扩展程序创建新标签页,并将消息从popup.js发送到新标签页的内容脚本

  7. 7

    Chome扩展:将chrome.storage数据从后台脚本发送到弹出窗口/内容脚本

  8. 8

    Chome扩展:将chrome.storage数据从后台脚本发送到弹出窗口/内容脚本

  9. 9

    将chrome.storage中设置的值从选项页面发送到内容脚本

  10. 10

    从Chrome扩展程序中的内容脚本传递消息

  11. 11

    从Chrome扩展程序中的内容脚本传递消息

  12. 12

    无法在Chrome扩展程序中从后台页面向内容脚本发送消息

  13. 13

    Delphi和Indy-如何将IdTCPServer中的内容发送到特定的IdTCPClient

  14. 14

    在Chrome扩展程序中停止内容脚本

  15. 15

    如何自动测试Chrome扩展程序中的内容脚本?

  16. 16

    如何取消Chrome扩展程序内容脚本中的事件绑定?

  17. 17

    无法在Chrome扩展程序中使用postMessage从父窗口将数据发送到iframe

  18. 18

    Chrome扩展程序中内容脚本和弹出脚本之间的消息传递

  19. 19

    如何将JQuery ui加载到chrome扩展内容脚本中?

  20. 20

    如何将 php 脚本中的 SQL 数据增益发送到 python 脚本?

  21. 21

    如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

  22. 22

    内容脚本中的chrome.runtime.sendMessage不发送消息

  23. 23

    将sqlresult从后台发送到内容脚本

  24. 24

    Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

  25. 25

    Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

  26. 26

    如何将文本区域的内容发送到Typescript / Javascript / HTML中的函数

  27. 27

    如何将json文件中的内容发送到前端?

  28. 28

    如何将消息发送到Node.js中的特定客户端

  29. 29

    Chrome扩展程序不显示内容脚本中的数据

热门标签

归档