Search code examples
twitterfetch-apicontent-security-policy

Using fetch in user scripts from twitter.com


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

  • Solution: Do not use fetch, but the GM.xmlhttpRequest function. It is able to go around CSP.