263

July 6th, 2020 × #webdev#security#spam

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

Discussion of various techniques like honeypots, IP throttling, and CAPTCHAs to secure web forms from spam bots and malicious users while allowing legitimate use.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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.

Scott Tolinski

Welcome to Syntax.

Scott Tolinski

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

Topic 1 00:29

Talking about contact forms, CAPTCHAs, honeypots, dealing with malicious users

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

It's, it's a good life.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Topic 2 04:15

Using CAPTCHA on forms is most effective but also most annoying for users

Scott Tolinski

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.

Scott Tolinski

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.

Topic 3 05:17

Honeypot form fields work well to prevent bots, but must be accessible

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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,

Scott Tolinski

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.

Topic 4 06:44

Cloudflare makes IP throttling easy to rate limit or block malicious IPs

Scott Tolinski

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

Scott Tolinski

to find the honeypot as a honeypot

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Interesting.

Scott Tolinski

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.

Scott Tolinski

Mhmm.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Topic 5 09:48

Blocking requests by ASN can help prevent sophisticated attackers

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 6 12:58

CAPTCHAs challenge users to verify they are human, best defense but annoying

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

registered of Intuition Machines Inc.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

Cool.

Scott Tolinski

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,

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

Peace. Peace.

Scott Tolinski

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.

Share