CSRF Protection in React + Express

When we use cookie-based authentication, we should understand CSRF protection.

CSRF means Cross-Site Request Forgery .

In simple words, CSRF is an attack where a malicious website tricks your browser into sending a request to a website where you are already logged in.

Example:

You are logged in to: https://myapp.com

Then you visit: https://evil-site.com

Enter fullscreen mode

Exit fullscreen mode

The evil website may try to send a request like:

POST https://myapp.com/api/delete-post

Enter fullscreen mode

Exit fullscreen mode

Because browsers automatically send cookies, your login cookie may also be sent with that request.

So the backend may think the request came from you.

That is why CSRF protection is needed.

CSRF protection matters because cookie-based authentication can be misused if a malicious website tricks the browser into sending unwanted requests. Even if your auth cookies are secure and httpOnly, the browser may still send them automatically.…