Firefox WebExtension - 如何获取和修改跨域 iframe 的内容

Posted 2023-05-09

【中文标题】Firefox WebExtension - 如何获取和修改跨域 iframe 的内容

【英文标题】：Firefox WebExtension - How to obtain and modify content of cross domain iframe

【发布时间】：2017-08-15 13:27:00

【问题描述】：

我想知道如何在 Firefox WebExtension 中使用 javascript 访问和修改跨域 iframe 的内容。我了解普通 JavaScript 的局限性，并且修改跨域 iframe 将是一个 XSS 漏洞，但我相信在我找不到的 WebExtension 中有一些方法可以做到这一点。我相信这是因为旧版扩展清单具有允许在权限部分中允许跨域内容的选项。

查看旧版 FireFox 扩展程序的旧代码时，某些网站似乎有以下方式的跨域内容选项。尽管对于新的 FireFox WebExtension，这不是文档中列出的功能。

"cross-domain-content": ["https://www.example.com"]

这是我的manifest.json 文件。

  "manifest_version": 2,
  "name": "Test Extension",
  "version": "1.0",
  "content_scripts": [
    
      "matches": ["*://*/*"],
      "all_frames": true,
      "js": [
        "js/main.js"
      ]
    
  ],
  "permissions": [
    "*://*/*",
    "<all_urls>",
  ]

这是我的main.js 文件。

// Code is being run within an iframe ("all_frames": true)
if (window != window.top) 
  // Attempt to log the source of the parent iframe
  // If cross domain, met throws - Error: Permission denied to access property "frameElement"
  console.log(window.parent.frameElement.src);

正如您在 main.js 文件中看到的那样，当尝试打印父 iframe 的源时，会引发如下错误。

错误：访问属性“frameElement”的权限被拒绝

我想知道如何允许 FireFox WebExtension 访问和修改跨域 iframe 的内容。我不确定这是没有在清单中放置正确权限的问题，还是我必须使用 WebExtension API 之类的，我只是找不到任何东西。

此外，如果有人可以参考或提供一些以这种方式修改 iframe 内容的示例，将不胜感激。

【问题讨论】：

我已经这样做了，您可以通过我为清单文件提供的代码看到这一点。这不允许我修改跨域 iframe，它只在主选项卡中运行我的 JavaScript 文件以及其中的任何 iframe。

你有没有看我的帖子？我确实按照您所描述的内容给出了我的代码示例。这就是我的问题的全部基础，我想知道为什么我不能以这种方式访问​​内容。

好吧，我的错，我其实没有仔细阅读。所以问题不在于你不能访问内部 iframe，而是你不能从这个内部 iframe 访问父窗口。

所以沙箱allow-top-navigation参数似乎对我们所做的跨域框架不起作用，但您仍然可以使用window.parent.postMessage在iframe和主文档之间进行通信。您在框架中注入的脚本与框架文档具有相同的限制。

感谢您提到我不知道存在且没有任何文档记录的 all_frames 选项！这允许我的 content.js 在每个框架中加载，这样每个框架都可以管理自己的 iframe 或***文档，这意味着我不必担心跨域或 iframe 加载事件或任何事情。

【参考方案1】：

无法直接访问跨域内容

直接访问跨域内容是不可能的，或者至少不应该是可能的。虽然可能有办法绕过这个限制（我没有仔细研究过），但这不是故意的，会被认为是一个错误。

与其他类型的 Firefox 扩展不同，WebExtensions 被授予访问权限，最多可以逐个域访问内容。这与您在 manifest.json permissions 中指定 "<all_urls>" 或 "*://*/*" 无关。指定多个域权限不会打开对跨域内容的访问。开放对跨域内容的访问将是一个更复杂的问题，它可能有自己的一组安全相关错误。因此，在permissions 中指定多个域只允许您将脚本/CSS 注入多个匹配的 URL，而无需特殊访问跨域内容。因此，不应该有直接访问跨域 iframe 中的内容或从跨域 iframe 访问内容的方法。

必须使用在该框架中注入的脚本来访问跨域内容

如果您想访问该跨域内容，您必须在您希望访问的 iframe 或***窗口中注入一个脚本。如前所述，您注入此类脚本/CSS 的能力是由permissions 控制的事情之一。然后，您可以使用消息传递（来自/到顶部框架/子框架中的内容脚本，或通过后台脚本中继）在您注入跨域框架的脚本之间进行通信。

鉴于您已经将脚本注入<all_urls> 和all_frames，您只需要实现上述它们之间的通信方法之一。然后，您需要从其他脚本请求您需要的信息，或将信息传递给其他脚本进行处理。

【讨论】：

一篇长篇大论，最后深埋了实际答案（从技术上讲，最后一句话是实际解决方案的种子）。你可以做得更好！

@Xan，是的，它有点像一堵文字墙。我添加了一些格式（h2 标题），并扩展了一点。您是否建议更详细地介绍访问/注入另一个脚本和/或传递消息（即代码）？我目前认为不应详细讨论它们，因为它们确实是独立的问题。