Hasty Treat - CSRF Explained

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 TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

CSF.

Welcome to Syntax. In this Monday, hasty treat. We're gonna be talking about CSRF or cross site.

What's the r stand for, Wes? Request.

Request. Forgery. Yeah. Forgery. Nana. Sura serif. Surifed. Cross site. Request. Forgery. Oh, you even wrote it out here. Oh, my.

So CSRF explained.

That's what we're gonna be doing in this episode.

And, to if you can tell by that intro, I am just a little bit under the weather today. So, you know, things are things are moving. My name is Scott Talinski. I'm a developer from Denver, Colorado. And with me as always is Wes Bos.

Hey, everybody.

Hey, Wes.

This episode is sponsored by 2 amazing sponsors. One of which is Prismic, and the other is Sentry. Do you wanna talk about Prismic, and I'll drop a Sentry? I do. They just announced some really exciting stuff, So they just raised

$20,000,000.

They are going all in on slices. So let me tell you what Slices are. I've talked about them before because I think it's a really nifty thing. So Prismic, it's a CMS for your website.

And they are going all in on this thing called slices, which is, reusable pieces of your website because Sometimes you have, like you go for, like, this, like, no code solution where you drag and drop everything, and and that's not enough. Or you Swing the other way, and you go code everything. And that makes the the people mad who are, using the website because they want a little bit of flexibility. So The Prismic's going all in on the slices thing, which is you create reusable sections of your page, cards, sidebars, Video viewer, a person component. Basically, like you do in your React application, you make all these different components, but you mirror all those components to Your Prismic, and then they can then just be inputs, which are called slices in your Prismic. And then the person that's using the website can just sorta click Together, all of these slices into a page builder. It's funny because before they made this announcement, I don't I didn't see them use the words like Page builder anywhere, but that's what I was using in some of the ad reads. And now when they announced this huge funding round, they are saying, You sort of package them as a branded page builder, and you can click them together.

So so cool.

I'm pretty excited about this. Also, they launched Really, Scott, you have to go to this website.

Go to prismic.i0 and go to the announcement URL at the top.

They just made this unreal, f. Trippy space time scrolling experience where everything it's really smooth.

Space time scrolling experience.

Go to the announcement.

Click it. Let's see this thing coming at you live from Denver where this type of thing is. This type of thing happens every day. F. Okay. Let's scroll down here, deep dive into the Prismics.

Woah. Yeah.

Hey. That reminds me of a Cornelius music video.

Okay. Very cool. Yeah. So check it out, prismic.ioforward/syntax, but also check out the announcement

Page, because I'm just looking at the source of it. I wanna know what it was built in as it is really slick. Yeah. It is really slick. And you can you can scroll backwards into it too. So if you scroll up, it Goes backwards, which is probably low key pretty tough. It's done with Canvas, so maybe, I don't know. Greentock or something. I'm not sure. Probably. Yeah. Either way, slices better save me one.

Yeah? Oh, man. What else who else are we sponsored by? I always make jokes like that with Landon. He has a a book of dinosaurs, and there's a a saltasaurus.

And I always say, Saltasaurus.

Yeah. Where's the Peppersaurus? Oh my gosh. He just goes, dad.

So we're also sponsored by Century at century.i0.

Now Century is the coolest area exception to the mailing service. And, you know what? I just saw something pretty neat in there. They now have a for review tab.

So you could now say, okay. Here, just like GitHub issues or anything like that. Like, this is while you can tie these directly to GitHub issues, if you wanna tell a specific Sentry user in your team to review Use some of these. I can put it in a to review tab.

In that way, people can take a look at it, and it's just another way to sort or have them Catalog, you can even have, like, some saved searches and stuff. So that way, if you're anything like me, chances are you have errors on your side. So so So what Century does is allows you to see them all in a big table, and this allows you to filter and control that table just a little bit more, which is really good the more and more, not only the more errors you have, but the more people you have working on the site, the bigger the site is. There's bound to be different things. And there's also a new dashboard that showed up that you can customize Errors by country.

Looks like Canada is responsible for only one of my errors. So good job.

Good job, Canada.

This is pretty neat. So Sentry is always dropping new stuff. Check it out at century.i0.

Use the coupon code Tasty treat, all lowercase, all one word. You'll get 2 months for free. Thank you so much for Century for sponsoring. Okay.

CSRF cross site Request. Forgery.

