javascript - 在 Firefox 上通过插件启用 CORS 会导致错误

Question

我的代码可以工作，但并不总是像它应该的那样，例如你不能在 Facebook 上聊天

var MYADDON_CSP_listener = {
observe : function(aSubject, aTopic, aData) {
  if (aTopic == "http-on-examine-response") {
    let url;

    aSubject.QueryInterface(Components.interfaces.nsIHttpChannel);
    url = aSubject.URI.spec;
    var headers=["Content-Security-Policy: ","Access-Control-Allow-Origin: *","Access-Control-Allow-Methods: POST,GET,DELETE,PUT","Content-Security-Policy-Report-Only: ","X-Content-Security-Policy: ","X-WebKit-CSP: ","X-Frame-Options: ","X-XSS-Protection: 0"];
        for(i=0;i<headers.length;i++)
        {
        bol=headers[i].split(': ');
        aSubject.setResponseHeader(bol[0],bol[1], false);
        }
        //aSubject.setResponseHeader("content-security-policy", '', false);
  }
}
};
var MYADDON_observerService = Components.classes["@mozilla.org/observer-service;1"]
                                .getService(Components.interfaces.nsIObserverService);
MYADDON_observerService.addObserver(MYADDON_CSP_listener, "http-on-examine-response", false);

我在 chrome 上遇到了同样的问题，但我解决了

chrome.webRequest.onHeadersReceived.addListener(function (details) {
    var newheaders =
        [{
            name : "Content-Security-Policy",
            value : "toberemoved"
        }, {
            name : "Content-Security-Policy-Report-Only",
            value : "toberemoved"
        }, {
            name : "X-Content-Security-Policy",
            value : "toberemoved"
        }, {
            name : "X-WebKit-CSP",
            value : "toberemoved"
        }, {
            name : "X-Frame-Options",
            value : "toberemoved"
        }, {
            name : "X-XSS-Protection",
            value : "toberemoved"
        }, {
            name : "Access-Control-Allow-Methods",
            value : "POST, GET, OPTIONS, PATCH, DELETE, PUT"
        }
    ];
    var AccessControlAllowOrigin = true;
    var AccessControlAllowCredentials = true;
    for (z = 0; z < newheaders.length; z++) {
        var isthisshit = false;
        for (i = 0; i < details.responseHeaders.length; i++) {
            if (details.responseHeaders[i].name.toLowerCase() == newheaders[z].name.toLowerCase()) {
                if (newheaders[z].value == "toberemoved") {
                    details.responseHeaders.splice(i, 1);
                } else {
                    details.responseHeaders[i].value = newheaders[z].value;
                }
                isthisshit = true;
            }
        if((typeof details.responseHeaders[i]!="undefined") && (typeof details.responseHeaders[i].name!="undefined"))
        {
        if (details.responseHeaders[i].name.toLowerCase() == "Access-Control-Allow-Origin".toLowerCase()) { 

        for(var is in details.responseHeaders){  if(details.responseHeaders[is].name.toLowerCase() == "Access-Control-Allow-Credentials".toLowerCase()) { AccessControlAllowCredentials=false;  }  }

        if(AccessControlAllowCredentials) {
        details.responseHeaders[i].value='*'; AccessControlAllowOrigin=false; }

         }
        } else { }
        }
        if (!isthisshit && (newheaders[z].value != 'toberemoved')) {
            details.responseHeaders.push(newheaders[z]);
        }
    }
    if(AccessControlAllowOrigin && AccessControlAllowCredentials){ details.responseHeaders.push({name:"Access-Control-Allow-Origin",value:"*"}); }
    return {
        responseHeaders : details.responseHeaders
    };
}, {
    urls : ["<all_urls>"],
    types : ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"]
},["blocking", "responseHeaders"]);

这是日志

https://2-edge-chat.facebook.com/pull?channel=p_1675691344&seq=0&partition=-2&clientid=368c9db5&cb=7b8p&idle=6&cap=8&msgs_recv=0&uid=1675691344&viewer_uid=1675691344&state=offline üzerindeki uzak kaynağın okunmasına izin vermiyor. (Sebep: CORS üstbilgisi 'Access-Control-Allow-Origin', '*' ile eşleşmiyor.)

当响应 header 包含“Access-Control-Allow-Credentials”时，会发生这种情况

当存在标题“Access-Control-Allow-Credentials”时，您无法将 Access-Control-Allow-Origin 作为 * 发送，但不确定为什么这在所有浏览器中都会出现问题

Answer 1

Mozilla 文档说:

when responding to a credentialed request, server must specify a domain, and cannot use wild carding.

进一步:

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

来源:HTTP access control (CORS)

无论情况如何，您的代码始终设置Access-Control-Allow-Origin: *，在这种情况下应该会失败。 检查您的请求是否包含 Origin header ，您应该在 Access-Control-Allow-Origin 中使用其值。

更新1

如何使用 Origin header 的示例:

observerHandler : { observe : function(subject, topic, data) {

   // http interface
   var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
   if(httpChannel == null) {
      return;
   }


   // check origin header
   // was throwing an exception necessary if header is not set, mozilla ?
   var origin;
   try {
      origin = httpChannel.getRequestHeader('Origin');
   } catch(e) {}

   if(!origin) {
      origin = '*';
   }


   // check response header
   // was throwing an exception necessary if header is not set, mozilla ?
   var header;
   try {
      header = httpChannel.getResponseHeader('Access-Control-Allow-Origin');
   } catch(e) {}


   // abort if header has cors already
   if(header == '*' || header == 'null') {
      return;
   }


   // force cross origin
   httpChannel.setResponseHeader('Access-Control-Allow-Origin', origin, false);
}}

来源:cors-everywhere-firefox-addon/content/module.js (免责声明:我编写了该代码)

如果存在 Origin，则使用它；如果不存在，则默认为 *。