Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, barracuda, Bos, and Scott, el toroloco, Tolinski.

Welcome to Syntax.

In this Monday, hasty treat, we're gonna be talking all about forms, CAPTCHAs, honeypots, and dealing with malicious users.

That's right. We're talking about contact forms and forms overall within

HTML, JavaScript, and the web. My name is Scott Tolinski. I'm a developer from Denver, Colorado. And with me, as always, is the Wes Bos. How you doing, Wes? I'm doing great. I am back in Hamilton for a couple weeks. So we came home from the cottage, and my Internet here is fast. I can see you. There's not there's no latency.

It's, it's a good life.

It feels weird that there's no latency that we're actually on a webcam now. That's wild to me.

What else is wild is one of our sponsors, which allows you to not only like, right now, I can see Wes, but our sponsor today allows us to see your errors and exceptions happening right there on your website. I'm talking about LogRocket. LogRocket is the error and exception handling service that allows you to actually visually see how your error is happening with a scrubbable video timeline of the errors, what it both clicked, and all of the the things that led up to the eventual issue. This is one of those amazing services that you really have to try out. So you're gonna want to head to logrocket.comforward/syntax, and you're going to get 14 days for free.

Again, check it out, logrocket.comforward/syntax.

See your errors and exceptions happening in real time with a scrubbable video with LogRocket.

So let's get into it. Let's talk about forms. We all Node and love forms. I I deal quite a bit of, forms myself.

Where do you wanna start here? Yeah. I just wanna talk about sort of, like, where this episode came from. So I'm working on my Gatsby course. Actually, it's done. I'm about to start recording.

And I have Yarn of the course is that we have, like, an order form that is just a contact form, and then it sends an email. And, like, that was, like, one of, like, the first things that you learn when you're, like, learning PHP to send it. You send an email, and you're done. And I'm just kinda sitting there being like, I can't, like, I can't release this and tell people it's this easy to to submit a contact form because you create your form. It sends an email. You can't just release that to the wild because of bots and and malicious users. So if you have a contact form that does, obviously, contact, makes sell something, has an email newsletter sign up, a bug report, signing up for an account, resetting a password, all of these types of things are just forms that the user will then submit. However, if you just have those on your website, somebody is going to either there's going to be just like a generic bot that finds that form and submits it just because it's trying to inject spam and trying to to send emails to you or you're gonna have somebody that writes a script that will maliciously submit it a 1000000 times. And that can be really big trouble if something like a password reset is sending an email off to a user. Like, imagine a user could request a password reset for someone's account that's not theirs, and they could send, I don't know, a1000 a minute or something like that, then what's gonna happen is, like, first, your user's gonna be pissed, and second, you're gonna get locked out of your transactional email, thing like that. So it's sort of the unfortunate the unfortunate thing with web development is that, like, the first 90% of it seems all easy, and then you have to get into this little weird area of, yeah, but we need to to account for these types of bots. So we're gonna go through I think I've got 4 different sort of approaches that you could go through here to solve these or sort of defend against these types of things. And then you can sorta choose 1 or or multiple ones of these to to get into it. So

what can you do? The first thing and I asked on Twitter, like like, what do you do, what do you do about this? Because this probably the we'll talk about this in a second. The clear one is put CAPTCHA on it, but CAPTCHA suck. I hate them so much. The most effective. Like Yeah. Vercel, most effective, but also the if we're if we're doing the Yelp dollar sign thing, that's the the, the highest amount of dollar signs there because it's the you know, requires the largest amount of, discomfort and disruption for your users.

I think I don't know about you, but I've actually had to resort to CAPTCHA's in some situations where I prefer not to. But at the end of the day, it sometimes it is just required.

Yeah. So the first one is called the honeypot. And a honeypot is essentially a field on your input that regular users will not fill out, but bots will try and fill it out. So it might be an input that says do not fill this out. Sometimes people hide pnpm, so they have an input and then they hide it either via CSS or by the hidden attribute.

People said that works really well, which I have a hard time believing because, like, what bot is not smart enough just to check if an element is visible or not. Right? But apparently, it it works pretty well.

