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

Question

我想知道如何在 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 内容的示例，将不胜感激。

Answer 1

无法直接访问跨域内容

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

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

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

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

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