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 or tags. Here’s a step-by-step guide to setting up SRI:
Step 1: Generating the hash
You must generate a hash for the resource you want to include in your webpage. This can be done using a tool or online service like the Subresource Integrity Generator tool.
Step 2: Adding the hash to your resource
Once you have the hash, add it to the integrity attribute of the or < link> tag.
Refer to the following code example.
<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous"></script>
In this example, the integrity attribute contains the hash, and the crossorigin=”anonymous” attribute ensures the resource is fetched with CORS (cross-origin resource sharing).
You can use SRI for stylesheets, as well.
<link rel="stylesheet" href="https://example.com/styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous">
4. Secure JavaScript coding practices
Secure JavaScript coding practices are crucial for developing web apps robust against various attacks, XSS, and other malicious exploits. By following these best practices, developers can ensure their code is secure, maintainable, and less vulnerable to unauthorized execution.
Avoid using eval()
The eval() function is a significant security risk, as it executes a string of code, potentially allowing attackers to inject malicious scripts. Always avoid using eval() and similar functions like setTimeout(string) and setInterval(string).
Why these functions are dangerous:
- Arbitrary code execution: These functions can execute any code passed to them as a string. If an attacker successfully inserts a malicious string, it will operate in the same way as the remaining code of your script.
- Difficulty in code analysis: Using these functions makes it harder to analyze the code for security vulnerabilities. Static analysis tools cannot examine the strings that are passed through such functions.
- Dynamic code injection: Attackers can use these functions to inject and execute code dynamically that was not originally part of the app, bypassing traditional security measures.
Use strict mode
Enabling strict mode in JavaScript helps catch common coding mistakes and unsafe actions, such as assigning values to undeclared variables. This improves the security and stability of your code. To enable strict mode, add “use strict”; at the beginning of a script or a function.
"use strict";
function safeFunction() {
// Code in strict mode.
let secureVariable = "Secure";
console.log(secureVariable);
}
safeFunction();
Advantages and implications of enabling strict mode:
- In strict mode, this is undefined in functions that are not called methods.
- Strict mode will throw an error if a function has duplicate parameter names or an object literal has duplicate property names.
- A with statement is not allowed in the strict mode because it makes code difficult to predict and optimize.
Refer to the following code example.
"use strict";
// Eliminates this coercion.
function showThis() {
console.log(this); // In non-strict mode, this would be the global object; in strict mode, it's undefined.
}
showThis();
// Disallows duplicate property names or parameter values.
// This will throw an error in strict mode.
const obj = {
prop: 1,
prop: 2
};
// Prevents the use of with statement.
// This will throw an error in strict mode.
with (Math) {
let x = cos(3.14);
}
Avoid inline JavaScript
Inline JavaScript can be significantly vulnerable to XSS attacks because it allows attackers to inject malicious scripts directly into your HTML. Instead, use external scripts to ensure all JavaScript is properly vetted and sanitized.
Avoid inline JavaScript because of:
- Ease of injection: Inline JavaScript is more susceptible to injection attacks because it is part of the HTML content.
- CSP compliance: Content security policies (CSP) can be more effectively enforced when JavaScript is kept in external files. Inline scripts often require the use of the unsafe-inline directive, which weakens CSP’s effectiveness.
- Maintainability: Keeping JavaScript in separate files makes the codebase easier to manage and maintain.
Refer to the following code example.
<!-- Insecure Inline JavaScript -->
<!-- <button onclick="alert('Clicked!')">Click Me</button> -->
<!-- Secure External JavaScript -->
<button id="secureButton">Click Me</button>
<script>
document.getElementById('secureButton').addEventListener('click', function() {
alert('Clicked!');
});
</script>
5. Regular Security Audits and Updates
Regular audits are essential for maintaining the integrity and security of web apps. By continuously assessing your app’s security, you can identify and fix vulnerabilities that could be exploited to execute unauthorized JavaScript or other malicious actions.
How to conduct regular security audits
Automated security scanning
Use tools like OWASP ZAP or Burp Suite to scan for known vulnerabilities. Automated scans provide a quick way to identify common security issues.
Manual code reviews
Regularly review your codebase manually to catch issues that automated tools might miss. It’s better to use experienced developers and security experts for this.
Penetration testing
Hire penetration testers to simulate attacks on your app, uncovering vulnerabilities that other methods might not detect.
Update dependencies
Keep your dependencies updated to fix known vulnerabilities in libraries and frameworks. Use package managers like NPM or pip to manage updates.
Security training
Continuously train your development team on the latest security practices and common vulnerabilities. This will ensure that your team is equipped to write secure code.
Concluding thoughts
Thanks for reading this article. We hope these 5 techniques enhance your app’s defenses against unauthorized JavaScript executions. By implementing these strategies, you can reduce the risk of attacks and ensure a safer, more secure web app for your users. Remember, staying proactive and vigilant in your security measures is key to protecting your digital assets.
Syncfusion JavaScript UI controls library is the only suite that you will ever need to build an app since it contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.
For current customers, the newest version of Essential Studio is available from the License and Downloads page. If you are not a Syncfusion customer, you can always download our free evaluation to see all our controls.
You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!
Top comments (1)
Hi Gayathri-github7,
Top, very nice and helpful !
Thanks for sharing.