Here’s a simple, interactive web page to demonstrate how SQL injection works, including
a vulnerable example, attack scenarios, and prevention tips. This is designed to be easy to set
up and educational for your team at Personnel.
HTML + JavaScript Demo: SQL Injection Explained
1. Create the Web Page
Save the following code as [Link] and open it in a web browser (no
server required for the demo).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SQL Injection Demo for Personnel</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f9;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
color: #2c3e50;
}
.vulnerable {
background-color: #ffebee;
padding: 15px;
border-left: 4px solid #f44336;
}
.safe {
background-color: #e8f5e9;
padding: 15px;
border-left: 4px solid #4caf50;
}
.code {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
font-family: monospace;
overflow-x: auto;
}
.attack-example {
background-color: #fff3e0;
padding: 15px;
border-left: 4px solid #ff9800;
}
button {
background-color: #2196F3;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0b7dda;
}
#queryResult {
margin-top: 20px;
padding: 10px;
background-color: #e3f2fd;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>SQL Injection Demo for Personnel</h1>
<p>
This demo shows how SQL injection attacks work and why they are
dangerous.
<strong>Never use this vulnerable code in production!</strong>
</p>
<h2>1. How SQL Injection Works</h2>
<ol>
<li>
An application takes user input (e.g., username, password)
and directly includes it in an SQL query
<strong>without validation or sanitization</strong>.
</li>
<li>
An attacker submits <strong>maliciously crafted
input</strong> (e.g., <code>' OR '1'='1</code>).
</li>
<li>
The database executes the unintended SQL command, allowing
the attacker to:
<ul>
<li>Bypass authentication (e.g., log in as admin
without a password).</li>
<li>Extract sensitive data (e.g., user credentials,
credit card numbers).</li>
<li>Modify or delete data (e.g., drop tables, alter
records).</li>
<li>Execute administrative operations (e.g., shut down
the database).</li>
</ul>
</li>
</ol>
<h2>2. Vulnerable Login Example</h2>
<div class="vulnerable">
<h3>Unsafe PHP-like Pseudocode</h3>
<div class="code">
<pre>
// UNSAFE: Directly embedding user input into SQL
$username = $_POST['username']; // e.g., "admin' --"
$password = $_POST['password']; // e.g., "anything"
$query = "SELECT * FROM users WHERE username = '$username' AND password =
'$password'";
$result = mysqli_query($connection, $query);
</pre>
</div>
<p>
<strong>Attack Input:</strong>
<code>Username: admin' --</code><br>
<code>Password: [anything]</code>
</p>
<p>
<strong>Resulting Query:</strong><br>
<code>SELECT * FROM users WHERE username = 'admin' --' AND
password = '[anything]'</code><br>
The <code>--</code> comments out the rest of the query,
allowing login as <code>admin</code> without a password.
</p>
</div>
<h2>3. Try It Yourself (Simulated)</h2>
<div class="attack-example">
<p>
<strong>Simulate an SQL Injection Attack:</strong><br>
Enter a username and password to see how the query changes.
</p>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" value="admin"
placeholder="Try: admin' --"><br><br>
<label for="password">Password:</label>
<input type="text" id="password" value="password"
placeholder="Try: anything"><br><br>
<button type="button" onclick="simulateQuery()">Simulate
Query</button>
</form>
<div id="queryResult"></div>
</div>
<h2>4. Common SQL Injection Techniques</h2>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Technique</th>
<th>Example Input</th>
<th>Impact</th>
</tr>
<tr>
<td>Authentication Bypass</td>
<td><code>' OR '1'='1</code></td>
<td>Logs in as any user.</td>
</tr>
<tr>
<td>Union-Based</td>
<td><code>' UNION SELECT username, password FROM users--
</code></td>
<td>Extracts data from other tables.</td>
</tr>
<tr>
<td>Error-Based</td>
<td><code>' AND 1=CONVERT(int, (SELECT table_name FROM
information_schema.tables))--</code></td>
<td>Reveals database structure.</td>
</tr>
<tr>
<td>Blind SQL Injection</td>
<td><code>' AND IF(1=1, SLEEP(5), 0)--</code></td>
<td>Infers data by observing delays.</td>
</tr>
<tr>
<td>Batch Queries</td>
<td><code>'; DROP TABLE users;--</code></td>
<td>Executes multiple commands.</td>
</tr>
</table>
<h2>5. How to Prevent SQL Injection</h2>
<div class="safe">
<h3>Best Practices:</h3>
<ol>
<li>
<strong>Use Prepared Statements (Parameterized
Queries):</strong><br>
Separate SQL logic from data.
<div class="code">
<pre>
// SAFE: Prepared statement in PHP
$stmt = $connection->prepare("SELECT * FROM users WHERE username = ? AND
password = ?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
</pre>
</div>
</li>
<li>
<strong>Input Validation:</strong><br>
Reject or sanitize input that doesn’t match expected
patterns (e.g., only allow alphanumeric usernames).
</li>
<li>
<strong>Least Privilege:</strong><br>
Database users should have only the permissions they
need (e.g., no `DROP TABLE` for a login system).
</li>
<li>
<strong>Escape User Input:</strong><br>
Use functions like
<code>mysqli_real_escape_string()</code> if prepared statements aren’t
possible.
</li>
<li>
<strong>Use ORM Frameworks:</strong><br>
Tools like **Entity Framework (C#)** or **Hibernate
(Java)** abstract SQL and protect against injection.
</li>
</ol>
</div>
<h2>6. For Your Personnel Project</h2>
<div class="safe">
<p>
Since you’re using <strong>C#</strong> and
<strong>XAMPP/WAMP (MySQL)</strong> for your <strong>Personnel</strong>
project:
</p>
<ul>
<li>
Always use <strong>parameterized queries</strong> with
<code>MySqlCommand</code>:
<div class="code">
<pre>
// C# Example: Safe parameterized query
string query = "SELECT * FROM users WHERE username = @username AND password
= @password";
MySqlCommand cmd = new MySqlCommand(query, connection);
[Link]("@username", username);
[Link]("@password", password);
MySqlDataReader reader = [Link]();
</pre>
</div>
</li>
<li>
Avoid dynamic SQL (e.g., string concatenation with user
input).
</li>
<li>
Use <strong>Entity Framework</strong> for ORM-based
database access.
</li>
</ul>
</div>
</div>
<script>
function simulateQuery() {
const username = [Link]('username').value;
const password = [Link]('password').value;
const queryResult = [Link]('queryResult');
// Simulate the vulnerable query construction
const query = `SELECT * FROM users WHERE username = '$
{username}' AND password = '${password}'`;
// Highlight dangerous patterns
let highlightedQuery = query;
if ([Link]("--") || [Link]("'")) {
highlightedQuery = [Link](/'--.*'/g, '<span
style="background-color: #ffccbc;">--[COMMENTED OUT]</span>');
highlightedQuery = [Link](/'/g, '<span
style="color: red;">\'</span>');
}
[Link] = `
<p><strong>Simulated Query:</strong></p>
<div class="code" style="background-color: #ffebee;">
<pre>${highlightedQuery}</pre>
</div>
<p><strong>Risk:</strong> ${[Link]("--") ||
[Link]("'") ?
'<span style="color: red;">⚠️ VULNERABLE TO SQL
INJECTION!</span>' :
'<span style="color: green;">✅ Safe input.</span>'}
</p>
`;
}
</script>
</body>
</html>
How to Use This Demo
1. Save the Code: Copy the entire HTML code above and save it as sql-injection-
[Link].
2. Open in Browser: Double-click the file to open it in your default web browser. No
server or internet connection is required.
3. Simulate Attacks:
o Try entering admin' -- as the username and any password to see how the
query is manipulated.
o Experiment with other payloads from the "Common SQL Injection
Techniques" table.
4. Learn Prevention: Review the "How to Prevent SQL Injection" section for best
practices, especially the C# examples tailored to your Personnel project.
Key Takeaways for Your Team at Personnel
Never trust user input: Always validate and sanitize data before using it in SQL
queries.
Use parameterized queries: This is the #1 defense against SQL injection (applies to
C#, PHP, Java, etc.).
Limit database permissions: Ensure your root user (XAMPP/WAMP) is not used
for application database access. Create a dedicated user with limited privileges.
Test for vulnerabilities: Use tools like SQLMap or manual testing to check for
weaknesses in your applications.
How SQL injection works?