 What's up, everybody? This is John Hammond looking at PicoCTF 2017 and trying to get into an introductory thing to enter the capture-the-flag scene. So we just finished off the miscellaneous category. Let's move into some other stuff. Again, the mentality, looking at simple, kind of low-point challenges to get that good, easy transition in. So let's go to the web exploitation of 20 points. What is web? The challenge prompt is, someone told me that some guy came up with the World Wide Web using HTML and stuff. Can you help me figure out what that is? And then there is the website link. So we can click on that. It will bring us to this page, eventually, depending on my internet connection. Okay, cool. Zoom in here and I say, hi mom, look what I made. I use some tags, more tags. Here's my cat. There's a button that says, click me to say hello. If you click on that, it says, hi there. And that is about it. You can control A to select everything if you wanted to, but no, like, invisible text jumps out. So what are we supposed to do here? Let's take a look at the hint. It says, how can you figure out how the web page is actually built? So some of you may have seen before, if you right-click at any time, normally on a web page, you get an option to view page source. And that is the best way to examine the HTML, the hypertext markup language, or a markup language that defines structure and design and stuff for a website. So if you don't know HTML, that's perfectly fine. It's okay. It's not too hard to pick up because a lot of these elements, that's the name of them, have specific names. They're run by these arrows, these, like, greater than, less than arrows, walk-walkers, whatever. And they normally either begin and end these tags and these elements. Like, you'll see head starts up here, ends here, has a title, et cetera. But some of these tags don't have an end to them. They're just a standalone tag, like, break to create a new line character, or, like, to link to an external file sometimes, like, image, button, et cetera. It looks like these do. Maybe image does, whatever. It depends. So there's an HTML comment here. That's this green text down here. It says, cool, look at me. This is an HTML file. It describes what each page contains in a format that your browser can understand. So web browsers like Firefox, Google Chrome, Internet Explorer, are what handle all the stuff, right? They're the one loading the web page, getting and posting information back and forth between web servers. So that's good for our learning. The first part of the flag, there are three parts, is this guy here. Let's take note of it. I'm just going to put him up in the search bar. What are the other types of files? What other types of files are there in a web page? So you've got images, right? We just got the cat picture, but that doesn't particularly help us. Maybe if we were doing another miscellaneous category or some forensic stuff, we could examine that more. But there are other files that are being loaded here, like the CSS. So CSS is cascading style sheets, and that's what allows you to pretty much decorate your website. So that gets into color and layout and all the pretty things that can help design your page. So this is a link here. It's an href. So this is another file that's being loaded here. We can click on that and you can zoom in. There's a lot of nonsense here, and there is a crap ton of stuff that we don't particularly need to explore right now. But it has a license in a way, but there's another CSS comment. These denote a multi-line comment. It says, this is the CSS file. It contains information on how to graphically display the page. A separate file doesn't have to be a separate file. You can put them in line in your HTML pages. Same thing with JavaScript, which we'll explore next, but it's probably good to put them in an external file. This allows them to all be updated just by changing only one, which is that's a good plan. So they give you the second part of the flag here, which we will take note of. And let's go back. I hit the alt left key in my web browser and went back. You can just hit the button if you want, but I like to use the keyboard. Okay, so down at the bottom we have a script element that is a link to a JavaScript file. And you can see the source attribute here in HTML. All these things that are set to an equal value or set to actually be equal to a value in an HTML element are attributes. So script.js, again, it's another file we can look at. Zoom in here. This is a JavaScript file. It contains code that runs locally in your browser, although it is spread to a large number of other use cases. JavaScript on the web page is almost always client-side. You can have server-side JavaScript like Node.js and express stuff like that. But when we say client-side, that means it's accessible to you as the end user of a website. You don't have to own the server or have the physical machine that you have the source code to to see the server-side code. But you can see the client-side code that's being returned to you. So JavaScript is normally client-side code and you can always view that when it's packaged as part of your website. So there's a function here, but we do get the third part of the flag. So let's copy that, put that all together, and we will go ahead and submit that. Submit. Cool. Challenge solved. Let's just take note of that, make directory, what is web, cd, what is web. Take our flag and then mark that as complete. We could have just called the folder complete when we made it originally, but whatever. Cool. So web exploitation is one of my favorite things, but that obviously was just viewing the source of web pages. There wasn't a whole lot in that, but it is the building block and the foundation and fundamentals to get into learning and exploring things that take part in web exploitation. If you like that kind of stuff, you can check out my Over the Wire series on the Natus Wargame that gets into a ton of web exploitation and it's super duper cool. So hey, thank you guys for watching. Hope you are enjoying these. I want to send some love to my supporters here. So special shout out to these individuals. I cannot say it enough. Thank you for supporting me and what I do in the channel. $1 a month on Patreon will give you a special shout out in the video at the end of every video just like this. Can't wait for number 10. One will, $5 a month will get you early access to all the videos that I record. Because normally I record in bulk and let YouTube upload them gradually just day by day. If you want all the content immediately, when it's ready, you can just like donate that and that's the way to do it. Get it forever. Forever. For free. Well, not really free. Whatever. Forever. Forever is the only benefit. I have to stop this video right now. Thanks for watching guys. If you did like the video, please do press that like button. Maybe subscribe. Maybe you're willing to leave me a comment. Let me know what you think. And if you really want to support me, check me out on Patreon. Thanks.