Django/Graphene/Apollo/django-webpack-loader/Vue: CORS/CSRF not working together? Django/Graphene/Apollo/django-webpack-loader/Vue: CORS/CSRF not working together? vue.js vue.js

Django/Graphene/Apollo/django-webpack-loader/Vue: CORS/CSRF not working together?


It's probably fine to skip CSRF check for that request, but it's hart t assess it from information you've given, so let me explain why do we need CSRF checks at the first place.

CSRF was created to fix a "hole" that is present in how HTTP and web browsers work. This hole goes as follows: any website can contain a from that submits data to your website, and when doing so, cookies will be passed along the form submitted by user.

This means that 3rd party website can trick your users to perform some action on your website. To prevent that, idea of CSRF tokens was created. Simply put: any form on your website that is responsible for performing any action that can be in any way harmful for user when tricked by 3rd party website to submit it, has to contain a CSRF token field next to all data being submitted for this action. The same CSRF token needs to be present either in user's session or in cookies. When form is submitted, those 2 tokens are compared and if they don't match or any of them doesn't exist, form will be rejected.

This protects any form to be submitted by 3rd party website, because cookies from your website cannot be read by other websites, even if they are passed along with request coming from such website. It is impossible then for that website to set matching token in form data.

That being said, this issue is not present when you are not keeping user sessions by using cookies. It is also not an issue when your frontend is on separate domain, as all requests coming from your frontend will have Origin header with it's domain name. So if either of those is the case, you can disable CSRF checks accordingly:

  • When not using cookies for user sessions or user authentication (if you purely rely on JWTs passed by headers for example), you can disable CSRF altogether for all views that are not using cookies.
  • When your frontend is on separate domain (or subdomain), allowed by CORS to connect to your website, use CSRF_TRUSTED_ORIGINS to whitelist it.