注入内容脚本和请求跨源许可

我很好奇，如果以下情况是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我的内容脚本模式相匹配。因此，当框架加载时，injectScript.js被注入其中。 但是注入脚本中的XMLHttpRequest失败。

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

任何关于此事的想法？

编辑：如果你想知道什么我可以在从实际情况来看越来越 - 我想注入一些JavaScript可以调用getImageData在注入的页面的视频。但是，我不能，因为getImageData认为视频的src是有污染的数据。我已经请求了适当的权限，但是它并没有缓冲到iframe中。

UPDATE：这里有一个画面：http://i.imgur.com/PR48HO2.png

来源

2013-05-08 Sean Anderson

我面临同样的问题。我知道你已经找出了原因，并在你的（不幸的）扩展中解决它。你能分享这个解决方案吗（或许你自己添加一个答案）？ – 2017-05-05 01:44:26

-1

同源政策实施，以防止恶意的JavaScript攻击（你可以阅读更多有关here），是网络安全模型的重要组成部分。很遗憾，你不能直接在内容脚本中使用HTTP请求。

但是，如果你碰巧有机会获得你要允许访问，您可以添加下面的PHP代码，允许将文件跨来源：

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

来源

2016-02-23 07:06:05 Tidal5

注入内容脚本和请求跨源许可

回答

相关问题