注入内容脚本并请求跨域许可

问题描述 投票:7回答:1

我很好奇以下情况是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();

现在,将iframe添加到了我的Chrome扩展程序页面。看起来像这样:

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

此框架的src与我的内容脚本模式匹配。这样,在加载框架时,将InjectionScript.js注入其中。 但是但是injectedScript内部的XMLHttpRequest失败。

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

有人对此事有何想法?

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

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

google-chrome-extension cross-domain same-origin-policy
1个回答
0
投票

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

但是,如果您恰巧有权访问该文件,则可以添加以下PHP代码以允许跨域访问:

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

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

[如果您无权访问该文件,则可以采取一种解决方法,例如,与其尝试直接获取HTML,不如直接获取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);
© www.soinside.com 2019 - 2024. All rights reserved.