Safeguarding Your Web Applications Against Cross-Site Scripting (XSS) Vulnerabilities

A brief intro on web security

Web security, also known as "Cybersecurity," is the practice of safeguarding websites and web applications by detecting, preventing, and responding to cyber threats. The goal of web security is to protect against hackers and cybercriminals who attempt to gain unauthorized access to sensitive information. Inadequately secured websites can lead to severe consequences, such as:

• Loss of customer trust

• Damage to reputation and integrity

• Financial losses

• Identity theft and more.

In 2021, The Open Web Application Security Project (OWASP) identified the ten most critical web application security risks:

1. Broken Access Control

2. Cryptographic Failures

3. Injection

4. Insecure Design

5. Security Misconfiguration

6. Vulnerable and Outdated Components

7. Identification and Authentication Failures

8. Software and Data Integrity Failures

9. Security Logging and Monitoring Failures

10. Server-Side Request Forgery

Cross-Site Scripting (XSS) Protection

In 2017, Cross-site Scripting, previously a distinct category, has now been reclassified as a subset of Injection vulnerabilities. Cross-site scripting (XSS) is a type of security vulnerability commonly found in web applications. XSS attacks allow attackers to inject malicious scripts into web pages viewed by other users.

What is an XSS Attack?

An XSS attack targets a user's browser through vulnerabilities in the application. This attack exploits cross-site scripting, involving the injection of a script into a comment or URL between a poorly secured web page and the user's browser. Generally, XSS attacks exploit a legitimate but vulnerable website or web application, taking advantage of the victim's browser trust.

The two main types of X-SS attacks include:

• Non-persistent

• Persistent

Non-persistent XSS attacks: Also known as Reflected Attacks, these occur when a malicious script is reflected off a web application to the victim's browser. The script activates through a link, sending a request to a vulnerable website that executes malicious scripts. This type of XSS attack happens when a website uses user input in HTML pages without proper validation.

Persistent XSS attacks: Also called Stored Attacks, these occur when a website stores user input and serves it to other users. Attackers inject malicious code into vulnerable web pages, which are then stored on the web server. When users browse these pages, the payload is automatically executed, without requiring them to click on a malicious link.

XSS is a prevalent web application security vulnerability that allows attackers to inject client-side scripts, bypass access controls, steal sessions, cookies, and even access computer cameras. To mitigate XSS, frameworks like React prevent the rendering of embedded values in JSX by escaping content that isn't explicitly written in the application. A more secure way of protecting a react app from Cross-site scripting is by adding an HTTP X-XSS Protection response header in a web application.

HTTP X-XSS Protection Response Header

The HTTP X-XSS Protection response header is a feature supported by Internet Explorer, Chrome, and Safari. It prevents pages from loading when reflected XSS attacks are detected.

How to Implement X-XSS Protection Response Header in a React Web Application

Step 1: Serve Your App Using Express

To add additional headers like the X-XSS Protection header, use the Express.js package to serve your app. Don’t know how to go about this? Check out this article here.

Step 2: Install the X-XSS Protection Middleware

Install the X-XSS protection middleware package to set the X-XSS-Protection header to 0 by running the command below. For more understanding of how this package works, check out this link.

npm i x-xss-protection

Step 3: Import the Package for Use In the server file (e.g., index.js), import the installed package for use.

const app = express();
const xXssProtection = require("x-xss-protection");
app.use(xXssProtection());

Step 4: Run Your App

After importing the package, run your app as usual using your preferred command.

Upon inspecting the response headers for any action performed within your developer tools, you can expect to see something akin to this:

Conclusion

Security in web applications is of paramount importance as it not only prevents losses but also establishes customer trust. Proper implementation of security measures, including protections against XSS attacks, is essential for maintaining the integrity of web applications.