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.
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.
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.
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');
}); 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');
}); 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.
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:
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 *"
If you cannot access the web server’s configuration, you can include the CSP directly in your HTML file using a <meta> tag. But this is not the recommended way.
<head> <meta http-equiv="Content-Security-Policy" content=”default-src ’self’; img-src *”"> </head>
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.
Implementing SRI involves adding a cryptographic hash to the integrity attribute of your <script> or <link> tags. Here’s a step-by-step guide to setting up SRI:
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.
Once you have the hash, add it to the integrity attribute of the <script> 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">
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.
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:
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(); 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);
} 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:
Refer to the following code example.
<!-- Insecure Inline JavaScript --> <!-- <button >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!
Related blogs