Chris Elgee, Web Apps: A Trailhead | KringleCon 2019

Chris Elgee, Web Apps: A Trailhead | KringleCon 2019

Hello and welcome to KringleCon! Thanks so much for coming to this talk: Web Apps: a Trailhead Because web apps are really that, they’re the beginning of a journey. Just like those first few steps out of your door; you never know where a web app will take you. My name is Chris Elgee. I work for Counter Hack Challenges. I primarily build challenges and also I like breaking things. I’m a pen-tester and I teach pen-testing for SANS and there’ll be some some pen-tester style to how we talk through web apps today. And specifically the 3 things we really want to hit are the HTTP communications that web apps use like between browser and web server. We’re going to talk about parameters being in the URL or the address bar, and also in the POST body and then we’ll also talk about server side and client side code Web apps are all around us. If you’ve been on the internet for more than a day you have definitely interacted with web applications and When we think of a classic web app we think of something like here on the left. We’ve got this this online learning portal where you register for classes and and it feeds you video content. You take quizzes you chat With subject matter experts and and absolutely that is a web app. But even much much simpler things if you if you log into your town’s website to check, you know, property taxes or the merriment forecast for next week, even though it’s much simpler, that’s still a web application. There are still processes and decisions being made in the web server that drive the content that you see in your web browser. Now at the same time along with these kind of classic browser-based Web Apps we also have all the mobile apps that are almost just skins for browsers, right? A lot of apps, and here’s a screenshot on the right, of my phone and some of the apps I have installed on my mobile device. A lot of these are just trimmed down web browsers that browse a specific page with you know, maybe fewer, you know, options and frills that we see in a web browser. And even the ones that are fancier that are 3D multiplayer, you know, lights and sound, vibration, a lot of those apps are really speaking HTTP in the background. So they look like, you know, this specialized program, but it’s really in the backend, acting like a web app. And that background HTTP looks like this: Right? It’s a GET request. When you go to your web browser and you type in, it’s a GET request, and then instead of all this it’ll just be GET/ and then HTTP 1.1 By the way, these examples are in this version of HTTP. If you’re curious about the more modern HTTP2 You can go actually go back to a talk Chris Davis and I did last year on HTTP2 and that’s still on the North Pole server. So feel free to review that, but it’s not as good for, kind of, analyzing what’s going on, because it’s not plaintext like we see in 1.1. So so here’s a GET request is where my browser says: “Hey, I need this web page!” and then the server responds with something like this “200 OK.” So not a 404. I couldn’t find it. Not a 501 something’s broken. But a 200 here’s your webpage and then, you know, it gives a bunch of other stuff here, a bunch of security headers and and good old cookie “Hey, I want you to update your cookie with this value.” And that’s great. And then there’s this HTML and that’s where where the page that we’re going to view gets passed back. And we’ll look at that in just a second, but I want to draw your attention to this piece right here. Here we have in the in the URL as part of what you’d see in the address bar at the top of the browser You see an option. So it’s the page we want to see and then a slash and a question mark and then course. “course” is the name of a variable and equals pack. “pack” is the value that the browser is asking to get in that variable. So you might see this on like an online retailer where you’ll see, you know a long web address and a slash and then question mark and then like SKU equals and some number and then it’s showing you that particular SKU, that particular item number, and that’s just Passing in the address bar this particular parameter Now if we if we want it to be a little less obvious to the user what’s going on. We can use a POST request. So it’s again something the browser does but instead “get” it’s just a different verb It’s “post” and it’s POSTing to a page and here instead of anything after this this trailing slash here All the parameters are down here in the bottom They’re in the POST body so they can’t be modified by the user just by clicking in the address bar and changing things but it’s still data that is coming from the client that we as Enthusiasts, as hackers, pen testers, or whatever, that we can manipulate and send to the server for it to then Give us back some HTML Now… HTML what does that look like? If you’ve never done this I encourage you to go to a web page, any web page. Right click and pick “View Page Source,” and you’ll see stuff like this You’ll see tags with angle brackets and this is setting a header, Elf U Course Registration. And then, you’ll see you know Tags like this script and this is where we see a bunch of JavaScript. This particular code actually runs the Elf U library, the book store code and it helps our browser figure out when to show how much — when to update the amount of money we’ve spent or we’re gonna spend To update the you know, how much money we have left and that’s all great. That’s all on the front, it’s all in the browser. It’s all in the client. It’s stuff that we can see and manipulate. So if we want this this web page to show us something a little different We can modify this code in our browser and see it a different way Conversely, let me grab a pen here Back-end code so code at the server, server-side processed code might look like this This is some web code written in Python A lot of web code is written in you know .NET or in Perl or PHP or whatever I like Python because it’s relatively easy to use and Especially if you want to teach your kids to code. My son Josh loves Doing a little bit of Python now and again. And we can use it with libraries like Flask and Django and CherryPy to actually make it run a web page. So this specific function here does a bit of HTML escaping and that’s just where you know when I as a pen tester I’m looking for some like SQL injection I might use the good old-fashioned single quote character to try to insert some SQL Statements or portions of a statement into a web app. Maybe if I’m looking for HTML injection or some kind of cross-site scripting attack I might use these angle brackets To insert my own code into you know, what’s going to be Handled by my system and other systems. And this function here invisible to the user just takes these kind of dangerous characters and Sort of nerfs them into just HTML escape characters. So rather than passing a raw Less-than symbol in the past this ampersand LT semicolon, which which won’t execute as code in a browser There are lots of other functions that can happen on the back end certainly pulling in video or enabling a chat with somebody else Here’s a function that does some some hashing. So maybe we’ve got some parameters We’ve passed to the client and then the clients going to make some decisions and then pass them back We want to make sure they haven’t changed certain things So we might use you know, in this case a hash to to verify the integrity of the information they’re passing back. So, all kinds of stuff can happen on the front and back but we need to make sure that anything Important that happens in terms of processing is done on the server side because the client has much much less control Over how things are processed on the server side So let’s look at a concrete example here This is Elf U course registration page. I got here, I’m ready for the semester to start and I see I’m already registered for Toy-Making, Choir Practice, and Merriment Theory. That’s great! Those are all standards around here at Elf U. But then I get to pick an elective So maybe I want to get in Advanced Painting, Toy Sounds… I need to brush up on my Sleigh Packing Theory But I’d really like to get into Elf Dentistry. Hermey got me turned on to that, I think it’s a really burgeoning field negative unemployment rate and But I can’t because it’s it’s full when the code was passed from the server to my browser My browser was told to disable this button because there are zero available seats of the five, so I can’t register. Well, that’s a drag so I picked something else, I pick Advanced Painting, and then as I go forward, I can see that my browser passed that parameter to the server in the URL. We can see it up here in the address bar. Here’s the new page I’m on, I’m on /store, and this parameter “course” is being set to the value “paint.” Well, that’s interesting. Where does that even come from? Let’s look at the source code. So I’m gonna right click “View Page Source,” or if you like keyboard shortcuts Like I do control-U or command-U and we can actually see the source code of the page and a lot of it at the top there Is just kind of formatting CSS prettiness, colors, and fonts, and stuff. But then down here, we see most of what makes the page itself So we see, this looks like our table that had the headers, course, size, and vacancies I’m gonna use Control-Tab here to swap between… “course, size, vacancies.” Yep! And then If we look at Advanced Painting, let’s highlight that line… I can see It’s a button Named “course,” with a value “paint.” Well, that’s what I saw in the URL, right? I saw “?course=paint” So what if I wanted to do dentistry instead? looks like I would need to set course equal to… “teeth.” So how about I try that? How about I pick any one of these… Toy Sounds, and it says “course=sound” and I see at the bottom, it was processed on the server side and came back: “Welcome to Toy Sounds.” But what if I change that to… teeth BAM there we go. “Welcome to Dentistry,” the course I wanted. So again, it was just messing with this parameter up here in the address bar. There’s never there’s never just one way to do things. Here’s another way to do the same thing in this instance I could use this little element chooser and then I could pick any element here in the web page Like this disabled button and I can see the code just like I did when I was looking at source But now it’s kind of interactive so I can I see the button and submit course Equals “teeth” and then I see this attribute disabled. Well what happens if I just delete the disabled thing? Oh, it looks like the button is enabled now so I can click it and There we go. F12 begin to hide that console. I’ve got “course=teeth,” and I’ve got “Welcome to Dentistry.” Awesome. So a couple different ways to get to where we wanted to get just by manipulating Things on the client side because apparently on the server side they weren’t checking to see if the class I chose was full. So, great. So one more example here and this is where parameters are passed in the POST body. So it’s not as obvious as it being right up in the address bar But if I pick something like I need a reindeer brush, I want a couple pairs of extra elf shoes I want to buy some snacks, because who doesn’t love snacks? This guy loves snacks some sugar pills and maybe some — I got 30 money left… So I can’t do 35 wood screws. How about I do 30? All right Now it says I’ve got enough of that to go. interestingly if I try to overspend, this Buy button doesn’t work But if I take a number that does work I can click forward But what if I want to maybe get a whole bunch of extra elf shoes? And maybe I want to try to manipulate things here on the client side. Sometimes It’s as easy as just putting in negative values right? Maybe I can just put in negative 2000 snacks and then that comes up comes up with You know that’s gonna cost me negative ten thousand and then at the end here I’m gonna start with 200 and actually have 2130 left over. And then all this information will get passed as a POST body parameter so it won’t show up in the address bar, like course does but it’ll still get passed Unfortunately, in this case the Elf U servers do do some server-side Validation and they do see that there’s something wrong with what I’ve asked for. So that’s failed. So that’s good And that is absolutely the way we want to protect ourselves with a lot of these things We want to mistrust whatever the client is sending us in these types of situations. So With that, that brings me to the end of the of the presentation Are there any questions about Web Apps and kind of how they’re used? Mm-hmm Yeah, thank you, icanhazpie. Yes, there are hints in this talk. All right. Thanks very much

Danny Hutson

3 thoughts on “Chris Elgee, Web Apps: A Trailhead | KringleCon 2019

  1. I remember using this kind of trick to log into my own health insurance. The registration had no validations on passwords, so I gave it a nice long one. Then, only on the login page, they had an HTML validator that limited the number of characters you could enter for your password. My long password was suddenly invalid – but a little modification of the html and the problem magically disappeared so I could pay their darn bill. >_<

Leave a Reply

Your email address will not be published. Required fields are marked *