oh everyone it is heads here um today we are going to be looking at a front end vulnerability. So if you're looking at our code for the server itself, we have an invulnerable app dot pi and you can see it's not doing much, it's a front end vulnerability. We are going to fix it using python. So this is definitely still python related for all you python east is out there, who would get angry if I just made this about javascript. But as you can see in the code invulnerable laptop, I literally all we're doing is just sending this static file and we have a static folder where we serve some CSS so not much going on here just sending a static file. We might as well be using engine X for this. Um but yeah, here's the actual web page says hi welcome to my super cool web page and this is where the vulnerability is going to be here on the front end. So the html is very simple. But if we look at this script, it says that we retrieve a theme parameter from the U R L. Query. I wrote this code normally I would live code this But it's a lot of front end code and I just didn't want to waste your guys time with me googling and going on stack overflow for like 30 minutes. I mean not that long but you know, it's a it's just me googling cause I always forget like these dom manipulation things even though they're super simple. I always forget which one is which. So anyway, I just have this ready? So we retreat a theme parameter and it works like this. You can add dark mode like this by saying theme equals dark. Cool. Normally there would be like a button that would do this for you. We can say it to anything other than dark and it'll just go with this default, which is which is actually just the user agent style sheet. We can set it to dark and it goes to dark. Cool, How does it do that? Well, we get the theme parameter, this theme parameter And if it exists, if they've said it to anything, then we'll try to get a CSS file Well, we'll try to get it, we'll grab it right? So I'm getting ahead of myself. We grabbed the parameter if it exists and if not we set it to light, then we create a link element that we can import a style sheet and we just say whatever whatever whatever parameter they gave us import that dot CSS. As you can see, the only existing file here is dark about CSS. So if it's anything else, it's just gonna be nothing. It's going to be a 404, which will cause it to be it's just default style. But if it's dark, it'll work. So we say whatever they gave us get that dusty assets that we can have a lot of different styles from the front end and just grab whatever file we need. All right. So we see the logic that our Junior dev Dave has put in here he's so proud of himself. Cool. We're gonna have dark mode, you know, he'll probably add a little button so it's really convenient. Um Wonderful. What's the issue? Alright, let's get to the fun part. The issue is that we are just saying, hey, in inside of this, uh I'm gonna go inside the browser and just show you guys in the inspector. Let me make this bigger. The issue is here. Right? So when we say dark inside of our head, we have this link where we're gonna grab dark dot CSS, We give it dark, it gets dark dot CSS. But the problem is we could put any link we want to right here and that's where hacker harry enters the picture and says Junior dev Dave I see you just allowed me to put anything I want there. Dot CSS. That means I could import my own CSS file on another U R L by going https Colin Colin you know, evil site of mine or I don't know, hacker harry dot, you know dot net slash whatever. Can't say whatever dot CSS because we already add dot CSS If you look at the code, we add dot CSS. So we would just say whatever and it'll add dot CSS and now we get to run the attacker controlled CSS. But that's fine because we're just doing it to ourselves. But the problem is that if we get someone else to click this link, they're going to go to the site and we'll have CSS that the attacker is adding. In other words, it's it's a reflected attack, similar to reflected cross site scripting. Where if you can get them to click this, what should be a legitimate link? You can run, you can run javascript but in this case we'll be able to run CSS So what can we do with that? There's a few things we can do. We can use CSS to launch javascript to launch a cross site scripting attack. That would be bad. Right? Um we can use it to steal content from the page. But as the name of this video suggests, we're just gonna use it for fun. We're gonna deface the page and that can be malicious to. Um You often see adware doing this where they insert an advertisement onto a page, you can get their I. P. Address, uh figure out what what operating system they're on using the user agent. So we're not gonna do any of that cool stuff. We're just gonna do something silly. You've been hacked? How are we going to get it to say that? Well, if we go back into the code, you'll see I have this external. This is basically our payload. This is our our evil code. What it does is it says, hey, set the body to have a background image and the background image is going to be this? You've been hacked things. Okay. So I have it here on, get hub evil dot CSS. We're gonna set the theme to equal that. Oh hey, it didn't work right Because now it's going to be here. If we look in the browser again, we'll see that it's set to evil dot CSS dot CSS because we add the word dot CSS that way. They can just give us the theme is dark instead of calling it dark dot CSS, they just call it dark and we grab that file dot CSS, right? So just say evil. So hey, we're going to local host. Cool. That's our website. So you know, our victim knows this is legit because it's on the website. Right? So no worries. And or even if you have some sites that prevent external links, that won't prevent this because it's a legit link. Right? We go there, click it and I don't know what did I do wrong. Let me take a look real quick. Oh, right. I had actually, uh, when I was testing this, I had it out in the fix, I got to get rid of it. I'm about, we're obviously about to fix it. So I tested out a fix. Okay. Let's see. Maybe I must have left have left to fix in there somehow. Hmm and unloaded in. I'm gonna load it in chrome because I think, I think it's cache the page. There we go. You've been hacked? No, no. What have I been hacked? Well, as we see it's loading up the U R L. We tell it to write. It says, okay, um, do we have the theme parameter? We do. You can be looking if you'd like in index, oops, index dot html. It says do we have a theme parameter? Yes, we do. It's set to jesus Alex v dot the I O slash podcast slash evil great, create a CSS linking element and import that dot CSS and put it on the page. So we have defaced this web page now. Our users are complaining saying, oh no, they've been poked. They've been postponed. What are they going to do? And that's where senior dev Samantha comes into the picture and decides to use a content security policy. What is the content security policy? It is. It's an http header. You can add that the browser received and it tells it, Hey, browser just so you know, um, here's the way we expect this page to run if anything other than this happens. Block it because it's probably a hack. It's very powerful and it's a very important part of web application security engineering. In our case we are going to use this header first. Let's set the header up. So finally we get to go to python, I know that this this this cast is called like web security with python. So this is probably the part you guys have all been waiting for. Alright, so peeps, let's see what we're going to do. We're going to serve a header. So to do that instead of just returning our app static file, we can return a dictionary, we return a dictionary, it'll interpret those as headers. We can also put a status code here. So just some flask 101 thing is that I've been learning along the way. So we create this header called content security policy, we set it to whatever we want and what we want to say is, hey, don't allow external style sheets to be loaded. In other words don't allow style sheets from other um origins from other websites to be loaded. This will also this can also block in line style sheets, but we're not using any of those so we don't care. So we all we have to say is style source, this stuff use double quotes because self has to be in single quotes and I don't want to escape the quotes. Self, that's it. That's all we have to do is I'm gonna refresh the page just to show you that it works wonderful. And we even get in the console here. We see that this is blocked if we look at why I think it'll actually tell us that is blocked by the CSP, yep, blocked reason CSP. And if we look at the javascript console, we'll get something saying refused to load the style sheet because it violates the following content security policy directives. This is wonderful for debugging because often style soften content security policies will block things that you don't want them to block and it's hard to figure out why what's black and white. Um Style source. Self note that Style source Lm was not explicitly set, so style sources used as a fallback. Okay, so in other words, Styles to ourself is blocking us from loading a style sheet. Oh no, but really? Oh yeah, because that's great. It's fixed a super simple fix. There are obviously other ways we could have fixed this. I chose to use the content security policy. Why did I choose to use the Content security policy? Because it involves a python. Um Another thing we could have done just to just for the sake of thoroughness is instead of just loading whatever they say to load um we could load this from an explicit array of options. Okay, so what I mean by that is instead of saying get their theme and just load it, what we could do is say, we could say something like if we could have like a list of allowed themes basically. So allowed themes equals um you know, light and the dark. And then we could say if allowed themes does not does not include whatever theme they gave us the theme. Right? Or rather we can say if it does include it, then it's legit. So let's put this here. So only if it includes this theme. Only if our list of allowed themes include it. Do we do all of this other stuff. Okay, that's another approach we could have taken to this, but I decided to do an approach involving python and flask just because that's kind of the focus of this course. So I hope that's helped you. I hope you have a better idea of what can be done using CSS injection, how it can be accomplished. I know I kind of skipped over a lot of this logic. Um basically we're just inserting a CSS link using whatever theme they give us dot CSS and that's where the vulnerability comes from, right? Because we're expecting this to just be something like the word light or dark, where it will automatically use a relative path. Right? Like local host. If you just put, if you just put, you know, light by default, it'll do local host 5000 slash light and we have dot CSS But they if they give an absolute path, like http, you know, evil dot test slash pack. It'll load that CSS that's an issue because CSS can do a lot of things on a web page, you can insert content, it can track keys even it can track the content on the page. Um It can do all kinds of snooping, I'm not sure, I think, like, if you look up, I forget what it is, but there's something about C. S. S. Tracking that just shows you all the insane stuff that you can use CSS for to track. This is just using letter spacing. There's a lot more um It's really great resource I read about a year ago that talked about all the wild things you can do with CSS that let you fingerprint someone basically. Yes CSS fingerprinting that's what it was. If I can find it. Yeah CSS fingerprint. So the site here is CSS tracking dot deV and it gives you all these wild different crazy crazy strategies you can do it, it's really cool and it actually lets you get tracked if you want to as well. So CSS will fingerprint you from there, let's see if it'll fingerprint me, my theme preferences, light, it has the width and height of my device, it tells you that I'm not a touch screen. Um I'm using chromium on an unknown operating system, W. I. P. Version my color gamut and some other cool stuff and there's actually a lot more than this you can do. But yeah, there you go. CSS injection. That was fun to talk about. I hope it was fun to learn about uh if there's anything you think can be improved, definitely hit me with a comment. Um Any any suggestions for how you might exploit this. I'm happy to hear it. Thank you so much for your time. Bye bye