The downside to this honeypot is that you have to really make sure that it's accessible.

So if you have a input that should not be filled out, you need to make sure that the accessibility use case for that works as well. And then also I've seen people, like, change the names on things, and then that that screws up the autofill. So you gotta make sure that you put the proper autofill attribute

on those inputs as well. I found the honeypot to not be that effective in 2020 just knowing from my personal use case. When I've used it, I've it hasn't done a lot for me to prevent spam, but maybe I wasn't seeing the full amount of spam I was going to be getting, but it seemed to me that if there was,

spammer or spammy enough, they were found ways to get around the honeypot or identify it for what it is. Yeah. I I asked on Twitter about this, and I would say, like, 80% of people said Honeypot is enough for most of my use cases just because the spammer knows if there's these are just automated Bos. In most cases, it's not somebody going to the website and trying to figure it out. And they know that, okay, if they have a honeypot in place, then I'm just gonna gonna move ahead because there's certainly much more. There's a hundreds of other contact forms on the web that they can put there.

I don't know. Like, what are things that Yarn, like, gold buy gold online? Or Wouldn't it be fairly simple for a bot

to find the honeypot as a honeypot

just based on maybe checking CSS rules or something? That's what I thought. That's what I thought as Wes, but, apparently, it works pretty well. Like, I was super skeptical of it at first, but maybe the people that are saying it works are also not the ones that are getting nailed because, certainly, I have contact forms I have had online for Yarn.

And they have no sort of none of the stuff we're talking about today, and they've never got, a single single piece of spam in them. It's maybe it's more for, like, common form inputs, things like WordPress, they specifically look for them.

Interesting.

Yeah. I I I really don't know. I wish maybe there were some, like, research. That'd be really great to see some research on, the status of a honeypot.

Mhmm.

Next is going to be IP throttling, and this one can be exceedingly simple if you use a service like Cloudflare.

And this isn't obviously a sponsor spot, but, Cloudflare makes IP throttling just absolutely super simple in their firewall settings. You just say, hey. I wanna rate limit this person if they're hitting this same thing beyond this time, or you can just identify who that IP is and block their IP.

Sometimes you need a little bit more custom work with this Node, specifically, if it JS, like, submitting a contact form 5 or 6 times and then stopping. Or, potentially, like, I had an issue with a scammer that was clearly doing some VPN stuff to change their IP every once in a while. So one IP, if it were to get blocked, they would just go ahead and change their IP, start going off again, change your IP, so on and so forth. But this one can be effective if you have a nonsophisticated spam attacker.

Yeah. Yeah. Things like only allowing somebody to sign like, try to sign up twice within a 10 minute window. Mhmm. And then there's there's also algorithms that you can use that every single time that they do it. It's like the have you have you ever had your kid get your iPad or iPhone? You come back and it's like, please wait 6 hours to unlock because every time that they do, like, a try to brute force, it it adds a little bit more time. And that's enough just to either frustrate them or slow them down enough that they're not gonna do enough damage. Because the difference between sending like, submitting it 10 times over an hour and submitting it 10,000 times over an hour is huge. Right. Yeah. Totally.

Also, so the reason why the IP throttle, doesn't work so well and, also, I've I have IP throttling on a lot of my stuff, and I often get in trouble with classes who are taking my courses because they're all on the same IP address, and I they all send 40 people try to sign up and get slammed. And then my my IP throttling kicks in and says, hey. You can't do that because it seems like you're a spammer. So, like, you have I'll also have to think about that Wes multiple people could be on legitimately on the same IP as well. That doesn't seem like super common, though, but, yeah, definitely

something that I would never have thought of. Yeah. Yeah.

Next, we have blocking known ASN. So one thing that a lot of malicious users and bots will do is that they they don't use the same IP address.

Every single time they make a request, they run it through a different VPN.

Usually what will happen is they sign up for either a VPN service or just, like, raw boxes on, like, a like, a server, like, DigitalOcean or something like that, and then they send the Wes through that that box. And every single ISP, including every every single person like DigitalOcean and every single person that hosts something, they have this number that's called an ASN.

