00:00 Honeypots are not as sweet as they sound. So sometimes spam bots will go all over the web and submit as many forms as they possibly can. They do this for SEO purposes, so like they'll maybe try to get onto a form and post a link that back links

00:17 to their own site or whatever. That actually, there's a fair good return on that investment, unfortunately. They will also sometimes just check for sites that are vulnerable, report back and say, hey, these sites are vulnerable to these vulnerabilities. Go ahead and exploit that. Or sometimes they'll try to upload files

00:36 to your server that have malware on them. So for various reasons, spam bots will just go and find as many public forms that they can and submit just nonsense data to them. And so what we have as a defense for us is the fact that it's kind of cost prohibitive

00:54 for them to make these bots very sophisticated. They don't typically pull up a full browser. Some do for sure, but they don't normally pull up a full browser and run all the JavaScript and all of that. They'll normally just look and see, are there form fields here? Oh yes, there are. So I will write my script or I will run my script

01:14 that will submit those form fields. It'll be very simple. And I've had this problem on my own personal website. I have a contact form and a login form. And when you log in, it sends you an email to confirm your login. And I was having issues with just random spam bots

01:33 submitting that and I was sending emails to random people. This was, yeah, definitely problematic for my deliverability because I would get marked as spam and it was super annoying. Also like not great for people. And so what you do is you add a honeypot field. It's very, very simple. It's simply a field inside of your form

01:53 that is not visible to a user. And if the user does somehow end up seeing it, then you have a label that says don't fill out this field. And then you will check whether that field was filled out. And if it was, then you are pretty certain that it was a spam bot that did that.

02:14 Now it's gonna be a little bit more sophisticated than this. We're gonna want to make sure screen readers don't get it and there's no possible way to get focused and stuff like that. But that's the basic idea. It's just like a visually hidden field that a actual user probably wouldn't fill out. Another aspect to this is checking

02:32 how quickly did they fill out the field. If they filled it out too quick, then they probably were a bot. And so there are a number of things that you can do as part of this honeypot thing that we're gonna be doing in this exercise. Luckily for us, even though the spam bot thing is kind of a game of cat and mouse,

02:49 we have a great library that has the capability for rendering a honeypot for us and can keep up with that cat and mouse game. So it's called Remix Utils and it has a honeypot utility that we can use. So you create a honeypot, this can be configured. And then you use that to get the props

03:08 that need to be applied to your honeypot fields. You render that inside of the honeypot provider and then you can render honeypot fields or inputs all over your app, like wherever you've got public forms that could be filled out by anybody. And then you run honeypot check on the server

03:26 to make sure that the form data doesn't include any filled out honeypot fields, as well as make sure that it wasn't submitted too fast. So we're gonna be learning about all of this stuff here. Honeypots are an unfortunate reality of any site that has any public forms, which is pretty much all of them

03:44 because you probably at least have a login form that would be nice to reduce resource usage by not allowing people to submit that form if they're not legit. So let's get into this. This is gonna be a pretty interesting one, couple of steps here. So have a good time.