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

Question

我有一个chrome扩展程序,它以特殊方式监视浏览器,将一些数据发送到Web服务器.在当前配置中,这是localhost.所以内容脚本包含这样的代码:

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 cannot load http://localhost/ctrl?params. Origin http://www.thissite.com is not allowed by Access-Control-Allow-Origin.

我已经试过这是这里提出(一些权限*://*/*,http://*/*和<all_urls>),但没有人帮助解决问题.

所以,问题是这个特定网站可能出现什么问题(显然可能有其他网站有类似的不当行为,我想知道这个的性质),以及如何解决这个错误？

Answer 1

(tl;博士:在答案的最后看到两个可能的解决方法)

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

1. http://www.wix.com/开始加载
2. 它有一个<script>异步加载Facebook Connect脚本的标记:

   (function() {
     var e = document.createElement('script');
     e.type = 'text/javascript';
     e.src = document.location.protocol +
       '//connect.facebook.net/en_US/all.js';
     e.async = true;
     document.getElementById('fb-root').appendChild(e);
   }());
   

3. 一旦wix.com页面的HTML(但不包括Facebook Connect脚本)加载,DOMContentLoaded事件就会触发.由于您的内容脚本使用"run_at" : "document_end",它会在此时注入并运行.
4. 您的内容脚本运行以下代码(据我所知,它希望在load事件触发后执行大部分工作):

   window.onload = function() {
     // code that eventually does the cross-origin XMLHttpRequest
   };
   

5. Facebook Connect脚本加载,它有自己的load事件处理程序,它与此代码段一起添加:

   (function() {
     var oldonload=window.onload;
     window.onload=function(){
       // Run new onload code
       if(oldonload) {
         if(typeof oldonload=='string') {
           eval(oldonload);
         } else {
           oldonload();
         }
       }
     };
   })();
   

   (这是第一个关键部分)由于您的脚本设置了onload属性,因此oldonload是脚本的加载处理程序.
6. 最终,将加载所有资源,并load触发事件处理程序.
7. load运行Facebook Connect的处理程序,它运行自己的代码,然后调用oldonload.(这是第二个关键部分)由于页面正在调用您的load处理程序,因此它不会在您的脚本的孤立世界中运行它,而是在页面的"主要世界"中运行它.只有脚本的隔离世界具有跨源XMLHttpRequest访问权限,因此请求失败.

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

您的load处理程序最终在"主要世界"中运行的事实很可能是Chrome bug 87520的一种表现形式(该错误具有安全隐患,因此您可能无法看到它).

有两种方法可以解决这个问题:

1. 您可以使用默认运行时间(在文档加载后),而不是使用"run_at" : "document_end"和load事件处理程序,document_idle只需让代码以内联方式运行.
2. 不要load通过设置window.onload属性来添加事件处理程序,而是使用window.addEventListener('load', func).这样,您的事件处理程序将不会对Facebook Connect可见,因此它将在内容脚本的孤立世界中运行.