注入内容脚本并请求跨域权限

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”注入所有 foo.com 域。 “injectedScript.js”看起来像：

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

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

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

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

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

任何人对此事有何想法？

编辑：如果您想知道从实际的角度来看我能得到什么——我想注入一些可以在注入页面中的视频上调用 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 扩展端有：

注意：您使用的 XMLHTTPRequest 已过时并导致 对用户端的性能影响很大。下面的代码是一个 同一事物的异步版本，不会对性能产生负面影响。

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);