index.php

<?php

    session_start();

    if(!isset($_COOKIE['csrf_session_cookie']) || !isset($_SESSION['csrf_session'])){
        header("location: ./_/login.php");
    }

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSRF Double Submit Cookies Pattern</title>

    <?php include (realpath(__DIR__)."/_/addons/header.php") ?>

</head>

<body>

    <ul class="nav justify-content-center mt-3">
        <?php
            if(isset($_COOKIE['csrf_session_cookie'])){
                echo 
                    '<li class="nav-item">
                        <form class="nav-link" method="POST" action="/src/service.php">
                            <button class="btn btn-link" type="submit" value="Logout" name="logout">Logout</button>
                        </form>
                    </li>';
            }
        ?> 
    </ul>

    <div class="container">
        <div class="row">

            <!-- csrf form block -->
            <div class="col-md-4 mx-auto align-self-center">
                <div class="card shadow my-5 p-3">
                    <div class="card-body">
                        <h5 class="card-title text-center">CSRF Token Example Form</h5>
                        <hr class="my-4">

                        <!-- csrf form -->
                        <form class="mt-3 mb-3" action="/src/service.php" method="POST">

                            <!-- csrf hidden input field -->
                            <input type="hidden" id="csrf_token" name="csrf_token" value="csrf" />

                            <div class="form-group">
                                <label for="php">Do you like PHP ?</label>
                                <input type="text" class="form-control" id="php" name="php" placeholder="not at all... ;) " required autofocus/>
                            </div>
                            <div class="form-group">
                                <label for="demo">Do you like this demo ?</label>
                                <input type="text" class="form-control" id="demo" name="demo" placeholder="waiting for your answer .... :D" required/>
                            </div>
                            <button type="submit" class="btn btn-success btn-block mt-5" name="verify">Submit</button>
                        </form>
                        <!-- End csrf form -->

                    </div>
                </div>
            </div>
            <!-- End csrf form block -->

            <!-- Description block -->
            <div class="col-md-6 mx-auto my-5 align-self-center">
                <h4>CSRF Double Submit Cookies Pattern</h4>
                <hr class="my-4">
                <p>
                    Provided form is a sample form to explain the <i>Double Submit Cookies Pattern</i>. This form contains
                    a hidden input field to store the CSRF token to verify the process of submission. <br/><br/> The generated
                    CSRF token which is stored inside a cookie is <b><i> <span id="csrf_token_string"></span> </i></b>
                </p>
                <br/>
                <p class="text-justify">
                    CSRF attacks are done by stealing the sessions and executing confidential moves with the server without any knowlegde to
                    the end-user. To brief, assume this application as a private banking site which is used to transfer money
                    between multiple accounts and users. The attacker can steal the session, and perform all the transactions
                    to his or any private account without your knowledge and interactions with the system. In order to perform
                    session stealing activity, attackers use custom crafted links and sites as promotional advertisements
                    to force the end-user to click on it.
                </p>
            </div>
            <!-- End Description block -->

        </div>
    </div>

    <!-- Description block -->
    <div class="container-fluid">
        <div class="row text-light bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 mx-auto my-5 align-self-center">

                        <p class="text-secondary text-justify">
                            CSRF tokens are introduced to prevent this act. There are several ways to implement and integrate CSRF tokens with the application
                            to perform private transactions by verifiying the token at the server end.This application is
                            built to demonstrate <b>Double Submit Cookies Pattern (DSCP)</b>,
                            where the CSRF token is generated by the server at the start of a user session and stored as
                            a cookie.
                        </p>
                        <p class="text-secondary text-justify">
                            When performing a POST or a form submission, front-end scripts (JavaScript) are tailored to extract the stored CSRF token
                            cookie from the cookie storage and to append the csrf token into a hidden input field which is
                            placed in the form. <br/><br/>The following code snippet represents
                            the hidden input field.
                        </p>
                        <p class="lead text-center">
                            &lt;input type="hidden" id="csrf_token" name="csrf_token" value="csrf" /&gt;
                        </p>
                        <br/>
                        <p class="text-secondary text-justify">
                            The following image shows the snippet of the form provided above, including the hidden field with a custom text value for
                            csrf token.
                        </p>
                        <br/>
                        <a class="text-muted disabled" href="https://github.com/athiththan11/csrf-double-submit-cookies-pattern-php" target="_blank">
                            <i data-feather="github"></i>
					        Github Repo
                        </a>
                    </div>

                    <div class="col-md-6 mx-auto align-self-center">
                        <img class="w-100" src="/www/img/dscp_form.png">
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- End Description block -->

    <!-- CSRF Token retrieve | from cookie storage -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        // function to extract generated CSRF token from stored cookie
        function extractToken() {

            var cookieName = "csrf_token_cookie=";
            var decodedCookies = decodeURIComponent(document.cookie);
            var cookies = decodedCookies.split(";");

            var token = null;

            for (var c in cookies) {

                var cookie = cookies[c];

                while (cookie.charAt(0) == ' ') {
                    cookie = cookie.substring(1);
                }

                if (cookie.indexOf(cookieName) == 0) {
                    token = cookie.substring(cookieName.length, cookie.length);
                }
            }

            return token;
        }

        // append function to append the CSRF token to a hidden field
        function appendToken() {
            document.getElementById("csrf_token").value = extractToken();
        }

        $(document).ready(function () {
            $("#csrf_token_string").text(extractToken());
            appendToken();
        })

        feather.replace();
    </script>

</body>

</html>