This is a follow-up from this question as after further investigation it looks like the core issue is different enough to warrant a different question
I'm trying to use a userscript with TamperMonkey to call an unrelated API. But it looks like it is impossible to call external APIs on twitter pages.
fetch('https://httpbin.org/post', {
method: 'POST',
body: JSON.stringify('{}')
})
This, called from the browser console (Firefox), will work on almost any website, returning a 200 code with the mirrored data. However when launched, still in the browser console, from twitter.com, this will not work and returns a 202 CachedForSync with no data.
In Chrome console I get an explicit error:
Refused to connect to 'https://httpbin.org/post' because it violates the following Content Security Policy directive: "connect-src 'self' blob:
(Followed by a list of URL that I'm assuming are every external API called by twitter's own scripts)
I don't know if this is the same or different error (if it's a Chrome specific thing, I'm not interested, my target is Firefox).
Does this mean it is impossible to call any other API from the twitter pages or is there a way around it ? Different way to call ? Headers ? Browser options ? Anything ?
===
Thanks to @sideshowbarker's edit I realized that CSP is the issue, not CORS (all my previous hurdles were CORS, and this error is in the middle of CORS errors in the console, I didn't realize these were separate things).
So first solution: disable the security.csp.enable option in Firefox. This works. Though I'd rather avoid that for obvious reasons.
Is it possible to set that on a website basis, which would be less of a risk ? Is it possible to avoid it via a TamperMonkey function or directive ? At least I have new keywords to go on my searches.
Solution: Do not use fetch, but the GM.xmlhttpRequest function. It is able to go around CSP.