注入内容脚本和请求跨源权限

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与我的内容脚本模式匹配。因此，当框架加载时，injectedScript.js会被注入其中。但是，在injectedScript内部的XMLHttpRequest失败了。 现在，这让我想知道预期的行为是什么。当我已经请求了适当的权限时遇到CORS问题很令人沮丧...但我也可以理解我正在尝试从chrome-extension之外的来源访问"http://www.bar.com/123"...虽然是加载到扩展中我有权限访问的iframe中。

任何人对此有什么想法吗？ 编辑：如果你想知道我从实际角度在做什么——我想注入一些javascript，可以在注入页面上调用getImageData。然而，我不能这样做，因为getImageData认为视频的src是污染数据。我已经请求了适当的权限，但它并没有传递到iframe中。 更新：这是一张图片：http://i.imgur.com/PR48HO2.png

- Sean Anderson

---

我也遇到了同样的问题。我知道你已经找出了原因并在你（不幸的）扩展中解决了它。你能分享一下解决方案吗？（也许可以自己添加一个答案来分享）？ - Majid Fouladpour

Answer 1

相同源策略被实施以防止恶意JavaScript攻击（您可以在这里阅读更多内容），是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);

- Tidal5

---

你所使用的XMLHTTPRequest已经过时，会对用户端造成显著的性能影响。 - Jun