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

Sea*_*son 7 cross-domain google-chrome-extension cors

我很好奇,如果以下情况是Chrome中的错误,按预期工作或开发人员错误.

所以,我有一个扩展.在manifest.json中,我请求两个站点的跨源权限:

"permissions": [
    "http://www.foo.com/*",
    "http://www.bar.com/*"
]
Run Code Online (Sandbox Code Playgroud)

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

"content_scripts": [
    {
      "matches": ["http://www.foo.com/*"],
      "js": ["injectedScript.js"]
    }
]
Run Code Online (Sandbox Code Playgroud)

所以,我已经表示我想在所有foo.com域中注入"injectScript.js"."injectScript.js"看起来像:

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

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

<iframe src="http://www.foo.com/123"></iframe>
Run Code Online (Sandbox Code Playgroud)

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

现在,这让我想知道预期的行为是什么.当我请求相应的权限时遇到CORS问题令人沮丧...但我也可以理解我试图从我的chrome扩展程序之外的原点访问" http://www.bar.com/123 " ...虽然iframe已加载到我有权访问的扩展中.

有关此事的任何人的想法?

编辑:如果你想知道从实际的角度来看我能得到什么 - 我想注入一些javascript,可以在注入页面的视频上调用getImageData.但是,我不能,因为getImageData认为视频的src是受污染的数据.我已经请求了相应的权限,但它没有进入iframe.

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

Tid*_*al5 1

同源策略的实施是为了防止恶意 JavaScript 攻击(您可以在此处阅读更多相关内容),并且是 Web 安全模型的重要组成部分。遗憾的是,您无法在内容脚本中直接使用 HTTP 请求。

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

header('Access-Control-Allow-Origin: *'); 
Run Code Online (Sandbox Code Playgroud)

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

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

这是一个例子:

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

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

$HTMLfromURL = file_get_contents($URL);

echo $HTMLfromURL
Run Code Online (Sandbox Code Playgroud)

然后在 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);
Run Code Online (Sandbox Code Playgroud)