DEV Community

Cover image for Web-Security for Developers: Cross-Site Scripting (XSS)
Christina Blakely
Christina Blakely

Posted on

Web-Security for Developers: Cross-Site Scripting (XSS)

While web designers and developers tend to be focused on the interface and functionality of a website, it is equally important to be aware of the potential a website has for security incidents that can adversely impact users. Cross-site scripting (XSS) is one of the most common attacks used against users, so let's talk about what we need to do to protect our websites and users from these attacks.

What is XSS?

XSS is when a vulnerability in a website allows an attacker to inject malicious code that is used against the user. This can typically look like a web request that contains content that is not validated prior to being presented to the user. XSS attacks usually come from JavaScript code, but it can sometimes present as HTML, Flash, or any other code the web browser can execute. There are three types of XSS attacks:

Stored XSS Attack, Type-1 XSS

Stored XSS Attack Diagram
This is when an attacker discovers a vulnerability that allows them to inject malicious code directly to the server, which is where it will stay and impact future users until it is removed. In this attack, a user will become a victim of the attack in response to placing a legitimate request. This type of attack has far greater consequences than the reflected XSS attack because it is more likely to affect each person that visits the compromised website. Websites that are more susceptible to stored XSS attacks are websites that allow users to share content, such as forums, blogs, social networks, or similar platforms.

Reflected XSS Attack, Type-2 XSS

Reflected XSS Attack Diagram
This is when the malicious code is presented to the user, typically through a link the user clicks on, and the malicious code is injected into the website and used against the user that inadvertently initiated the attack. The importance of not clicking on strange links that have been emailed to you has been stressed to most people over the years, but many people are willing to trust a link that is present on a website they believe has integrity.

DOM-Based XSS, Type-0 XSS

This is a lesser known attack compared to the stored and reflected XSS attacks, but it should still be acknowledged. This attack consists of modifying the website's DOM in the browser and changing the content. This can be problematic because it can spread misinformation and damage a company's reputation.

Consequences of XSS

The consequences of a successful XSS attack can be enough to cause severe business damage and ruin reputations forever. These attacks can compromise sensitive user data, allowing the attacker to access session information, credentials, or keystrokes. A business can suffer damages for spreading misinformation due to an attacker modifying a website’s content; imagine if an attacker defaced a corporate website or a government website with false information. This attack can also direct users to other malicious websites, leaving users susceptible to malware.

How do we prevent XSS?

Input Validation

Input validation allows us to determine if the input the user is providing is appropriate for the request being made. The developer must know what type of data is supposed to come from a specific input field; for example, if a user enters a number in an input field labeled 'First Name', that data should be rejected and not processed because it does not have the String type it was expecting. Using regular expressions or validation functions isn't a bad idea either, but attackers have created various ways to circumvent those types of barriers.

Input Sanitation

Input sanitation is more about removing potentially dangerous characters from the user's input. There are a few options you can do based on the needs of the project. You can escape content using HTML entities, which replaces HTML tags with a special string of characters. See here to demo that out. You can also use regular expressions to create a whitelist for allowed content and/or blacklist for disallowed content.

Utilize a Content Security Policy (CSP)

A CSP is essentially instructions that are sent to the browser, along with the JavaScript code, to control how it is executed on the client-side. To view how to configure a CSP in your website, check this out!

Build your websites with security in mind in order to prevent XSS attacks that can compromise user data and the integrity of your projects. Drop any questions in the comments below!

Discussion (0)