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

on things, and then that that screws up the autofill. So you gotta make sure that you put the proper autofill attribute Totally. And that's why if you pay for, like, a popular VPN Peace. Peace.

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,

on those inputs as well. I found the honeypot to not be that effective in 2020

I wasn't seeing the full amount of spam I was going to be getting, but it seemed to me that if there was, having a CAPTCHA on the site is the 1st time we've invited Google onto the site, and, it's not a great feeling.

People said that works really well, which I have a hard time believing because,

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.

like, change the names

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

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.

submit it a 1000000 times. And 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

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,

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

That's right. We're talking about contact forms and forms overall within you are looking at a hefty

that writes a script that will maliciously

either there's going to be just like a generic bot that finds that form 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.

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

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

all of these types of things are just forms that the user will then submit. However, if you just have those on your website, because

a webcam now. That's wild to me.

logrocket.comforward/syntax,

malicious users.

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,

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 forms myself.

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

and you're going to get 14 days for free.

that can be really big trouble if 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 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.

it's sort of the unfortunate

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

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

It feels weird that there's no latency that we're actually on So let's get into it. Let's talk about forms. We all Node and love forms. I I deal quite a bit of,

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

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.

somebody is going to 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,

and dealing with so many different services you sign up. It all seems cheap at the time, and next thing you know

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?

you just swap out

Cool.

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.

bill coming your way. Right? Yeah. I don't know if that's part of my And it's a specific number to that host. And ASNs for legitimate ISPs

8 or 9 services later, and,

what's the cloud

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.

registered of Intuition Machines Inc.

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.

and then pop them in there. Simple things. 1 what is 1 plus 1? What is 5 plus 8? And then, either a VPN service or just, like, raw boxes

submit the question ID and the answer. And then on the server side, you check 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

but and even, like, for my own website, people are like, just use 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

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

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

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.

that you are a

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,

which is super cool. So you could probably swap this out in, like, 20 minutes, I to using Google's CAPTCHA is that you have to embed Google on your website. So just like putting a Facebook or Instagram

Head on over to syntax.fm

like, years ago, we had these super annoying you still see them all around. These, like, like, metal band, cryptic letter one thing that a lot of malicious users and bots will do is that they they don't use the same IP address.

a couple pieces of HTML, and it would just work,

And that challenge will verify whether or not it's an illegitimate user and not just a robot.

link on your website, then they're able to sort of track like, submitting it 10 times over an hour and submitting it 10,000 times over an hour is huge. Right. Yeah. Totally.

it's so much more reliable than than Google's in terms of, like, actually understanding your selections.

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 CD

what the difference is between these 2. But it looks like if you wanna use hCaptcha, you around the Wes. But their Captcha works super well.

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

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.

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 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,

the solution for a lot of things lately, 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, 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, Yeah. So the first one is called the honeypot. And a honeypot is essentially a field on your input

and then they hide it either via CSS or by the hidden attribute.

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.

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 Next, we have blocking known ASN. So you wouldn't be able to run your website.

hide pnpm, so they have an input form inputs, things like WordPress, they specifically look for them.

and disruption for your users.

discomfort

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.

to find the honeypot as a honeypot

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.

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 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 my ethos. Certainly, I love using services, 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 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 It's, it's a good life.

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.

Also, so the reason why the IP throttle,

Interesting.

Next is going to be IP throttling,

Mhmm.

And this isn't obviously a sponsor spot, but, Cloudflare it's expensive. And, you could probably

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

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

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, 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 this one can be exceedingly simple if you use a service like Cloudflare.

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

is most effective in my mind because what you have to do with a CAPTCHA is it usually asks you see how your error is happening with a scrubbable spam attacker.

ISPs.

and every single person that hosts something, they have this number that's called an ASN.

Usually what will happen is they sign up for 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 has an email newsletter sign up, a bug report, signing up for an account, resetting a password, 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,

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

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

including every every single person like DigitalOcean The downside trying to type what you see in it. Those are almost a thing of the past because Google's working really well.

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

abused IP addresses, especially because there's a lot of hosting companies that do not abide by DMCA,

and try to use Netflix from another country, 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.

for just, like, all the time traffic anyways, 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,

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

submit something. Sometimes it just, based on your threat level, asks you to submit a checkbox that proves you are not a robot.

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 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

because there's also legitimate reasons for people using like a DigitalOcean which is frustrating, and you just have to be like,

are are good, but you can also get lists of commonly makes sell something, Totally. Alright. That's it for today. Thank you so much for tuning in, and we will catch you on Wednesday.

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.

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

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,

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 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.

As somebody who uses the Pnpm so on and so forth. But this one can be effective if you have a nonsophisticated

and those IPs like, that's the one most like, that's the one reason why I would never 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 Other ones are getting a little bit more save that that money by just doing it yourself.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing,

Monday. Monday. Monday.

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, makes IP throttling just