{% extends 'core/Injections/injections.html' %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
{% block inside-content %}
    <div class="bg-white nav-item flex-grow bg-opacity-20 backdrop-filter backdrop-blur-md w-4/5 problems-container">
        <h1 class="text-center text-white font-bold pb-5">How do I know an SQL injection?</h1>

        <p class="text-white pb-3">
            First, let's look at examples of how we operate SQL language to understand this issue better. We will start
            with basic queries and see how they look in SQLI (SQL Injection) attacks. But for that, we need data to work on.
        </p>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/database.png" alt=""/>
        </div>

        <p class="text-white pt-3">
            The showcase will be done on a database with this structure. However, you can follow along on your own testing database.
        </p>

        <div class="flex flex-grow pt-3">
            <pre><code class="sql rounded-lg">SELECT * FROM testDatabase.auth_user WHERE username='user1';</code></pre>
            <br>
        </div>

        <p class="text-white pt-3 pb-3">
            Here we can see simple query onto the database - testDatabase, and table - auth_user. It selects all the
            columns for the user named 'username1'. <BR>The result of this query will look like this:
        </p>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/simple_query.png" alt=""/>
        </div>

        <p class="text-white pt-3">
            As we can see, the result is all the information about the user1. Now that we know how simple SQL query
            looks and works, let's look at some more useful queries.
        </p>

        <div class="flex flex-grow pb-3 pt-3">
            <pre><code class="sql rounded-lg">SELECT * FROM testDatabase.auth_user;</code></pre>
            <br>
        </div>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/query_all.png" alt=""/>
        </div>

        <p class="text-white pt-3 pb-3">
            Here we can see a query that shows all the columns and rows from our table, including our admin user. This
            query is much more dangerous as it can reveal all the data.

            <br>
            Those are some examples of queries that show us data. Now, let's see some that modify them.<br>
        </p>

        <h1 class="text-white font-bold pb-3">Before:</h1>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/user1_before.png" alt=""/>
        </div>
        <div class="flex flex-grow pb-3 pt-3">
            <pre><code class="sql rounded-lg">UPDATE auth_user
SET username = 'user1'
WHERE username = 'alteredUser1'</code></pre>
            <br>
        </div>

        <h1 class="text-white font-bold pb-3">After:</h1>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/user1_after.png" alt=""/>
        </div>

        <p class="text-white pt-3 pb-3">
            As you can see, queries like these allow us to change data in the database. If attackers were allowed to
            perform such actions, it could lead to denial of access by changing all the passwords.
            Attackers could perform many malicious actions once they are allowed to execute SQL Injections.<br>Let's
            look at queries that attackers would usually use:
        </p>

        <div class="rounded-xl"
             style="background-color: #2b2b2b">
            <div class="flex flex-grow grid grid-cols-4 gap-4 place-items-center p-5">
                <img class="rounded-xl object-cover" src="/static/img/sql_user1.png" alt=""/>
                <img class="rounded-xl object-cover" src="/static/img/sql_2.png" alt=""/>
                <img class="rounded-xl object-cover" src="/static/img/sql_3.png" alt=""/>
                <img class="rounded-xl object-cover" src="/static/img/sql_4.png" alt=""/>
                <img class="rounded-xl object-cover" src="/static/img/sql_5.png" alt=""/>
            </div>
        </div>

        <p class="text-white pt-3">
            As you may see these queries look a bit different from previous examples, but they are actually similar,
            lets see why.
            Starting with the first picture the query looks like this:
        </p>

        <div class="flex flex-grow pt-3">
            <pre><code class="sql rounded-lg">SELECT * FROM users Where username ='admin' OR '1'='1' AND password='randompassword'</code></pre>
        </div>

        <p class="text-white pt-3">
            This query selects everything from table username if username equals admin <span class="font-bold">OR</span>
            1 is equal to 1,
            since 1 will always equal 1 this query will execute no matter the wrong password. As we hit signup the query
            will be sent to backend and handled. As this website
            is made using django such attempts won't even reach database.<br>
            As for the second one, it will look like this:
        </p>

        <div class="flex flex-grow pt-3 pt-b">
            <pre><code class="sql rounded-lg">SELECT * FROM users Where username ='' OR 1='1'</code></pre>
        </div>

        <p class="text-white pt-3 pb-3">
            Difference between these being, first query tries to get information about admin, the second one gains
            information
            about every entry in the table, it uses the same principle of one equals one but leaving username as empty
            string
            selects everything.<br>
        </p>

        <div class="flex flex-grow">
            <pre><code class="sql rounded-lg">SELECT * FROM database WHERE id = 1; DROP users--</code></pre>
        </div>

        <p class="text-white pb-3 pt-3">
            This query is meant to drop the table users. Other parameters here don't matter.
            <br>Since you can't see the fourth query fully, here is what it looks like:
        </p>

        <div class="flex flex-grow">
            <pre><code class="sql rounded-lg">user2' OR '1'='1';Update auth_user SET username='newUser' WHERE id=1;</code></pre>
        </div>

        <p class="text-white pt-3 pb-3">
            This UPDATE query changes any information in the table as long as you know the table and column name.
        </p>

        <div class="w-3/4">
            <div class="flex flex-grow">
                <pre><code class="sql rounded-lg w-2/4 2xl:w-3/4">user2' OR '1'='1';INSERT INTO auth_user VALUES ('12','asdasd','2023-03-31 15:26:48.454159', '0', 'InjectedUser', '', '', '', '0', '1', '2023-03-31 15:26:48.454159');</code></pre>
            </div>
        </div>

        <p class="text-white pt-3 pb-3">
            And here, we have an INSERT query. With such a query, you can insert your own users and even admin users.
        </p>

        <p class="text-white pt-3 pb-3">
            If you want to, below is a button where you can test the SQL attacks yourself. You can play around and try
            different kinds of attacks. My advice would be to start with the SELECT Injection. You can use that later to
            check if the other types work. However, populating the database first is recommended, so register a few users you want to work with.
        </p>

        <div class="p-2 rounded-full bg-gradient-to-r from-green-600 to-blue-600 inline-flex items-center font-medium">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"></path>

            </svg>
            <a href="/problems/injections/example">
                <button type="submit" class="pl-3 bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-full">
                    Try Injections
                </button>
            </a>
        </div>


        <p class="text-white pt-3 pb-5">
            These are the basics of SQL injections, let's take a look at how to prevent them on the next Tab.
        <BR><BR>
        If you want to learn more your can watch this video from <a href="https://www.youtube.com/@PortSwiggerTV"
                                                                    class="font-bold underline">PortSwigger</a>:
        </p>


        <div class="aspect-w-16 aspect-h-9">
            <iframe width="1264" height="480" src="https://www.youtube.com/embed/wX6tszfgYp4"
                    title="What is SQL injection? - Web Security Academy" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen></iframe>
        </div>

    </div>
{% endblock %}
</html>