Initial release

captcha-img.php

@@ -0,0 +1,10 @@
+<?php
+session_start();
+
+require("inc/captcha.class.php");
+
+
+$Captcha = new Captcha();
+$Captcha->getCaptcha();
+
+?>

icons/Icons made by Webalys.txt

@@ -0,0 +1,3 @@
+Visit their website: https://www.webalys.com ~ http://www.streamlineicons.com
+
+License: http://www.ego-icons.com/license.html

inc/captcha.class.php

@@ -0,0 +1,163 @@
+<?php
+
+class Captcha {
+    protected $session = array(
+        'folder_path'       => null,
+        'total_icons'       => 0,
+        'hashes'            => array(),
+        'icon_requests'     => 0,
+        'correct_icon'      => null,
+        'incorrect_icon'    => null,
+        'noise'             => 0
+    );
+
+    public $available = false; // Determines whether the captcha is good to use or not.
+
+    public function createSession() {
+        $this->incorrect_icon = 0;
+        $this->correct_icon = mt_rand(1, $this->session['total_icons']);
+
+        while($this->incorrect_icon === 0) {
+            $random = mt_rand(1, $this->session['total_icons']);
+
+            if($random !== $this->correct_icon) {
+                $this->incorrect_icon = $random;
+            }
+        }
+
+        $icon_array = $this->shuffleIcons();
+        $hash_array = array();
+        for($i = 0; $i < 5; $i++) {
+            $hash = $this->getHash("icon-" . $icon_array[$i] . "-" . $i);
+
+            $hash_array[$hash] = $icon_array[$i];
+        }
+
+        $this->session['hashes'] = $hash_array;
+        $this->session['icon_requests'] = 0;
+        $this->session['correct_icon'] = $this->correct_icon;
+        $this->session['incorrect_icon'] = $this->incorrect_icon;
+
+        $this->saveSession();
+    }
+
+    public function validateInput($input) {
+
+        if(empty($input) || !is_array($input) || count($input) === 0 || !isset($_SESSION['icon_captcha'])) {
+            return false;
+        }
+
+        $this->session = $_SESSION['icon_captcha'];
+        $correct_icons_count = 0;
+
+        foreach($input as $raw_hash) {
+            //Clean the hash
+            $hash = preg_replace("/[^a-zA-Z0-9]+/", "", $raw_hash);
+
+            //Check whether the hash exists in our current session, to avoid missing key errors
+            if(!array_key_exists($hash, $this->session['hashes'])) {
+                return false;
+            }
+
+            //Check whether an incorrect icon is selected
+            if($this->session['hashes'][$hash] === $this->session['incorrect_icon']) {
+                return false;
+            }
+
+            if($this->session['hashes'][$hash] === $this->session['correct_icon']) {
+                $correct_icons_count++;
+            }
+        }
+
+        if($correct_icons_count < 2) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function getCaptcha() {
+
+        header('Content-type: image/png');
+        header('Expires: 0');
+        header('Cache-Control: no-cache, no-store, must-revalidate');
+        header('Cache-Control: post-check=0, pre-check=0', false);
+        header('Pragma: no-cache');
+
+        if($_SESSION['icon_captcha']['icon_requests'] > 0 || !isset($_SESSION['icon_captcha'])) {
+            return;
+        }
+
+        $this->generateSprite();
+
+        $this->session = $_SESSION['icon_captcha']; // Get the current session
+        $this->session['icon_requests'] = 1; // Update the session values
+        $this->saveSession();
+    }
+
+    public function generateSprite() {
+        // Create the size of image or blank image
+        $sprite = imagecreate(150, 30);
+
+        // Set the background color of image
+        $background_color = imagecolorallocate($sprite, 255, 255, 255);
+
+        $session = $_SESSION['icon_captcha'];
+        $foreach_index = 0;
+        foreach($session['hashes'] as $hash => $icon_index) {
+            $tmp = imagecreatefrompng($session['folder_path'] . "/icon-" . ($icon_index) . ".png");
+            imagecopy($sprite, $tmp, ($foreach_index * 30), 0, 0, 0, 30, 30);
+            imagedestroy($tmp);
+
+            $foreach_index++;
+        }
+
+        if($session['noise'] > 0) {
+            $noise_color = imagecolorallocatealpha($sprite, 0, 0, 0, 126);
+
+            // Add some random pixels to the icon
+            for ($i = 0; $i < $session['noise']; $i++) {
+                $randX = mt_rand(0, 150);
+                $randY = mt_rand(0, 30);
+
+                imagesetpixel($sprite, $randX, $randY, $noise_color);
+            }
+        }
+
+        imagepng($sprite);
+        imagedestroy($sprite);
+    }
+
+    protected function shuffleIcons() {
+        $hashes = array($this->incorrect_icon, $this->incorrect_icon, $this->incorrect_icon, $this->correct_icon, $this->correct_icon);
+        shuffle($hashes);
+        return $hashes;
+    }
+
+    protected function getHash($image = null) {
+        return hash('tiger192,3', $image . hash('crc32b', uniqid('ic_', true)));
+    }
+
+    public function setIconsFolderPath($folder_path) {
+        $files = glob($folder_path . "/*.png");
+        if($files) {
+            $this->session['folder_path'] = $folder_path;
+            $this->session['total_icons'] = count($files);
+        }
+    }
+
+    public function addNoise($amount) {
+        $this->session['noise'] = (int)$amount;
+    }
+
+    public function hashArray() {
+        return $this->session['hashes'];
+    }
+
+    public function saveSession() {
+        $_SESSION['icon_captcha'] = $this->session;
+    }
+
+}
+
+?>

index.php

@@ -0,0 +1,96 @@
+<?php
+
+session_start();
+
+require("inc/captcha.class.php");
+
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+    <title>Icon Captcha</title>
+    <style>
+        .captcha-icon {
+            background-image: url('captcha-img.php');
+            background-repeat: no-repeat;
+            width: 30px;
+            height: 30px;
+        }
+
+        .captcha-icon.icon-1 {
+            background-position: 0 0;
+        }
+
+        .captcha-icon.icon-2 {
+            background-position: -30px 0;
+        }
+
+        .captcha-icon.icon-3 {
+            background-position: -60px 0;
+        }
+
+        .captcha-icon.icon-4 {
+            background-position: -90px 0;
+        }
+
+        .captcha-icon.icon-5 {
+            background-position: -120px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <?php
+
+        $Captcha = new Captcha();
+        $Captcha->setIconsFolderPath("./icons");
+        $Captcha->addNoise(1000);
+
+        if(isset($_POST['submit'])) {
+            if(!isset($_POST['captcha']) || !$Captcha->validateInput($_POST['captcha'])) {
+                echo "Invalid captcha";
+            }
+        }
+
+        $Captcha->createSession();
+        $captcha_values = $Captcha->hashArray();
+
+        ?>
+        <form action="" method="POST">
+            <div class="captcha-holder">
+                <div class="captcha-title">
+                    Select the image(s) that do not belong in the row
+                </div>
+                <div class="captcha-icons">
+                    <?php
+                        $index = 1;
+                        foreach($captcha_values as $hash => $image):
+                            ?>
+
+                    <label class="captcha-selector" for="icon-<?php echo $index; ?>">
+                        <div class="captcha-checkbox">
+                            <input type="checkbox" id="icon-<?php echo $index; ?>" name="captcha[]" value="<?php echo $hash; ?>">
+                            <span class="check"></spam>
+                        </div>
+                        <div class="captcha-icon icon-<?php echo $index; ?>"></div>
+                    </label>
+
+                            <?php
+                            $index++;
+                        endforeach;
+
+                    ?>
+                </div>
+            </div>
+            <div style="margin-top: 1em; text-align: center">
+                <button type="submit" name="submit">Validate captcha</button>
+            </div>
+        </form>
+    </div>
+</body>
+</html>

style.css

@@ -0,0 +1,81 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: #cccccc;
+    color: #171717;
+    font-size: 16px;
+}
+
+.container {
+    padding: 10px;
+    background: #ffffff;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    width: 400px;
+    margin: 0 auto;
+}
+
+.container .captcha-holder {
+    margin: 0 auto;
+}
+
+.captcha-holder {
+    position: relative;
+    max-width: 323px;
+    padding: 5px;
+    padding-bottom: 0;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.captcha-holder .captcha-title {
+    padding: 5px;
+    text-align: center;
+    font-size: 14px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.captcha-holder .captcha-icons {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.captcha-holder .captcha-icons .captcha-selector {
+    position: relative;
+    flex-basis: 20%;
+    text-align: center;
+    padding: 10px 0;
+    cursor: pointer;
+}
+
+.captcha-holder .captcha-icons .captcha-selector .captcha-icon {
+    margin: 0 auto;
+}
+
+.captcha-holder .captcha-icons .captcha-selector .captcha-checkbox {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+}
+
+.captcha-holder .captcha-selector .captcha-checkbox input[type=checkbox] {
+    display: none;
+}
+
+.captcha-holder .captcha-selector .captcha-checkbox .check {
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    left: 0;
+    bottom: 0;
+}
+
+.captcha-holder .captcha-selector .captcha-checkbox input[type=checkbox]:checked+span {
+    background: dodgerblue;
+}