And it's a specific number to that host. And ASNs for legitimate ISPs are are good, but you can also get lists of commonly abused IP addresses, especially because there's a lot of hosting companies that do not abide by DMCA, and those are very popular amongst people who wanna run bots. So you can at a a CloudFlare level, you can get a list of ASNs or just look at the ASNs for people who are are submitting these spam and just block those and that or you can you can you can throw in a, a CAPTCHA at that point because Bos are automated, and if you throw a CAPTCHA in. So what I've done in the past is because there's also legitimate reasons for people using like a DigitalOcean as a VPN and you can't then you're blocking good traffic as well. So you can just throw a CAPTCHA in there if they're coming from one of these known CD ISPs.

As somebody who uses the Pnpm for just, like, all the time traffic anyways, I am frequently frustrated by IPs being blocked because even just going to Google, Google will be like, oh, Wes gotta do this CAPTCHA, and then I have to select, you know, 800 photos of the sidewalk before Google will accept me through. And I just end up going to DuckDuckGo instead because they let me use their search engine, and I don't get as good a search result. So it JS definitely frustrating when you're on a VPN and those IPs like, that's the one most like, that's the one reason why I would never have Courtney on a VPN all the time because I just feel like she would not have the patience to deal with that. And I I almost don't have the patience to deal with it either, but it definitely is is a huge bummer. The scammers Scott ruin everything for everybody.

Totally. And that's why if you pay for, like, a popular VPN and try to use Netflix from another country, it almost never works. That's because Netflix has a list of all the popular VPN's ASN numbers. And if they see that your traffic is being piped through one of these, they won't allow it. So if you want to use a VPN and you wanna get American Netflix, you have to host your own VPN software on a service that ideally is not not known by Netflix.

Word. Alright. Last on this list, and we're going to wrap this up, is talking about everyone's favorite and least favorite, which is CAPTCHA. CAPTCHA is most effective in my mind because what you have to do with a CAPTCHA is it usually asks you submit something. Sometimes it just, based on your threat level, asks you to submit a checkbox that proves you are not a robot.

Other ones are getting a little bit more than the eventual grid of photos that you have to suggest to help Google's learning algorithm. Either way, it's presenting the user with a challenge. Right? And that challenge will verify whether or not it's an illegitimate user and not just a robot.

We've all seen these. We all use these captures. They are annoying or they can be annoying, I should say. So you you have a a nice little descriptor for each of these, the soft capture, annoying capture. Could you wanna talk a little bit about some of these different ones you have here? Yeah. I don't know if this is considered I just call this a soft capture, but it just, like, what is 1 plus 1? You can just automatically generate, like, a list like an array of questions

and then pop them in there. Simple things. 1 what is 1 plus 1? What is 5 plus 8? And then, submit the question ID and the answer. And then on the server side, you check if the the answer is the same. So that's at the very basic. That's probably enough to stop a lot of people. But then there's also, like, years ago, we had these super annoying you still see them all around. These, like, like, metal band, cryptic letter trying to type what you see in it. Those are almost a thing of the past because Google's working really well.

The downside to using Google's CAPTCHA is that you have to embed Google on your website. So just like putting a Facebook or Instagram link on your website, then they're able to sort of track you around the Wes. But their Captcha works super well.

By default, their hidden Captcha will use their internal algorithms to figure out if you're a bot or not. We don't know what that is, but I'm sure it's things like, have you signed ESLint your email on the same IP address and cookies and things like that? And then if it detects that you are a maybe a threat, then it then it will throw up the little trainer self driving cars, select the sidewalk and the bus and the bridge. And I feel like they've, I don't know about you, but I feel like I've had to fill out, like, 2 or 3 of them recently before I'm able to get past the caption. I don't know if that's just me or it's getting, like, getting worse.

When you're on a VPN that is maybe the IP has been suggested or or, you know, concerned that it's spam, they make you fill out, like, 8. And I'm just so annoyed by it sometimes, especially or even, like, when it'll say, you know, select the stoplight, and there'll be just a tiny sliver of a stoplight in 1 photo. And you're like, do I select that tiny sliver or not? And then you select it, and then it doesn't work. And you're just like, Gertrude enough for luck to that.

