1. Introduction

In this tutorial, we aim to give you a solid understanding of how to protect your web application from SQL Injection and Cross-Site Scripting (XSS) attacks. These are common security vulnerabilities that can have devastating effects if they are not properly addressed.

By the end of this tutorial, you will learn about:
- What SQL Injection and XSS attacks are.
- Techniques to sanitize user input.
- How to implement these security measures in your web application.

Prerequisites
Basic understanding of web development and SQL is necessary. Familiarity with a server-side language like PHP, Node.js or Python would be beneficial.

2. Step-by-Step Guide

SQL Injection

SQL Injection attacks occur when an attacker can insert malicious SQL code into a query. This can happen when user input is included directly in a SQL query without being sanitized.

Preventing SQL Injection
The main technique to prevent SQL Injection is to use Prepared Statements or Parameterized Queries. This ensures that user input is always treated as literal values and not part of the SQL command.

Cross-Site Scripting (XSS)

XSS attacks involve an attacker injecting malicious scripts into webpages viewed by other users. This can happen when user input is directly included in webpage content.

Preventing XSS
Preventing XSS involves sanitizing user input that is included in webpage content. This can be done by using functions that encode special characters.

3. Code Examples

SQL Injection Prevention Example (PHP & MySQL)

//Connect to your database
$db = new mysqli('localhost', 'username', 'password', 'db');

//Prepare a statement
$stmt = $db->prepare("INSERT INTO users (username, password) VALUES (?, ?)");

//Bind parameters
$stmt->bind_param("ss", $username, $password);

//Set variables
$username = $_POST['username'];
$password = $_POST['password'];

//Execute the statement
$stmt->execute();

In the above code, "?" is a placeholder for user input. The bind_param function binds the user input to the placeholders. The "ss" argument means that both inputs are strings.

XSS Prevention Example (PHP)

//Get user input
$user_input = $_POST['input'];

//Sanitize user input
$safe_input = htmlspecialchars($user_input);

//Output sanitized input
echo $safe_input;

In the above code, the htmlspecialchars function converts special characters to their HTML entities. This means that any HTML tags in the user input will be treated as literal strings and not executed as HTML.

4. Summary

We've covered how SQL Injection and XSS attacks can compromise your web application and how you can prevent them by sanitizing user input. The techniques shown here are fundamental to web application security.

For further learning, look into other types of web application vulnerabilities such as CSRF attacks, and security headers like Content-Security-Policy.

5. Practice Exercises

1. Create a simple form that takes user input and inserts it into a database using prepared statements.
2. Create a simple form that takes user input and displays it on a webpage. Make sure to sanitize the input to prevent XSS.
3. For a more advanced exercise, try to create a form that is vulnerable to SQL Injection and XSS. Then fix the vulnerabilities using the techniques from this tutorial.

Solutions and explanations will depend on the specifics of your coding environment, but the principles from the tutorial should guide you. Remember, always sanitize user input that is included in SQL queries or webpage content.