Hasty Treat - CSRF Explained

CSRF Yeah. Total.

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.

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

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

What is it, Wes? We talked about this

low key pretty tough. It's done with Canvas, so maybe,

You sort of package them as a branded page builder, and you can click them together.

Go to the announcement.

Errors by country.

who are,

Okay. Very cool. Yeah. So check it out, in your Prismic. And then the person that's using the website can just sorta click Together, 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, Course is not necessarily going to protect you there because you're literally visiting

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

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

They just made this and your website you you throw down a cookie on that website.

Click it. Let's see this thing coming at you live from Hey. That reminds me of a Cornelius music video.

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

and go to the announcement URL at the top.

$20,000,000.

And, to if you can tell by that intro, I am just a little bit under the weather today. So, 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.

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

reusable

And I always say, Saltasaurus.

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

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

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,

explained.

Woah. Yeah.

all of these slices into a page builder. It's funny because Go to prismic.i0 Sometimes you have, form submit

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.

Yeah?

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,

Request.

What's the r stand for, Wes? The cookie is withheld on a cross site sub request such as calls to cross site Request. Forgery.

unreal, it's really smooth.

And they are going all in on this thing called slices, there will always be a referrer with 1 r and a referrer with 2 r's. Oh, wow. And as somebody who, honestly,

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 What other ones we have? You can throw a CAPTCHA in there. So CAPTCHAs are a great way

Good job, Canada.

like you do in your React application, you make all these different components, but you mirror all those components to 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, 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.

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

Hey, Wes.

Yeah. Where's the Peppersaurus?

for your website.

which is, it's a CMS to safety in your case? Word.

you know, things are things are moving. My name is Scott Talinski. I'm a developer from Denver, Colorado. And with me as always

where everything now for the rest of time, When you're going

Space time scrolling experience.

Oh my gosh. He just goes, dad.

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.

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.

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

Your Prismic, and then they can then just be inputs, which are called slices but also check out the announcement

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

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.

is Wes Bos.

In that way, people can take a look at it, and it's just another way to

So

I don't know. Greentock or something. I'm not sure. Probably. Yeah. Either way, slices better save me one.

And what happens is that, generally, you're signed in to a website, a person component. Basically, 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 Ruby on Rails, they will come with c r s CSRF they are saying,

to those endpoints.

in order to do that, you generally make a request to that URL, for Video viewer,

Whether that's through traditional

or whether that's through an AJAX request, you're generally hitting a get, post, put, delete element on a form, you'll see input type of hidden

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,

to get more and more security. We'll just go through, the actual other website. And because you're using just like regular submits,

a couple examples here. The first one is

there's a couple of different solutions that you have here, and you can you can sort of layer them on together

are, value is equal to CSRF,

What can happen is that Scott cards, sidebars, 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,

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

from his website.

Send all of your money to somebody, delete your account, whatever.

So the solutions So so cool.

submit that form to Request

Let's use bank.com

And then any any further requests to those URLs, as our website example.

and then actually ended up on bank.com, and they can do all kinds of nefarious things like

the website. So that is what is called a cross Site request forgery, meaning that somebody forged a request

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

can actually trigger a request to bank.com

it will then check that the token came along for the ride, And any requests that are getting sent along So that's CSRF.

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 you visit scottdalinski.com.

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

I mean, is that for relaxed?

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.

that do not have a token or have a incorrect token will be rejected.

and f. Trippy 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

As the name suggests,

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 from your website

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, referrer or referrer. So, yeah, The misspelling of referrer was introduced in the original per proposal by computer scientist So you'd sort of have to do a deep dive into this, especially space time

Laravel,

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.

submitting

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?

images or frames, and then none is sentinel context.

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.

this is an option in which the same site rule is applied strictly.

Next one we have here is a CSRF token, and you'll you'll see this pretty often. Most frameworks, 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 Hey, everybody.

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

not stringent.

but this is just a property that you can set in a cookie

So, yeah, it is a real word.

Monday. Monday. Monday.

CSF.

Boss, and Scott, El Toro Loco,

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

Welcome to Syntax. In this Monday,

Tolinski.

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

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

show.

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

Head on over to syntax.fm

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.

For how much is enough

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

that refer was when they were implementing it in the browser, they initially spelled it wrong? So now

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

And very shortly on the, like, build your own authentication that was really that's a really frustrating user experience.

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.

Did you know to check against 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.

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

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 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 it popped up on Wikipedia

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

in the best possible way, But then it also gets really tricky and also breaks older software.

The attribute protects the user Through browser supporting it and contains a two way bypass as mentioned in the following section, pieces of your website because

in-depth concept.

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?

Mhmm. Because they do want to And if they are not coming from the origin that you're expecting, maybe have an array of a possible allowed domains, prismic.ioforward/syntax, So in our example of scott.com,

the browsers are trying to protect you 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 the same site cookie. Have you used this one on yours when you were doing the auth, Scott? Oh, I googled referrer with 2 r's,

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,

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, hasty treat. We're gonna be talking about CSRF or cross site.

you will get headers that cannot be set by anyone. So these are Lacks. Oh. A deficient affirmness,