Ways of using JS in cyber security

28 March 2023 13 minutes

An overview of the JavaScript language

When JavaScript was created, it had another name – “LiveScript”. However, the Java language was very popular at the time, and it was decided that JavaScript as Java’s “younger brother” would be useful. Over time, JavaScript became a completely independent language with its own specification called ECMAScript, and now has nothing to do with Java. JavaScript was originally created to make web pages come alive. Programs in this language are called scripts. They can be embedded in HTML and run automatically when a web page is loaded and send network requests to a remote server and download files to both the PC and the server. What you can do is add new html code, change and modify the existing content of the page, change styles (interaction by DOM). Scripts are distributed and executed as plain text. They do not require special preparation or compilation to run. User interaction displays a message, asks a question, shares location, turns on the microphone or camera.

So, JavaScript is a dynamic, prototypical programming language that allows creating interactivity on the user page and also stores data on the client side (local storage, local storage, indexedDB, Cookies). Classified as a prototypical subset of object-oriented, but also supports other programming paradigms, imperative and functional. Learning JavaScript will allow you to expand your capabilities in the development of web applications and websites, add animation, interactivity and much more. It is an essential tool for modern web developers and can help you create impressive web projects.

JS application options

  1. Creating a web application backend using node.js
  2. Creating desktop software products using Electron
  3. Creating cross-platform mobile applications using React Native, Ionic
  4. Creation of dynamic web applications on the client side using React, Vue, Angular libraries combined

Important postulates of JS

The following sections are important because developers experience errors at these stages, which in turn can be a potential threat that cybercriminals can try to exploit.

1. Modern web applications that use the latest technologies

  • storage on the client side
  • one or more web servers
  • React, Angular 2.0 and above, Vue.js
  • authorization and authentication system
  • one or more software packages for Apache, NginX servers
  • one of the backend programming languages: Python, PHP, Ruby, Node.js
  • one or more databases (MySQL, MongoDB, the list is incomplete)

In the past, namely about 10 years ago, web applications were created using server frameworks, sending the client a page with a basic set of files, the external part of the site (html, css, js). The interaction between the client and the server took place as follows, the user (client) wants to go to the gallery of the site, for this he requested another page (gallery) from the server, which was generated and transmitted via HTTP, and if the operation was successful, the user received the result in the browser.
Subsequently, developers began to use AJAX (Asynchronous JavaScript And XML) technology in combination with the jquery library. One of the main problems that AJAX solves is dynamically changing the content of the page where necessary, without reloading the page. With the appearance of the new standard ECMAScript 6 (2015), the js language has changed significantly, which gave rise to the creation of new frameworks Angular 2.0, React, Vue.js

2. Scope and variables

With the release of ES6, basic ways of initializing variables appeared in the js language

⦁ // global scope
nameUser = ”Ivan”;
⦁ // scope inside a function
var nameUser = “Ivan”;
⦁ //block scope
let nameUser = “Ivan”;
⦁ //a block scope that cannot be changed
const nameUser = “Ivan”;

The difference between the listed methods of variable initialization is that the variable is included in the global visibility area (window), which can be found in different methods. Also, this method can change the properties of the global scope. Not used by professional developers

A variable defined with the var keyword is bound to the nearest function or, if no function block is specified, is global. How to initialize a variable in a block system (which can be reassigned)

The error occurs because outside of the conditional if statement, the variable nameUser is unknown, so there will be an error.

The method of initializing a variable in a block system is similar to let, but it is impossible to reassign the content of a primitive data type using this method.


3. Functions

In JS, a function is an object. This means that they can be initialized and reassigned using variables and keywords.
Examples of functions in JS

⦁ function () {};
⦁ foo = function() {};
⦁ var foo = function() { };
⦁ let foo = function () {};
⦁ const foo = function () {};
⦁ () => {};
⦁ function foo(){};
⦁ (function() { })();

The first function is anonymous. She doesn’t have a name, so you can’t call her. Then, from the second to the fifth, there are functions of the type function definition expression, their peculiarity is that they are also anonymous, but they can be called. The sixth function is called an arrow, the difference between the previous entries is that it has a global context (this), while the previous examples have a context in the scope of the function. The seventh function of the function declaration statement type, the feature of the initialization method is that it can be raised (hosting). The eighth method is called IIFE (immediately invoked function expression). Such functions run immediately after boot and execute within their own namespace. They are used to encapsulate blocks of code from third-party sources.

An example of the seventh function

4. Context

As already mentioned in the js function, this is an object, the object has its own parameters, these parameters and the context. Also, in functions, all the data contained in the function is called the context of the function. The context can be changed during code execution. The this keyword is used to refer to objects stored in the function context. The message undefined shows, however, that the call to this.userName addresses the global context of the application, and it does not have such a parameter, unlike the tempFunc function.


5. Prototypical imitation

Server programming languages use inheritance (inheritance) based on classes. Unfortunately, there is no such mechanism in JS, there is syntactic sugar that simulates prototypical inheritance. In the inheritance system used in the JavaScript language, any created object has a prototype property. A constructor property is added to it, which points to a function that has a prototype property. As a result, any object can be used to create new instances of objects, because the constructor points to an object that contains a prototype, which, in turn, contains a constructor.


New objects in JS are created with the __proto__ object, referring to the prototype whose constructor was called when the object was created.
It is clear that the animal0 and animal1 objects are created based on the Animal object. Quite often, developers edit the object prototype, which causes confusion in the functionality of the web application. Here you need to pay attention, since when editing the data of the prototype, the changes are transmitted throughout the chain of descendants. There is a Prototype Pollution vulnerability in systems written in JS. The attack consists in the modification of the parent object, which automatically causes a change in the functionality of the children.

