I’m working on a project where the frontend and backend are completely separate. The frontend is a single-page app hosted on its own server with nginx. The backend is a Django API on a different domain.
I’m struggling to figure out how to handle CSRF protection in this setup. Usually, Django sends a CSRF token cookie with the initial page load, but that’s not happening here since the frontend is separate.
How can I implement CSRF protection when the frontend can’t directly access Django-generated CSRF tokens? Are there any best practices for securing API requests in this kind of decoupled architecture?
I’ve looked into custom middleware and CORS settings, but I’m not sure of the best approach. Any advice would be really helpful. Thanks!
hey, have u considered using session-based authentication instead? it’s pretty solid for decoupled setups. basically, ur backend generates a session token on login, sends it to the frontend, and the frontend includes it in all requests. no need to mess with csrf tokens. just make sure to use https and set proper cors rules. it’s worked great for me in similar projects!
hey, interesting setup! maybe try a ‘X-CSRF-Token’ header. request a token from backend on load and send it with each api call so the backend can check it. what do u think, any issues with this aproach?
In a decoupled architecture like yours, implementing CSRF protection requires a different approach. One effective method is to use JSON Web Tokens (JWTs) for authentication. JWTs can be securely generated by your Django backend and sent to the frontend upon successful login. The frontend can then include this token in the Authorization header for subsequent API requests.
For added security, you can implement a double-submit cookie pattern. This involves sending a random token in both a cookie and as a custom header with each request. The backend verifies that these match before processing the request.
Additionally, ensure you’ve properly configured CORS settings on your Django backend to only allow requests from your frontend’s domain. This, combined with HTTPS for all communications, provides a robust security setup for your decoupled architecture.