Horje
How to prevent the Common Vulnerabilities in JavaScript ?

In this article, we will see the Preventing Common Vulnerabilities in JavaScript. Before we proceed, we will first understand the list of most common Vulnerability attacks, & then will understand the various approaches to resolve those Vulnerability attacks. Finally, we will understand the concept with the help of basic illustrations.

Table of Content

List of Common Vulnerabilities

The following is the list of the most common Vulnerabilities:

  • Cross-Site Scripting (XSS): The XSS is a vulnerability that allows attackers to inject malicious scripts into the web applications which are then executed by other users.
  • Cross-Site Request Forgery (CSRF): The CSRF is an attack where an attacker tricks a user into performing actions on a different site without their knowledge or consent.
  • Input Validation and Sanitization: This involves validating and cleaning user inputs to prevent the execution of malicious code or unexpected behavior.
  • SQL Injection: The Attackers manipulate input to execute malicious SQL queries on a database.
  • Insecure Deserialization: The Attackers exploit weaknesses in the deserialization to execute malicious code.
  • Authentication and Session Management Issues: The Weaknesses in authentication and session management can lead to unauthorized access.

List of Preventive Approaches

  • Cross-Site Scripting (XSS) Prevention
  • Cross-Site Request Forgery (CSRF)
  • Input Validation and Sanitization

Cross-Site Scripting (XSS) Prevention

The XSS occurs when an attacker injects malicious scripts into a web application which are then executed in a user’s browser. This can lead to stealing sensitive data or compromising user sessions. The preventive approach is to Sanitize user inputs and escape output using the appropriate encoding functions. A detailed description of prevention is covered in Cross Site Scripting (XSS) Prevention Techniques article.

Example: This example illustrates the prevention from Cross-Site Scripting (XSS) in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>The Prevention Example</title>
</head>
  
<body>
    <h1 style="color: green;">
          GeeksforGeeks
      </h1>
    <h3>
          Implementing the Cross-Site
          Scripting (XSS) Prevention
      </h3>
    <label for="userInput">
          Enter your input:
      </label>
    <input type="text" id="userInput">
    <button onclick="GFG()">
          Display
      </button>
    <script>
        function sanitizeInput(input) {
            return input.replace(/</g, '<')
                .replace(/>/g, '>');
        }
        function GFG() {
            const userInput = document
                .getElementById('userInput').value;
            const sanitizedInput = sanitizeInput(userInput);
            alert('Sanitized Input: ' + sanitizedInput);
        }
    </script>
</body>
  
</html>

Output:

 

Cross-Site Request Forgery (CSRF)

The CSRF involves tricking a user into performing unwanted actions without their consent and This happens when an attacker uses a user’s authenticated session to perform the actions on a different site. The preventive approach is to implement CSRF tokens in forms to validate the authenticity of the requests. Use SameSite cookies to restrict cookies from being sent in the cross-origin requests. Please refer to the Cross-Site Request Forgery (CSRF) Protection Methods and Bypasses Article for a detailed description.

Example: This example illustrates the basic implementation of the Cross-Site Request Forgery (CSRF).

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
          The CSRF Prevention
      </title>
  
    <script>
        function GFG() {
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "process.php", true);
            const csrfToken = "your_csrf_token_here";
            xhr.setRequestHeader("X-CSRF-Token", csrfToken);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("output")
                            .textContent =
                          "Request processed successfully!";
                    } else {
                        document.getElementById("output")
                            .textContent = 
                          "Error processing request.";
                    }
                }
            };
            xhr.send();
        }
    </script>
</head>
  
<body>
    <h1 style="color: green;">
          GeeksforGeeks
      </h1>
    <h3>
          Implementing the Cross-Site Request Forgery (CSRF)
      </h3>
    <button onclick="GFG()">
          Submit
      </button>
    <div id="output"></div>
</body>
  
</html>

Output:

 

Input Validation and Sanitization

In this approach, we’ll be using Regular Expressions to validate and sanitize input. Regular Expression has a sequence of characters that forms a search pattern. The search pattern can be used for text search and text to replace operations. In the case of Sanitization, it takes the help npm package that can be used to sanitize file names by removing all the unwanted characters or white spaces from the file name and making it a proper file name according to the specific file system or operating system.

Example: This example illustrates the basic implementation of Input Validation and Sanitization.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
          The Input Validation and Sanitization
      </title>
    <script>
        function validate(input) {
            return /^[a-zA-Z0-9]+$/.test(input);
        }
        function sanitize(input) {
            return input.replace(/</g, "<")
                .replace(/>/g, ">");
        }
        function process() {
            const userInput = document
                .getElementById("userInput").value;
            if (validate(userInput)) {
                const sanitizedInput = sanitize(userInput);
                document.getElementById("output")
                    .innerHTML = sanitizedInput;
            } else {
                alert("Invalid input! Only alphanumeric"+
                      " characters are allowed.");
            }
        }
    </script>
  
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Implementing the Input 
        Validation and Sanitization
    </h3>
  
    <input type="text"
           id="userInput"
           placeholder="Enter The alphanumeric input">
    <button onclick="process()">
        Process
    </button>
    <div id="output"></div>
</body>
  
</html>

Output:

Conclusion

Securing JavaScript applications is paramount to prevent common vulnerabilities and Cross-site scripting (XSS) cross-site request forgery (CSRF) inadequate input validation and other vulnerabilities can have serious consequences. By implementing proper sanitization input validation using the security tokens and following secure coding practices developers can significantly reduce the risk of their applications being exploited.


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript Progam to rearrange an array in maximum minimum form using Two Pointer Technique JavaScript Progam to rearrange an array in maximum minimum form using Two Pointer Technique
JavaScript Program to find the Nth smallest/largest element from an unsorted Array JavaScript Program to find the Nth smallest/largest element from an unsorted Array
How to Align Social Media Icons Vertically on Left Side using HTML CSS &amp; JavaScript? How to Align Social Media Icons Vertically on Left Side using HTML CSS &amp; JavaScript?
JavaScript Programs - Top JavaScript Programs You Must Try in 2024 JavaScript Programs - Top JavaScript Programs You Must Try in 2024
JavaScript Program to Check for Repeated Characters in a String JavaScript Program to Check for Repeated Characters in a String

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje