TL;DR: Keep your web app secure with these 5 vital techniques: validate and sanitize inputs, implement a content security policy, use subresource integrity, follow secure JavaScript practices, and conduct regular security audits. Protect web apps from unauthorized JavaScript execution and protect your users.
In early 2024, a series of cyberattacks exploited stored cross-site scripting (XSS) vulnerabilities in popular WordPress plugins like WP Statistics, WP Meta SEO, and LiteSpeed Cache. These attacks allowed attackers to inject malicious JavaScript, compromising over 5 million active installations.
As you can see, these attacks are a considerable threat to web applications nowadays. They can result in data leakage, identity theft, and, ultimately, loss of customer confidence. According to HackerOne Research, XSS attacks constituted 23% of all reported security threats in 2020, making them the most frequent.
This article will describe five techniques for safeguarding your app against unauthorized JavaScript executions.
1. Input validation and sanitization
This primarily involves verifying whether the user’s input is within the expected format. For example, the data in the email text field should be a valid email address, and the data in the username text field should follow the expected username structure.
Sanitization cleans this input by stripping out any malicious data that could be used in attacks such as XSS and SQL injection. These two are critical security measures for any web app, and they serve as the first line of defense against malicious data that users might input.
How to implement input validation and sanitization
a. Client-side form validation
Client-side form validation is the initial check of the data validation process. However, this should never be solely relied upon for security purposes because JavaScript can be disabled or manipulated, easily bypassing client-side checks.
Refer to the following code example of basic client-side validation using HTML 5.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
For a more comprehensive look at client-side form validation, explore this detailed guide.
b. Server-side validation
Server-side validation ensures that all inputs are validated, regardless of the client-side validation status. It increases security by ensuring that malicious data never reaches your core app logic or database validation on the server. It is also less vulnerable to tampering.
Refer to the following code example of basic server-side validation using Node.js with Express.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
const email = req.body.email;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
return res.status(400).send('Invalid email format.');
}
// Process the valid email.
res.send('Email is valid!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
c. Sanitization
Sanitization ensures that any potentially harmful data is removed or altered to a safe format. The following code example sanitizes input using the validator library in Node.js.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const validator = require('validator');
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/submit', (req, res) => {
let email = req.body.email;
if (!validator.isEmail(email)) {
return res.status(400).send('Invalid email format.');
}
email = validator.normalizeEmail(email);
// Process the sanitized email
res.send('Email is valid and sanitized!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. Content security policy (CSP)
This is a strong security solution to guard web apps against threats such as XSS and data injection. Implementing CSP ensures that only scripts from specific, approved sources can run on your web pages. This significantly reduces the chance of malicious code execution.
In simpler terms, think of CSP as a bouncer for your web app. It checks where the scripts come from and only lets in those from trusted sources, keeping the bad scripts out.
How to implement CSP
Implementing CSP involves adding CSP directives to your web server’s HTTP response header. CSP directives are instructions that tell the browser which sources are permitted to load and execute content on a webpage. These directives provide granular control over various types of resources.
Key directives include:
default-src: Sets a default policy for all content types.
script-src: Specifies allowed sources for JavaScript.
style-src: Specifies allowed sources for stylesheets.
img-src: Specifies allowed sources for images.
object-src: Specifies allowed sources for plugins.
How to add CSP to the HTTP response header
You can add the CSP to the HTTP response header via your web server configuration. Refer to the following code example for setting up CSP in the Apache server.
Header set Content-Security-Policy "default-src 'self'; img-src *"
For Nginx, you can configure CSP as follows.
add_header Content-Security-Policy "default-src 'self'; img-src *"
How to add your CSP via meta tags
If you cannot access the web server’s configuration, you can include the CSP directly in your HTML file using a tag. But this is not the recommended way.
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *"">
</head>
3. Sub-resource integrity (SRI)
This security feature helps browsers check if the resources obtained from a third party (for instance, a CDN) have been modified. It allows you to provide a cryptographic hash for these resources.
When the browser gets the resource, it compares its hash to the given hash. If the hash does not match, the resources will not be loaded, thereby protecting your app from malicious modifications.
How to implement SRI
Implementing SRI involves adding a cryptographic hash to the integrity attribute of your