My web security learnings: Cross-Site Scripting.
Tags: security, javascript, css
Published: 2021-02-21 01:49:35

My goal with this article is to provide a brief resume of what is XSS attack and some consideration to keep in mind when writing code. Most of these considerations are focused on front end development. If anyone consider some relevant points are missing, feel free to share it in the comment section.


##**What is a Cross-Site Scripting?**

Cross-site scripting are common vulnerabilities that can be found through interaction with websites. Its mean functions are:

- Execute a script that was not written by the website owner.

- The script can run without visibility or a required start execution.

- Can get any type of data that is presented on the website.

- Can send a receive data from a malicious server.

- Can occurs by incorrect sanitization in the inputs of the application.

- Can steal private user information as tokens, leading to account takeover.

XSS used to be categorized into three main types: **Stored, Reflected, Dom Based**.

**Let's give a brief explanation.**


- **XSS Stored:**  

It refers to when a **malicious script is inserted in a vulnerable application** (client-side) and then is **stored in server-side**. When this script is stored in a database and **then this data is served in a user interface** (UI), **every user who has access to this UI is going to be a victim of this XSS**. Visuality can not identify anything, because the script is going to be executed in the background.


- **XSS Reflected**: 

Reflected attacks (non persisted) occurs when a malicious script is reflected off a web app to the victim browser. The script **is activated using a link**, when the **user clicks on the link**, this **link sends a request** to the browser with the malicious script that is going to be executed.

The common way that this XSS is presented is by **email** or by **a third party app (social media)**.

After the XSS is executed, the perpetrator has access to the private information of the victim associated with the website

- **Dom-Based**

Occurs when an application receives client-side javascript that executes and processes data from a dangerous source. **This attack does not require interaction with a server**, it uses a **source** and **a sink**. That basically **a source is a DOM object where a string can be stored and the sink is a dom object that can execute js code stored as text**.




##**Consideration to prevent xss**

- **Sanitized HTML**

Sanitization refers to the process of **checking an HTML** document and **generates a new one that contains only safe tags.** Basic tags are allowed while dangerous are removed by the sanitization process. Example of dangerous tags:

`<script>` `<object>` `<embed>` & `<link>`

- **Avoid the uses of the next DOM API’s:**

 - **element.innerHTML**: The common way to **insert data into the DOM** is with **innerText** and **innerHTML**. While **innerText performs its own sanitization process**, innerHTML does not make the same. For this reason with innerHTML, a tag with a malicious script can be inserted and creates an opportunity to XSS attack.  

 - **element.outerHTML:**
The attribute outerHTML **gets an HTML fragment** and can **update it**, but **when it is updated is not sanitized.** This is an XSS opportunity.  

 - **Blob and SVG:**
This API’s can store data that carry on code execution. As script tags, for example.  

 - **document.write & document writeLn:** 
Provides the opportunity of writing text into an HTML document directly without sanitizations. A malicious script can be inserted with <script></script> tags.  


 - **DOMparser.parseFromString**:
With DomParser we can generate DOM and scripts from text. The opportunity to create scripts handle the risk of XSS.  
   
  
  
- **Sanitizing hyperlinks**:
With redirect links, a safe approach is the use of `<a></a>` tags that internally provide a sanitization process of the URL, with this internal process is avoided the execution of malicious scripts stored in the URL.  
 
- **CSS:**

CSS provides multiple properties to configure the website style, among these properties exist background. This background property can provides another property as: `background-url():`

This property **sets an image that is got by an HTTP request**. When this style is required to load the content, the HTTP request is executed to handle the image. **This process is an opportunity to handle an HTTP request with a malicious script**.  
  


- **Content Security Policy (CSP) for xss prevention:**

Is a **security configuration tool** that is supported by all major browsers that provides settings that **can reduce the XSS mitigation.** With **CSP the website can allow scripts and code from and specific origin** and also **provides the opportunity to track report violations of the server**. 

The next article is going to be explained how React JS and another frameworks help us to mitigate an XSS.