What is it, Wes? We talked about this

very shortly on the, like, build your own authentication episode, But I thought it was worth going into a little bit more in a little hasty. So the idea behind CSRF, that's what I'll be calling it because I want that's a a mumble of words f. Say is that, generally, you you build your website, and you have endpoints on your website which can do things like add items, delete items, sign up, change your password, send an email, all these different endpoints. And in order to do that, you generally make a request to that URL, Whether that's through traditional form submit or whether that's through an AJAX request, you're generally hitting a get, post, put, delete Request to those endpoints.

And what happens is that, generally, you're signed in to a website, and your website you you throw down a cookie on that website.

And then any any further requests to those URLs, they will be checked to make sure that you're signed in before they actually go ahead and add or delete an actual item. Now what can happen is that if you are signed in to your website, Let's use bank.com as our website example.

And you visit scottdalinski.com.

What can happen is that Scott can actually trigger a request to bank.com from his website.

At the very basic, you could just have a a form input.

You can autofill, send all the money to Wes. And then as soon as somebody hits that page, it will go ahead and submit that, submit that form to the actual other website. And because you're using just like regular submits, Course is not necessarily going to protect you there because you're literally visiting the website. So that is what is called a cross Site request forgery, meaning that somebody forged a request from your website and then actually ended up on bank.com, and they can do all kinds of nefarious things like Send all of your money to somebody, delete your account, whatever.

So the solutions to that are, there's a couple of different solutions that you have here, and you can you can sort of layer them on together to get more and more security. We'll just go through, a couple examples here. The first one is the same site cookie. Have you used this one on yours when you were doing the auth, Scott?

Yeah. And I included a little bit of a blog, a medium post that I actually really liked because the same site cookie, I don't know if I found it Explained that well, but this is just a property that you can set in a cookie that determines essentially who gets the cookie. So the default value in most of modern browsers is LAX, which is actually kinda funny. I don't know why is it why did they choose the word of LAX? I mean, is that for relaxed? Is that it's is that the origin of lax, do you think? I think so. It's like it's relaxed. Yeah. Yeah. Like, I kinda like that. Some slang in in code? Yeah. It's it seems slangy to me. Like, I you know, can we have, like, a chillax in, something like that? That'd be that'd That'd be pretty sweet. Oh, it's it's in the it's in Merriam Webster dictionary.

Lacks. Oh. A deficient affirmness, not stringent.

So, yeah, it is a real word.

Today, I learned that it's a real word and a non slang.

We can be exposing me as a dumb guy here. Alright. Lax is the, the default value, by the way. So, basically, what This means is that cookies are allowed to be sent with a top level navigations and will be sent along with get requests initiated by third party websites.

The cookie is withheld on a cross site sub request such as calls to images or frames, But is sent when a user navigates to a URL from an external site, such as following a link. Okay? So that's lax strict.

As the name suggests, this is an option in which the same site rule is applied strictly.

The cookies will be sent In a first party context and will be not sent along with the request initiated by third party websites, and then none is sentinel context.

So, basically, you could think about this as none is they don't care. They'll just send the cookies. Strict is they're only gonna send it to the 1st party sites and lax as they will send it to third party sites in some contexts.

So in our example of scott.com, submitting a request to bank.com and stealing all of your money. In that case, strict would have disallowed it because The request originated from scott.com, and it's gonna say, oh, okay. Because this request didn't originate From bank.com, I'm not going to I'm still gonna send the request to the server, but I will not send this Cookie along. And in that case, it's gonna it's gonna look like the person is logged out, and then none of that stuff should happen. Word.

Next one we have here is a CSRF token, and you'll you'll see this pretty often. Most frameworks, Laravel, Ruby on Rails, they will come with c r s CSRF built in, and then you can also npm install packages for these things all the time. And the way that it works is that when you load a page that has a form on it, you will generate a token. And then when you submit that form. The token comes along for the ride. If you ever inspect element on a form, you'll see input type of hidden value is equal to CSRF, And then there'll be a long token in that. And what that will do is that on the other side of things, when the server gets the request, it will then check that the token came along for the ride, And any requests that are getting sent along that do not have a token or have a incorrect token will be rejected.

And, also, you should say that if you're using the same site cookie, you don't need a CSRF token as well. At least, that's My understanding is that is that your understanding as well? Because I saw somebody saying that it was just security theater to do that. Yeah. That that's a good question. Like, I I I would like to throw this out to the people that listen to this podcast because I'm just reading,

