6.1. JavaScript Basics: Code Structure, Working with Developer tools

 

Before delving into the XSS vulnerability and its exploitation/hacking methods, it is essential to grasp the fundamentals of JavaScript. JS is an integral part of modern web pages, allowing dynamic generation and modification of content. It is used to create beautiful animations and enables interactive user interaction with the page. You don't need to be a super-skilled programmer to successfully discover and test XSS vulnerabilities.

 

How to Use the Browser Developer Tools with JS

One of the ways to run and test JavaScript code is by using the developer tools panel, specifically the console, which is used for debugging code and displaying various messages.

To do this, press the Ctrl+Shift+I combination (the same for Chrome and Firefox) and open the Console tab:

Chrome Web deleopers console

Firefox web developers console

Now, try entering this code:

let name = "Anna";console.log("Hello, " + name + "!");

In this code, we declared a variable, assigned it a value, and then displayed the variable's content in the console. All declared variables and functions are stored in the console until you close the tab or the browser.

However, this method is not always convenient, so let's look at another way.

 

Linking JavaScript file with a webpage

This time, we will save the code in a file and open the file in a browser. In other words, we will create a local web page with the .html extension. To do this, open a simple text editor like Notepad. You can also use specialized editors like Visual Studio Code, Notepad++, and others, which are very convenient for editing code in various programming languages. Then, enter the previous code enclosed between the <script> ... </script> tags:

<script>      let name = "Anna";       console.log("Hello, " + name + "!"); </script>

Next, save the file with the .html extension. Run the file, open the developer panel with Ctrl+Shift+I, and go to the Console tab. The message “Hello, Anna!” will be displayed in the console. This method is used widely, when an HTML page is created, and JavaScript code (inline code) is embedded into it, which is not displayed in the browser.

This approach is convenient for small code snippets. However, in practice, another approach is often used. The necessary script is saved in separate files with the .js extension, and then these files are linked to the HTML page. In the same folder as the HTML file, let's create another file using Notepad and save the familiar code in it. However, this time we'll remove the <script> and </script> tags. Save the file with the .js extension. These tags are used only in files with the .html or .htm extension. Now, open the HTML file, remove the previous JS code, and insert the following line: 

<script src="/script.js"></script>

The src (source) attribute specifies where the script file is stored for later loading. The browser downloads the file and then executes the code. In principle, this is equivalent to the previous approach, but in this case, we separate HTML and JavaScript codes instead of mixing them into one pile. We can create multiple script files and then sequentially include them in the HTML file.

 

The structure of the code

The structure of the code is standard and simple:

instruction_1;instruction_2;instruction_3;function_1() {    various instructions}function_2() {    various instructions}

The code consists of instructions that are executed sequentially. Instructions are directives on what to do, such as assigning a variable, performing an arithmetic operation, or simply calling a function. At the end of each instruction, a semicolon is required.

All instructions and functions can be placed on a single line, but the presence of a semicolon as a separator is mandatory. However, for better code readability, it's common to write each instruction on a new line and use various indentations while writing the code.

 

Variables

Variables and their values are an integral part of any program. Variables act as labels for storing information in a program. They allow us to store numbers, texts, and other data for later use.

To create a variable, you need to use the keyword var or let, followed by a name. For example:

var variableName;let anotherVariable;

You can assign values to variables using the = operator. For example:

variableName = 5;anotherVariable = "Hello!";

Using variables makes the code more readable and understandable. They help you manage data and make the program more flexible. 

 

Functions

Functions are small subprograms that perform specific actions. You only need to write a function once, and then you can call it as many times as needed. Functions are useful when you have a particular action that you want to perform multiple times. For example, if you want to calculate the sum of two numbers or display a message on the screen, you can create a function for that.

Functions can take specific arguments (parameters) for processing. Additionally, functions can return the result of their processing and calculations to the place where the function was called.

To create and declare a function, you only need to use the function keyword, followed by a name you invent for your function. Then, inside curly braces {...}, you write the instructions to execute.

Here are a couple of examples for clarity.

Example 1: Summing two numbers:

function sum(a, b) {  return a + b;}let result = sum(5, 3); // Call the sum function with arguments 5 and 3console.log(result); // Outputs 8

In this example, we created the sum function, which takes two arguments a and b, adds them, and returns the result. We then call this function with the arguments 5 and 3, get the sum, and display the result on the screen. The return statement is used to return the result of calculations.

 

Example 2: Greeting:

function hello(name) {  return "Hello, " + name + "!";}let message = hello("John");console.log(message); // Outputs "Hello, John!"

In this example, the hello function takes an argument name and returns a greeting message with that name. We call the function with the argument "John" and display the resulting message.

 

Exercise 1: Write a function that calculates the area of a circle and returns the result. Call the function, passing the circle's radius as an argument, and output the result to the console. The formula for the area is S = 3.14 * r2.