I honestly get really fired up over over these Captchas. And in fact, I'm so I get so angry at them. It might be the most angry that I get is when I I I'm, like, 8 or 9 round on a Captcha.

The last 1 we have here is if you don't wanna use Google because I know, like, a lot of people straight up block all Google stuff on their network, which is understandable.

There is another one called hCaptcha. I thought this was from Cloudflare, but it doesn't look like it. It seems like it's Trademark

registered of Intuition Machines Inc.

It seems like it's like a privacy focused CAPTCHA, which is cool. I maybe I'll I'll go to this as well. The only problem is that I use this on on one of my sites, and every now and then I get people complaining that the CAPTCHA doesn't load because they use an ad blocker, which is frustrating, and you just have to be like, you gotta turn it off. I'm sorry. Like, it's it's so annoying that, like, good paying users get blocked by this stuff, but at the end of the day, you sort of have to. Otherwise, you wouldn't be able to run your website.

This Intuition Machines company seems kind of interesting. It is basically just the, it's a software company who specializes in machine learning and AI. So seems like uniquely suited for an upgraded capture. But more recently, I have been seeing h capture around.

Specifically, I'm trying to remember what sites I've been seeing it on, but there are some sites that I see it on now and I actually really like it because for the most part, it's so much more reliable than than Google's in terms of, like, actually understanding your selections.

And it does seem to be a little bit less annoying in in my in my mind when using it. Also, added benefit of not adding someone like Google keeping a little bit more privacy focused aspect to your site is very positive. Again, we don't use anything like Google Analytics, so having a CAPTCHA on the site is the 1st time we've invited Google onto the site, and, it's not a great feeling.

Oh, man. Their integration, if you're using Google reCAPTCHA version 2, which is what most people are using, there's a version 3, which is not like a successor to it. I spent, like, maybe 3 hours reading the differences, and I sort of just threw my hands up. Are awful. Yeah. I'm just like, I don't understand what the difference is between these 2. But it looks like if you wanna use hCaptcha, you just swap out a couple pieces of HTML, and it would just work, which is super cool. So you could probably swap this out in, like, 20 minutes, I bet. Maybe a nice little project for today then. I think that's the the other difference with Google reCAPTCHA version 3 is it gives you a threat score. So if you and not just when you wanna submit a form, but, like, when the page loads, if you wanna, like, give in the IP address and cookies and things like that of the person visiting, you can also get a threat level where you can sort of, like, make the choice yourself based on the data that you've been given.

Cool.

Pretty nifty. So those are things you should know about. I'm glad we did this just because oh, sorry. The the other option is just use the service. And and that's unfortunately the solution for a lot of things lately, and I don't necessarily love it because people are like, just use a service. Like, I'm like, Node. I kinda wanna teach people how to, like, make a actual form and submit it and email it rather than just pop in this thing that's $5 a month to send an email. So other services have that stuff solved. Also, like,

8 or 9 services later, and, you are looking at a hefty

bill coming your way. Right? Yeah. I don't know if that's part of my my ethos. Certainly, I love using services, but and even, like, for my own website, people are like, just use what's the cloud for the images? Oh, Cloudinary. Cloudinary. I love Cloudinary. I use it on my course website, but I specifically didn't want to use it even though they offered to give it to me for free. But I was like, Node like, I want to build this thing. So somebody who doesn't have $99 a month to run this thing Yeah. Will be able to to do it. So, like, I wanna, like I don't know. There's something about, like, the the early days of of HTML where everything runs everything runs by yourself, that's certainly an option as well. Yeah. I really try to stay away from services when I do the tutorials for those reasons

or not, like, lock yourself into something that's gonna ultimately Scott the user money. I mean, it ends up becoming death by a 1000 cuts here Wes you just have so many different services you sign up. It all seems cheap at the time, and next thing you know it's expensive. And, you could probably save that that money by just doing it yourself.

Totally. Alright. That's it for today. Thank you so much for tuning in, and we will catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.