How to send cross-origin HTTP request on a web page that has strict CSP and CORS?

[realyukii]

I have a user script that send XHR request from facebook page and get the following error:

Content-Security-Policy: The page’s settings blocked the loading of a resource (connect-src) at http://localhost:9898/ because it violates the following directive: “connect-src https://*.facebook.com https://facebook.com/ https://*.fbcdn.net https://*.facebook.net wss://*.facebook.com:* wss://*.whatsapp.com:* wss://*.fbcdn.net https://attachment.fbsbx.com/ ws://localhost:* blob: https://*.cdninstagram.com 'self' http://localhost:3103/ wss://gateway.facebook.com wss://edge-chat.facebook.com wss://snaptu-d.facebook.com wss://kaios-d.facebook.com/ https://v.whatsapp.net/ https://*.fbsbx.com https://*.fb.com https://*.google-analytics.com wss://web.whatsapp.com/ws/chat https://reg-e2ee.facebook.com/ https://cdn.fbsbx.com/ https://api.mapbox.com/ https://*.tiles.mapbox.com https://events.mapbox.com/ https://meta.privacy-gateway.cloudflare.com/relay https://meta-ohttp-relay-prod.fastly-edge.com/ https://*.tenor.co”[ line 10 > injectedScript:42:7](https://www.facebook.com/groups/programmerhandal/posts/1320144089208771/%20line%2010%20%3E%20injectedScript)

Why I still get CSP error despite the fact that I already set Modify existing content security policy (CSP) headers to yes and also tried remove entirely, here's the xhr request code on user script:

var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://localhost:9898', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText)
    }
  };
  xhr.send();

on the user script setting (not the global one), I also add: localhost, 127.0.0.1, localhost:9898 on the XHR security's user domain whitelist

[derjanb]

Please use GM_xmlhttpRequest to avoid these issues.

https://tmnk.net/docs#api:GM_xmlhttpRequest

[realyukii]

thank you very much for the answer, it awesome! it works like magic ^^