Built-in Honeypot & CSRF support 🎉

[kentcdodds]

I've just pushed:

1. An upgrade to the latest remix-utils: 605c029
2. Built-in Honeypot & CSRF support with remix-utils: b25c01d

As a part of this, I've written up explanations of why these features are so handy in decision documents:

• Cross-Site Request Forgery
• Honeypot Fields

You can also watch videos from EpicWeb.dev on the subject:

Honeypot Fields:

Cross-Sit Request Forgery:

Enjoy!

[kasperpeulen]

Do we really need CSRF support?

The Remix docs say:

Does Remix implement CSRF protection?
Remix cookies are configured to SameSite=Lax by default which is a platform built-in protection against CSRF, if you need to support > old browsers (IE11 or older) that doesn't support SameSite=Lax you would have to implement CSRF protection yourself or use a library that implements it.

I asked ChatGPT about this:

Yes, your statement is largely accurate. Let's break it down:

SameSite Attribute: The SameSite attribute of cookies is an effective measure against cross-site request forgery (CSRF) attacks. By setting cookies to SameSite=Lax, the browser will only send cookies if the request is same-site or a top-level navigation. This means that even if an attacker tricks a victim into clicking a link or loading an image, the credentials (in the form of cookies) won't be sent in the request, effectively neutralizing CSRF attacks.
Remix and SameSite: If Remix sets cookies to SameSite=Lax by default, it is indeed using a built-in browser mechanism to protect against CSRF.
Old Browsers: Older browsers, as you mentioned like IE11 or even older ones, might not support the SameSite attribute. In such cases, relying solely on SameSite=Lax would leave users of those browsers vulnerable to CSRF attacks. For applications that need to support these browsers, additional CSRF protection measures would need to be implemented.
In conclusion, while the SameSite=Lax default provides CSRF protection for most modern browsers, applications supporting older browsers would need to consider additional CSRF protection mechanisms.

So another option might be to redirect old browsers?

[sergiodxa]

You shouldn't need it if SameSite is set as Lax, which is the default in Remix for any cookie, however it's still recommended to do it and it's not a lot more of work.

[knownasilya]

I changed the default user 'kody' to another user, deleted the old db and reran npm run setup and cleared cookies and I keep getting invalid csrf errors, any thoughts?

[kentcdodds]

You'll want to check the cookie first. Make sure your requests have the cookie. If they do, then check that they match the one generated. If it does, then I'm not sure what's wrong. Sorry. It's hard to say without a full reproduction. Feel free to join me for office hours if you can't figure it out.