google-chrome-extension - 注入(inject)内容脚本并请求跨域权限

Question

我很好奇以下情况是 Chrome 中的错误、按预期工作还是开发人员错误。

所以，我有一个扩展。在其 manifest.json 中，我请求两个站点的跨域权限:

"permissions": [
    "http://www.foo.com/*",
    "http://www.bar.com/*"
]

我还声明了一个内容脚本:

"content_scripts": [
    {
      "matches": ["http://www.foo.com/*"],
      "js": ["injectedScript.js"]
    }
]

因此，我表示我想将“injectedScript.js”注入(inject)所有 foo.com 域。 “injectedScript.js”看起来像:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
xhr.open("GET", 'http://www.bar.com/123'), true);
xhr.send();

现在，一个 iframe 已添加到我的 Chrome 扩展程序的页面中。它看起来像这样:

<iframe src="http://www.foo.com/123"></iframe>

此框架的 src 与我的内容脚本模式匹配。因此，当框架加载时，injectScript.js 会被注入(inject)其中。 但是injectScript 里面的XMLHttpRequest 失败了。

现在，这让我想知道预期的行为是什么。当我请求适当的权限时遇到 CORS 问题令人沮丧......但我也可以理解我正在尝试从我的 chrome 扩展之外的来源访问“ http://www.bar.com/123”......尽管加载了 iframe我有权访问的扩展程序。

任何人对此事有何想法？

编辑:如果您想知道从实际的角度来看我能得到什么——我想注入(inject)一些可以在注入(inject)页面中的视频上调用 getImageData 的 javascript。但是，我不能，因为 getImageData 认为视频的 src 是受污染的数据。我已经请求了适当的权限，但它并没有渗透到 iframe 中。

更新:这是一张图片: http://i.imgur.com/PR48HO2.png

Answer 1

实现同源策略是为了防止恶意 JavaScript 攻击(您可以阅读更多关于 here 的信息)，并且是 Web 安全模型的重要组成部分。很遗憾，您不能直接在内容脚本中使用 HTTP 请求。

但是，如果您碰巧有权访问要允许访问的文件，则可以添加以下 PHP 代码以允许跨域:

header('Access-Control-Allow-Origin: *'); 

该代码基本上允许任何网站/IP 地址在以下文件上使用跨域。

如果您无权访问该文件，您可以采取一种解决方法，例如，不要尝试直接获取 HTML，而是在个人服务器上调用 PHP 脚本，该脚本将为您使用上面的代码启用跨域功能.

这是一个例子:

header('Access-Control-Allow-Origin: *'); 

$URL = ("http://www.bar.com/123");

$HTMLfromURL = file_get_contents($URL);

echo $HTMLfromURL

然后在 Chrome 扩展方面有:

Note: The XMLHTTPRequest you are using is outdated and causes significant performance impacts on the user side. The code below is an asynchronous version of the same thing which does not have the negative performance impact.

var URL = "http://example.com/myscript.php";
var xhr = new XMLHttpRequest();
xhr.open("GET", URL, true);
xhr.onload = function (e) {
 if (xhr.readyState === 4) {
   if (xhr.status === 200) {
      var HTMLfromURL = xhr.responseText;
 } else {
          // Received unexpected HTML error code (such as 404, or 403)
          console.error(xhr.statusText);
        }
      }
    };
xhr.onerror = function (e) {
  console.error(xhr.statusText);
  // Run this code if failed to load page
};
xhr.send(null);