在火狐浏览器上通过插件启用 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.)

当响应标头包含"访问控制允许凭据"时，会发生这种情况

当有一个标题"访问控制-允许-凭据"时，您无法将访问控制-允许-来源发送为 *，但不确定为什么这是所有浏览器中的问题

Answer 1

Mozilla 文档说：

响应有凭据的请求时，服务器必须指定域，并且不能使用通配符。

并进一步：

源参数指定可以访问资源的 URI。浏览器必须强制执行此操作。对于没有凭据的请求，服务器可以将"*"指定为通配符，从而允许任何源访问资源。

来源： HTTP 访问控制 (CORS(

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

更新 1

如何使用 Origin 标头的示例：

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，当它不存在时默认为*。