DEV Community

Geoffrey Kim
Geoffrey Kim

Posted on

Understanding Cross-Site Scripting (XSS)

Cross-Site Scripting, commonly known as XSS, is a type of web vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. This can lead to sensitive information theft, unauthorized actions on behalf of the victim, and more. In this blog post, we'll dive into the details of XSS and explore some examples to help you better understand this security risk.

What is XSS?

XSS occurs when a web application accepts user input without properly validating or encoding it before including it in the output sent to the browser. This allows attackers to inject their own scripts, which can then be executed by the victim's browser, potentially compromising their security.

There are three main types of XSS:

  1. Reflected XSS: The malicious script is part of the request sent to the server and is reflected back in the response.
  2. Stored XSS: The malicious script is stored on the server (e.g., in a database) and is later retrieved and executed by the victim's browser.
  3. DOM-based XSS: The vulnerability exists in the client-side code, where the malicious script is executed without sending it to the server.

Examples of XSS

Let's look at some examples to understand how XSS works in practice.

Example 1: Reflected XSS

Imagine a search functionality on a website that displays the user's search query in the results page. If the website doesn't properly sanitize the user input, an attacker could craft a malicious URL like this:<script>alert('XSS');</script>
Enter fullscreen mode Exit fullscreen mode

When a victim clicks on this link, the malicious script <script>alert('XSS');</script> is sent to the server as part of the search query. If the server reflects this input back in the response without encoding it, the script will be executed by the victim's browser, displaying an alert popup.

Example 2: Stored XSS

Consider a web application that allows users to post comments. If the application doesn't properly sanitize the comment input before storing it in the database, an attacker could post a comment containing a malicious script:

  var img = document.createElement('img');
  img.src = '' + document.cookie;
Enter fullscreen mode Exit fullscreen mode

When other users view the page containing this comment, the malicious script will be executed by their browsers. In this example, the script creates an image element with a source URL that sends the victim's cookies to the attacker's server, potentially allowing the attacker to hijack the user's session.

Example 3: DOM-based XSS

Let's say a web page uses JavaScript to dynamically update the content based on the URL fragment identifier (the part after the # symbol). If the script doesn't properly encode the fragment value, an attacker could exploit this vulnerability.

Malicious URL:<img src=x onerror=alert('XSS')>
Enter fullscreen mode Exit fullscreen mode

JavaScript code:

var fragment = window.location.hash.substring(1);
document.getElementById('content').innerHTML = fragment;
Enter fullscreen mode Exit fullscreen mode

In this example, the JavaScript code takes the fragment value and sets it as the inner HTML of an element without encoding it. When a victim visits the malicious URL, the onerror event of the <img> tag is triggered, executing the attacker's script and displaying an alert popup.

Preventing XSS

To prevent XSS vulnerabilities, it's crucial to follow these best practices:

  1. Validate and sanitize user input: Always validate and sanitize user input on the server-side before including it in the output sent to the browser. Use well-tested libraries or frameworks that provide built-in input sanitization.

  2. Encode output: Properly encode any user-supplied data before rendering it in the browser. Use the appropriate encoding method based on the context (e.g., HTML, JavaScript, CSS).

  3. Use Content Security Policy (CSP): Implement a Content Security Policy to restrict the sources of scripts and other resources that can be loaded by the browser. This can help mitigate the impact of XSS attacks.

  4. Avoid using untrusted data in dynamic code evaluation: Be cautious when using user-supplied data in functions like eval(), setTimeout(), or setInterval(), as they can execute arbitrary JavaScript code.

  5. Regularly update and patch: Keep your web application, frameworks, and libraries up to date with the latest security patches to address any known XSS vulnerabilities.

By understanding XSS and following these best practices, you can significantly reduce the risk of XSS attacks on your web applications and protect your users' security.


Cross-Site Scripting is a serious web vulnerability that can lead to sensitive information theft and unauthorized actions. By properly validating and encoding user input, implementing security measures like Content Security Policy, and staying up to date with patches, you can mitigate the risk of XSS attacks and ensure a more secure web application.

Remember, security is an ongoing process, and it's essential to stay vigilant and informed about the latest web security threats and best practices.

Top comments (0)