我很好奇,如果以下情况是Chrome中的错误,按预期工作或开发人员错误。
所以,我有一个扩展名。在manifest.json中,我请求两个站点的跨源权限:
"permissions": [
"http://www.foo.com/*",
"http://www.bar.com/*"
]
我还宣布了一个内容脚本:
"content_scripts": [
{
"matches": ["http://www.foo.com/*"],
"js": ["injectedScript.js"]
}
]
所以,我已经表示我想在所有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();
现在,我的Chrome扩展程序页面中添加了一个iframe。它看起来像这样:
<iframe src="http://www.foo.com/123"></iframe>
此框架的src与我的内容脚本模式匹配。因此,当帧加载时,injectScript.js被注入其中。 但是injectScript内部的XMLHttpRequest失败。
现在,这让我想知道预期的行为是什么。当我请求相应的权限时遇到CORS问题令人沮丧...但我也可以理解我试图从我的chrome扩展程序之外的原点访问“http://www.bar.com/123”...尽管是iframe加载到我有权访问的扩展中。
有关此事的任何人的想法?
编辑:如果你想知道从实际的角度来看我能得到什么 - 我想注入一些javascript,可以在注入页面的视频上调用getImageData。但是,我不能,因为getImageData认为视频的src是受污染的数据。我已经请求了相应的权限,但它没有进入iframe。
更新:这是一张图片:http://i.imgur.com/PR48HO2.png
答案 0 :(得分:0)
实施Same-Origin策略以防止恶意JavaScript攻击(您可以阅读有关该here的更多信息),并且是Web安全模型的重要组成部分。很遗憾,您无法在内容脚本中直接使用HTTP请求。
但是,如果您碰巧有权访问要允许访问的文件,可以添加以下PHP代码以允许Cross-Origin:
header('Access-Control-Allow-Origin: *');
该代码基本上允许任何网站/ IP地址在以下文件中使用Cross-Origin。
如果您无法访问该文件,则可以执行一种解决方法,例如不要尝试直接获取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);