Blog

In this article, we’ll dive deeper into common JavaScript security vulnerabilities, provide practical examples, and explain how to implement effective solutions.

JavaScript is the backbone of modern web development, enabling dynamic and interactive user experiences. However, its flexibility and widespread use also make it a prime target for attackers.

JavaScript security is crucial to protecting web applications from various attacks that can compromise user data, expose sensitive information, and lead to severe financial and reputational damage.

Ensuring JavaScript security is critical to protecting your applications and users from malicious exploits.

List of JavaScript security vulnerabilities

1. Cross-Site Scripting (XSS)

What is XSS?

Cross-site scripting (XSS) is a Javascript security vulnerability that allows attackers to inject malicious scripts into web pages viewed by users. It can lead to data theft, session hijacking, and website defacement.

Example of XSS Attack

<input type="text" id="userInput">
<button onclick="document.getElementById('output').innerHTML = userInput.value">Submit</button>
<div id="output"></div>

If a user inputs <script>alert(‘Hacked!’)</script>, the browser will execute the script.

How to Prevent XSS

• Escape User Input: Convert special characters into HTML entities.
• Use Content Security Policy (CSP): Restrict sources of executable scripts.
• Use Security Libraries: Libraries like DOMPurify sanitize user input.
• Validate and sanitize input data before rendering

Example of Prevention:

const userInput = document.getElementById("userInput").value;
const sanitizedInput = userInput.replace(/</g, "&lt;").replace(/>/g, "&gt;");
document.getElementById("output").innerHTML = sanitizedInput;

2. Cross-Site Request Forgery (CSRF)

What is CSRF?

CSRF tricks a user into executing unwanted actions on a trusted web application, which is a major JavaScript security concern.

Example of CSRF Attack

<img src="http://bank.com/transfer?amount=1000&to=attacker" />

When the victim visits a malicious page, an unintended transfer is initiated.

How to Prevent CSRF

• Use CSRF Tokens: Generate and validate unique tokens for requests.
• Use SameSite Cookies: Restrict cookies to same-origin requests.
• Require User Authentication for Sensitive Actions.
• Implement user confirmation prompts for sensitive actions.

Example of Prevention:

<input type="hidden" name="csrf_token" value="unique_generated_token">

3. SQL Injection in JavaScript Applications

What is SQL Injection?

SQL Injection occurs when an attacker manipulates an application’s database queries by injecting SQL code.

Example of SQL Injection Attack

const query = `SELECT * FROM users WHERE username = '${userInput}'`;

If userInput is '; DROP TABLE users; --, it deletes the table.

How to Prevent SQL Injection

• Use Prepared Statements: Use parameterized queries.
• Sanitize Input: Validate and escape input data.
• Use ORM libraries to abstract raw SQL queries.

Example of Prevention:

const query = "SELECT * FROM users WHERE username = ?";
db.execute(query, [userInput]);

4. Insecure Local Storage

What is Insecure Local Storage?

Storing sensitive data in localStorage or sessionStorage without encryption makes it vulnerable to attacks.

Example of Insecure Storage

localStorage.setItem("token", "user-secret-token");

If an attacker executes an XSS attack, they can steal the token.

How to Prevent Insecure Local Storage

• Use HttpOnly Cookies: Store sensitive data in secure cookies.
• Encrypt Data: If necessary, encrypt sensitive data before storing it.

Example of Prevention:

const encryptedToken = btoa("user-secret-token");
localStorage.setItem("token", encryptedToken);

5. Prototype Pollution

What is Prototype Pollution?

Prototype Pollution allows an attacker to modify an object’s prototype, affecting all instances.

Example of Prototype Pollution Attack

const obj = {};
obj.__proto__.isAdmin = true;
console.log({}.isAdmin); // true

How to Prevent Prototype Pollution

• Freeze Object Prototypes: Use Object.freeze().
• Validate User Input: Restrict properties users can modify.

Example of Prevention:

Object.freeze(Object.prototype);

6. Server-side JavaScript Injection

What is Server-Side JS Injection?

Injection of JavaScript code into server-side environments like Node.js can allow remote code execution.

Example of Server-Side JS Injection

const userInput = "console.log('Hacked!')";
eval(userInput);

If an attacker inputs require(‘fs’).unlinkSync(‘/etc/passwd’), it deletes critical files.

How to Prevent Server-Side JS Injection

• Avoid eval(): Do not use eval() or Function().
• Use Secure Input Validation: Reject unexpected input formats.

Example of Prevention:

const safeEval = require("safe-eval");
safeEval(userInput);

7. Clickjacking

What is Clickjacking?

Clickjacking is a technique where an attacker tricks users into clicking on a hidden element, often leading to unauthorized actions.

Example of Clickjacking Attack

<iframe src="http://bank.com/transfer" style="opacity: 0; position: absolute; top: 0; left: 0;"></iframe>

How to Prevent Clickjacking

• Use X-Frame-Options Header: Set it to DENY or SAMEORIGIN.
• Use Content Security Policy (CSP): Restrict embedding of content.

Example of Prevention:

X-Frame-Options: DENY

8. Man-in-the-Middle (MITM) Attacks

What is MITM Attack?

A Man-in-the-Middle (MITM) attack occurs when an attacker intercepts communication between two parties to steal or manipulate data.

How to Prevent MITM Attacks

• Use HTTPS with TLS Encryption: Always serve websites over HTTPS.
• Implement Secure WebSockets (WSS): Use WSS instead of WS.
• Use HTTP Strict Transport Security (HSTS): Enforce secure connections.

Example of Prevention:

Strict-Transport-Security: max-age=31536000; includeSubDomains

Conclusion

JavaScript security is a critical aspect of web development that requires constant attention. You can build robust and secure applications by understanding vulnerabilities like XSS, CSRF, insecure dependencies, and prototype pollution, and implementing solutions such as input sanitization, anti-CSRF tokens, and secure communication.

Remember, JavaScript security is an ongoing process. Stay informed about the latest threats, follow best practices, and use tools designed to enhance the security of your applications.

Credits:

• Image by freepik

References

• OWASP XSS Prevention Cheat Sheet
• MDN Web Security Guide
• OWASP CSRF Prevention
• OWASP Clickjacking Defense

By understanding JavaScript security and implementing these preventive measures, developers can ensure that their applications remain safe from common vulnerabilities.