Question: Why is CSRF protection needed when I use XMLHttpRequest for all my API calls?

[abceleung]

(The example SPA configuration of this library have CSRF protection, and it got me interested. Feel free to close this if this is off-topic)

Security newbie here. My application has two parts: React static webpage served by nginx and a Flask backend. All API requests use Axios (so XMLHttpRequest); no HTML form submission at all. After login, the session token will be stored as cookie (with httpOnly, Secure and SameSite=Lax).

I read this post on security stackexchange: Do I need CSRF token if I'm using Bearer JWT?, the answers suggest that CSRF protection is NOT needed when all your auth is done via the Authorization header (bearer tokens).

I know that XMLHttpRequest is not the same as bearer auth, but XMLHttpRequest is not HTML form submission (which obviously needs CSRF protection) either.

My questions:

1. Is sending XMLHttpRequest susceptible to CSRF?
2. If yes, could you suggest a plausible scenario where CSRF would take place if there is no CSRF protection?
3. Bonus: Is the Javascript Fetch API (with credentials set to same-origin or include) also susceptible to CSRF?

[jwag956]

These are always good questions - and things do change (slowly). First - how data is sent - forms versus JSON doesn't matter at all. It is all about how authorization information is sent. In the (common) case of authorization being sent as part of a cookie - your application is susceptible for CSRF and MUST have protection. If sending authorization via a header only (no cookies) then I agree that CSRF can't happen.

The thing to remember is that the browser will send the cookie every time a request is made to your site - regardless of which 'tab' makes the request. Only POSTs are an issue since GETs are limited by browsers same-origin policy (https://security.stackexchange.com/questions/115794/should-i-use-csrf-protection-for-get-requests) so Fetches shouldn't be an issue. In general (and Flask-Security adheres to this) - GETS aren't checked for CSRF.

[abceleung]

These are always good questions - and things do change (slowly). First - how data is sent - forms versus JSON doesn't matter at all. It is all about how authorization information is sent. In the (common) case of authorization being sent as part of a cookie - your application is susceptible for CSRF and MUST have protection. If sending authorization via a header only (no cookies) then I agree that CSRF can't happen.

The thing to remember is that the browser will send the cookie every time a request is made to your site - regardless of which 'tab' makes the request. Only POSTs are an issue since GETs are limited by browsers same-origin policy (https://security.stackexchange.com/questions/115794/should-i-use-csrf-protection-for-get-requests) so Fetches shouldn't be an issue. In general (and Flask-Security adheres to this) - GETS aren't checked for CSRF.

Thank you for your answer! I was confused and thought only HTML form submission is susceptible to CSRF.

But as you said, CSRF can happen if cookies are involved.
For example, if my Flask application accepts JSON only (and use session cookie as auth), then CSRF via HTML form obviously does not work, but the attacker can simply create a mechanism (e.g. button) in their website that send a XMLHttpRequest (with withCredentials: true) or fetch (with credentials: include; by default credentials: same-origin is safe) POST request to my Flask app. This is also a CSRF.