草庐IT

javascript - 拦截iframe消息嵌套iframe，跨域

coder 2024-12-24 原文

我有一个来自 domain1.com 的网页，那里有一个 domain2.com 的 iframe，然后我在 domain3.com 的 domain2.com 中有另一个 iframe

我想在 domain2.com 中拦截来自 domain3.com 的消息，如果 domain2.com 不在 domain1.com 中，则消息会被正确接收，但如果我在 domain1.com 中有 domain2.com，则来自domain3.com 由 domain1.com 而不是 domain2.com 接收。有没有办法在 domain2.com 中捕获这些消息？

结构是这样的

domain1.com 有内部 iframe src="domain2.com" domain2.com 有内部 iframe src="domain3.com"

当我直接访问 domain2.com 时，它会捕获 domain3.com 的消息，当我访问 domain1.com 时，从 domain3.com 发送的消息将由 domain1.com 而不是 domain2.com 接收

最佳答案

我试图重新创建您的 iframe hell 。希望这就是您要找的。这应该涵盖您上面列出的场景。如果我误解了什么，请告诉我。

我还创建了一个 Plunker

index.html(域 1)

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 1

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain2.html" id="iframe" style="display:block;height:120px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain1: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain1`, '*');
      return false;
    };
  </script>

</body>
</html>

domain2.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  domain 2

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <iframe src="domain3.html" id="iframe" style="display:block;height:60px"></iframe>

  <script>
    window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain2: Received ${message} from ${domain}`);
    });


    form.onsubmit = function() {
      iframe.contentWindow.postMessage(`${this.message.value}|domain2`, '*');
      return false;
    };
  </script>

</body>
</html>

domain3.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>

  domain 3

  <form id="form">
    <input type="text" placeholder="Enter message" name="message">
    <input type="submit" value="Click to send">
  </form>

  <script>
  window.addEventListener('message', function(event){
      const [message, domain] = event.data.split('|');
      alert(`domain3: Received ${message} from ${domain}`);
    });

    form.onsubmit = function() {
      window.parent.postMessage(`${this.message.value}|domain3`, '*');
      return false;
    };
  </script>

</body>
</html>

关于javascript - 拦截iframe消息嵌套iframe，跨域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52058760/

iframejavascriptdomain34messagecross-domain

有关javascript - 拦截iframe消息嵌套iframe，跨域的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  3. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  4. Ruby——嵌套类和子类是一回事吗？ - 2

    下面例子中的Nested和Child有什么区别？是否只是同一事物的不同语法？classParentclassNested...endendclassChild 最佳答案 不，它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby​​解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc

  5. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  6. ruby-on-rails - 使用回形针的嵌套形式 - 2

    我有一个名为posts的模型，它有很多附件。附件模型使用回形针。我制作了一个用于创建附件的独立模型，效果很好，这是此处说明的View(https://github.com/thoughtbot/paperclip):@attachment,:html=>{:multipart=>true}do|form|%>posts中的嵌套表单如下所示:prohibitedthispostfrombeingsaved:@attachment,:html=>{:multipart=>true}do|at_form|%>附件记录已创建，但它是空的。文件未上传。同时，帖子已成功创建...有什么想法吗？

  7. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  8. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  9. Ruby - 如何将消息长度表示为 2 个二进制字节 - 2

    我正在使用Ruby，我正在与一个网络端点通信，该端点在发送消息本身之前需要格式化“header”。header中的第一个字段必须是消息长度，它被定义为网络字节顺序中的2二进制字节消息长度。比如我的消息长度是1024。如何将1024表示为二进制双字节？ 最佳答案 Ruby(以及Perl和Python等)中字节整理的标准工具是pack和unpack。ruby的packisinArray.您的长度应该是两个字节长，并且按网络字节顺序排列，这听起来像是n格式说明符的工作:n|Integer|16-bitunsigned,network(bi

  10. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

随机推荐