reading this Website that we have linked up in the show notes, and it said it should be this should be used in addition or with some of these other ways that we have it. And I don't know necessarily why. Maybe there are some, like, blind spots that it has, but I would imagine that strict would be It'd be just fine. And I think maybe in some cases, people can't necessarily do strict Mhmm. Because they do want to

Share data between domain names. Right? Yeah. And and I know we have some listeners who do work in, like, banking software, and they have, like, audits For there, I it's funny that you're using this bank example, but I know definitively after the authentication, we heard from a couple of, listeners who who work in in banking software, and they they have to have, like, security audits, and they give us, some good information about some of that stuff. So I I do wonder if, like, There's, like, a good, better, best level here in terms of, like, what you need. And if you but, like, maybe you said maybe this is this is for, like, If you do need to have it lax and not strict. It says right here, it is important to note that this attribute, being the same site thing, Should be implemented as an additional layer of defense,

in-depth concept.

The attribute protects the user Through browser supporting it and contains a two way bypass as mentioned in the following section, the attribute should not have replaced the CSRF token. Instead, it should coexist With that token Woah. In order to protect in a bro more robust way. So I think also there's browsers that do not the SameSite thing is new. So maybe there are browsers that do not support SameSite, and in that case, you're just it's kinda setting it to none. Right? Yeah. Yeah. That makes sense. This cookie stuff is is really tricky because the browsers are trying to protect you in the best possible way, But then it also gets really tricky and also breaks older software.

So you'd sort of have to do a deep dive into this, especially When you're going across domain. Yeah. Totally. What else we have here? Check origin refer header. So this is a this is a really simple way To fix this as well, so when you get a request, you will get headers that cannot be set by anyone. So these are Immutable headers, meaning that, like, you you can't just overwrite these headers, and they will give you origin and referrer headers, and they will tell you Who is submitting this request? And if they are not coming from the origin that you're expecting, maybe have an array of a possible allowed domains, Then you can go ahead and reject that. So that'd be pretty simple to build a express middleware or literally any middleware in there Saying, check for the origin. If not, reject it. It that will be available on request headers dot origin and request headers dot referrer.

Did you know that refer was when they were implementing it in the browser, they initially spelled it wrong? So now And now for the rest of time, there will always be a referrer with 1 r and a referrer with 2 r's. Oh, wow. And as somebody who, honestly,

I'm I'm not good at spelling. Somebody who's not good at spelling, that's the kind of thing that will goof me up for life because I'll I'll see that, and I'll be like, which one of these is correct? I don't know.

That's that's like gold for a type of word I would misspell.

It's true. I don't even know what the right I'm assuming that two r's is the right one. I don't know. They they all they both look wrong to me. If we if we paste both of them in here, they both look totally wrong.

Oh, I googled referrer with 2 r's, and it popped up on Wikipedia for referrer or referrer. So, yeah, The misspelling of referrer was introduced in the original per proposal by computer scientist

Philip Hallum Baker. Oh, no. It calls him out by name or oh, man.

Oh, Mac, imagine. It's your dad. Yeah. They're, like, in the textbook of computer science. Spelled it wrong. Yep. That that's your your stamp on the industry.

What other ones we have? You can throw a CAPTCHA in there. So CAPTCHAs are a great way to check against Automated sending of something so you can throw a caption in there. You can ask the user for their password. You see that on GitHub a lot. If you do anything that's somewhat dicey on GitHub, they'll ask you to Put your password in, and they can also ask for a a token when doing any of those. But in a lot of cases, you can't ask for a token when somebody's trying to Edit or delete something every single time because that's that was really that's a really frustrating user experience.

Yeah. Total.

So that's CSRF.

Let us know if how you have implemented in your application at Syntax Event. We'd love to hear what your strategy is for doing this and and what also what your thoughts are For how much is enough to safety in your case? Word.

That's all I got too. I don't have anything else, but,

Somewhat difficult stuff, to be honest. Totally. Totally. And that's what's nice about using, like, a premade framework.

You shouldn't necessarily have to go down All these rabbit holes and learn all the stuff yourself. You just know that a framework has you covered, and they'll they'll take care of all that stuff for you. Sick. Cool. Well, we will catch you on Wednesday for the next syntax. Peace. Peace.

CSF.

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.