Swiftorial Logo
Home
Swift Lessons
Matchups
CodeSnaps
Tutorials
Career
Resources

Cross-Site Scripting (XSS) Tutorial

Introduction

Cross-Site Scripting (XSS) is a security vulnerability typically found in web applications. It allows attackers to inject malicious scripts into webpages viewed by other users. These scripts can be used to steal user information, hijack user sessions, deface websites, and perform a range of other malicious activities.

Types of XSS

There are three main types of XSS attacks:

  • Stored XSS: The malicious script is permanently stored on the target server, such as in a database, forum post, comment field, etc.
  • Reflected XSS: The malicious script is reflected off a web server, such as in an error message, search result, or any other response that includes some or all of the input sent to the server as part of the request.
  • DOM-based XSS: The vulnerability exists in client-side code rather than server-side code. The attack payload is executed as a result of modifying the DOM environment in the victim's browser.

Example of XSS

Let's look at a simple example of a reflected XSS attack:

Consider the following PHP code:

<?php
    $name = $_GET['name'];
    echo "Hello, " . $name;
?>

If an attacker submits the following URL:

http://example.com/?name=<script>alert('XSS')</script>

The output will be:

Hello, <script>alert('XSS')</script>

This will execute the JavaScript code, showing an alert box with the message "XSS".

Preventing XSS

To prevent XSS attacks, developers should follow these best practices:

  • Sanitize Input: Ensure that all user inputs are properly sanitized. This can be done using PHP functions like htmlspecialchars() or filter_var().
  • Validate Input: Always validate user input to ensure it meets the expected format and content.
  • Escape Output: Properly escape all user-supplied data before rendering it in the browser. Use functions like htmlspecialchars() to convert special characters to HTML entities.
  • Use Content Security Policy (CSP): Implement a CSP to add an additional layer of security by specifying which sources are allowed to load content on your site.

Here's an example of how to sanitize and escape output in PHP:

<?php
    $name = htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8');
    echo "Hello, " . $name;
?>

Content Security Policy (CSP)

Content Security Policy (CSP) is an HTTP header that adds an additional layer of security by helping to detect and mitigate certain types of attacks, including XSS. It allows you to specify which resources are allowed to load on your web page.

Here's an example of a CSP header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com

This policy allows scripts to be loaded only from the same origin or from https://apis.google.com.

Conclusion

Cross-Site Scripting (XSS) is a serious security vulnerability that can have severe consequences if not properly mitigated. By understanding the different types of XSS and implementing best practices for input validation, output escaping, and content security policies, developers can significantly reduce the risk of XSS attacks in their web applications.