Chrome 扩展中的 Access-Control-Allow-Origin 错误

Question

我有一个 chrome 扩展程序，它以特殊方式监视浏览器，将一些数据发送到网络服务器。在当前配置中，这是本地主机。因此内容脚本包含这样的代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data)...
xhr.open('GET', url, true);
xhr.send();

其中 url 参数是 'http://localhost/ctrl?params' （或 http://127.0.0.1/ctrl?params - 没关系）。

清单文件包含跨站点请求的所有必要权限。

该扩展在大多数站点上工作正常，但在一个站点上我收到错误：

XMLHttpRequest 无法加载 http://localhost/ctrl?params。 Access-Control-Allow-Origin 不允许来源 http://www.thissite.com。

我已经尝试了此处建议的几种权限（*://*/*、http://*/* 和 ），但没有人帮助解决该问题。

那么，问题是这个特定网站可能出了什么问题（显然可能还有其他网站有类似的不当行为，我想知道其本质），以及如何修复该错误？

Answer 1

（tl；dr：在答案末尾看到两种可能的解决方法）

这是发生的一系列事件，这会导致您看到的行为：

1. http: //www.wix.com/开始加载
2. 它有一个异步加载 Facebook Connect 脚本的
3. 一旦 wix.com 页面的 HTML（但不是资源，包括 Facebook Connect 脚本）加载，DOMContentLoaded 事件就会触发。由于您的内容脚本使用 "run_at" : "document_end"，因此此时它会被注入并运行。
4. 您的内容脚本运行以下代码（据我所知，它希望在 load 事件触发后完成大部分工作）：

   window.onload = function() {
     // 最终执行跨域 XMLHttpRequest 的代码
   };
   
   

5. Facebook Connect 脚本会加载，并且有自己的 load 事件处理程序，并添加了以下代码片段：
   <前>(函数() {
   var oldonload=window.onload;
   窗口.onload=函数(){
   // 运行新的加载代码
   如果（旧加载）{
   if(typeof oldonload=='字符串') {
   评估（旧加载）；
   } 别的 {
   旧加载（）；
   }
   }
   };
   })();
   
   （这是第一个关键部分）由于您的脚本设置了 onload 属性，因此 oldonload 是您脚本的加载处理程序。
6. 最终，所有资源都被加载，并且 load 事件处理程序被触发。
7. Facebook Connect 的 load 处理程序运行，它运行自己的代码，然后调用 oldonload。 （这是第二个关键部分）由于页面正在调用您的 load 处理程序，因此它不会在脚本的 孤立的世界，但位于页面的“主世界”。只有脚本的隔离世界具有跨域 XMLHttpRequest 访问，因此请求失败。

要查看此简化测试用例，请参阅此页面 （模仿 http://www.wix.com），加载 此脚本（模仿 Facebook Connect）。我还提供了 内容脚本 的简化版本和扩展清单。

您的 load 处理程序最终在“主世界”中运行这一事实很可能是 Chrome 错误 87520（该错误具有安全隐患，因此您可能看不到它）。

有两种方法可以解决此问题：

1. 您可以使用默认运行时间 ( document_idle，文档加载后），然后让您的代码内联运行。
2. 不要通过设置 window.onload 属性来添加 load 事件处理程序，而是使用 window.addEventListener('load', func)。这样，您的事件处理程序对于 Facebook Connect 将不可见，因此它将在内容脚本的隔离世界中运行。

Answer 2

您看到的访问控制源问题可能体现在响应的标头中（超出您的控制范围），而不是请求的标头（在您的控制范围内）。

Access-Control-Allow-Origin 是 CORS 的策略，在标头中设置。例如，使用 PHP，您可以使用如下所示的一组标头来启用 CORS：

header('Access-Control-Allow-Origin: http://blah.com');
header('Access-Control-Allow-Credentials: true' );
header('Access-Control-Allow-Headers: Content-Type, Content-Disposition, attachment');

如果听起来像这样，如果服务器在此标头中设置特定来源，则您的 Chrome 扩展程序 遵循指令仅允许来自该域的跨域 (POST?) 请求。