6 Asynchrony in JS

Browsers have to exchange data with servers on a regular basis, and the time between a request and a response can vary depending on factors such as payload size, latency, and server processing time. Asynchronous code execution is often used to control this variability.

Answer: foo bar temp
Answer Option 1:  foo bar temp Answer Option 2: foo temp bar

The modern version of js allows the use of async await keywords.

The difference between a synchronous and asynchronous call is that the response of a synchronous call will be unchanged, and an example of an asynchronous call may differ, as in answer option 2.

First, we call the congigUser object, then after the call is executed, we call the user data getUser, successively after the successful end of the call we set the user configuration also asynchronously.
The provided keyword async turns it into a promise, the other keyword await makes the interpreter stop and wait for the promise to be executed. In this case, the code outside the asynchronous function will be executed in the usual way.

7. DOM

1) DOM document object model – document object model. This is a structured representation of data used by the browser to manage state. In fig. the window object below is one of the top-level standard objects defined by the DOM specification. The DOM model helps in finding vulnerabilities and testing a web application at the frontend level.


2)A detailed example of how to manipulate dom elements using the web developer console (dev tools).
Go to any site, for example wikipedia.org (Click).


3) In the context of this task, we need to find all blocks with article languages that are available on the page and change the background color in an arbitrary order.

How to use dev tools to find the necessary dom elements?

Press f12


4) Move the cursor to the language section, right-click on the selected section, find the “Check” section in the context menu.


5) The web developer mode opens.


6) We analyze the html markup and find similar class names of dom elements.


7) In the screenshot above, you can see that each section has a common class name “central-featured-lang”. We go to the console and use the code to search for the necessary elements.


8) We create a variable “getAllSecton” and assign it a node list with dom elements of sections of the Wikipedia site. Next, we call a variable to clarify that the list of elements is not empty.

9) Next, we call the method that will change the background color of the site section every two milliseconds. You will understand yourself if everything worked out for you.

Types of threats that exist in web applications

Cross-Site Request Forgery (CSRF)

Cross-site request forgery (CSRF) is an attack that forces a user to perform unwanted actions on a web application in which he is currently authorized. With the help of social engineering, an attacker can trick users into performing planned actions. If the victim is a normal user, a successful CSRF attack can force the user to perform state-altering requests, such as transferring funds, changing their email address, etc.

Cross-Site Scripting (XSS)

Cross-Site Scripting(XSS) is a type of attack where the attacker adds code that will run when the victim loads a website page. A more detailed scenario for exploiting the vulnerability. An attacker on a vulnerable website adds a comment containing code to the input field. While traveling on the Internet, the user unsuspectingly visits an already vulnerable site, and after the page is fully loaded, the malicious code infects the user.

A typical XSS attack scenario

  1. ⦁ Creation of a malicious link by an attacker
  2. ⦁ Search for a victim
  3. ⦁ With the help of social engineering, the victim goes to the link
  4. ⦁ The victim loads a web page and the malicious code copies the user’s cookies
    4.1⦁ The code then sends an HTTP request to one or more of the attacker’s web servers with the stolen cookies in the request body.
    4.2⦁ An attacker can then use these cookies to impersonate a user on this website for the purpose a social engineering attack or even to access bank account numbers or other sensitive data.

What harm does an attacker do to an ordinary user?

JS has access to some sensitive data that can be used for identity theft. For example, js has access to cookies, then an attacker can use an XSS attack to steal the user’s cookies and sell them to a third party or use them for their own purposes. JS can also make http requests, which in turn can send all the data to the attacker’s servers. On the client side, the malicious can access the API of the user’s browser settings, which contain geolocation coordinates, webcam data and other confidential information.

Ways to install malicious code
Reflected cross-site scripting

The code is added to the end of the link URL.
Example of use:

The user receives an e-mail from the bank with a request to pass an identity check or evaluate the new interface of the bank’s website (the text can be arbitrary). If necessary, with the help of social engineering, the attacker can call and introduce himself as a bank employee, after standard manipulation, the attacker casually gives instructions to open a letter with a link, and after the transition, the user’s data will be stolen.

Persistent cross-site web browsing

The code is added on the website page (in the data fields). This type of attack can be used on specific sites where it is allowed to leave comments or fill out a user form for further viewing by other users of the website (dating site). If the site is vulnerable to this attack, the attacker can leave the following post in the profile. An example of a malicious post: Hello, my name is Stepan, I want to find you

Application of the attack
GET request

If the web application was created using GET requests to transfer funds transactions in the bank and transfer parameters to the URL, for example GET http://privat24.com.ua/transfer.do?acct=STEPAN&amount=100 HTTP/1.1 Next, the attacker receives the original link where, in turn, he changes the parameters to his own bank account details http://privat24.com.ua/transfer.do?acct=THIEF&amount=100000 With the help of social engineering, the victim (bank user) goes to the link, which in turn transfers his funds the attacker

POST request

1. The user wants to transfer his money to his friend’s card
2. The attacker learned about this operation (for example, the user’s phone was already infected with malicious software)
3. The user receives an e-mail from the bank, which was created by an attacker, with a request to confirm the user’s identity (the text can be arbitrary)
4. Next, the attacker calls and introduces himself as a bank employee, then enters into trust and manipulatively forces him to click on the link sent to him by e-mail
5. The user follows the link
6. Where he gets on his bank’s website, where the transaction links are already changed to the attacker’s address, but this is hidden from the user
7. The user enters the friend’s details and clicks to send the funds, which were successfully sent to the fraudsters

Found an error?
If you find an error, take a screenshot and send it to the bot.