Bezpieczny formularz na stronie internetowej

W tym artykule chciałbym opisać zabezpieczenie formularza poprzez bibliotekę jQuery Validation Plugin oraz mechanizm captcha przygotowany przez Cory LaViska.

jQuery Validation Plugin to biblioteka, która w prosty sposób pozwala na wdrożenie walidacji po stronie przeglądarki, a jej szerokie możliwości konfiguracji pozwalają zaoszczędzić mnóstwo czasu. Nie musimy bowiem tworzyć funkcji walidujących od podstaw, a jedynie ustawić konfigurację odpowiednią do naszych potrzeb. Nie będę tutaj jednak opisywał jak umieścić na stronie ten plugin. Jego wdrożenie jest na tyle proste, że nie powinno przysporzyć żadnych problemów.

Do przygotowania formularza będą potrzebne:

Zaczniemy od utworzenia w głównym katalogu projektu dwu pustych plików *.php. Jeden będzie zawierał formularz ( nazwijmy go form.php ), drugi – prosty mechanizm sprawdzający wartość wprowadzoną na formularzu z tą, która zostanie wyświetlona na obrazku z kodem captcha ( nazwijmy go check-form.php ).

Utwórzmy również katalog js, do którego skopiujemy pliki biblioteki jQuery Validation, oraz utwórzmy tam plik form-validate.js, w którym umieścimy konfiguracją dla naszych reguł walidacyjnych.

Przygotowywany przeze mnie formularz będzie wykorzystywał bibliotekę bootstrap, dlatego w pliku znajdą się dodatkowe deklaracje atrybutów css, jednak nie jest to konieczne do zapewnienia prawidłowego działania mechanizmu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document title</title>

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/screen.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/form-validate.js"></script>


</head>
	
<body>
	<div id="form_wrapper">
		<form class="form-horizontal" id="declarationForm">
          
          <div class="form-group">
            <label for="insuredName" class="col-sm-2 control-label"><img src="" alt="captcha-code" /></label>
            <div class="col-sm-10">
	            <input type="text" class="form-control" id="securityCaptcha" name="securityCaptcha" placeholder="wprowadż tekst z obrazka">
            </div>
          </div>
        
        </form>
	</div>
</body>
</html>

Jak widać jest to prosty formularz, który zawiera obrazek, pole tekstowe oraz dołączone pliki *.css oraz *.js

Działanie dołaczonego mechanizmu captcha opiera się na zmiennej sesyjnej $_SESSION[‘captcha’].
W naszym przypadku będzie to tablica asocjacyjna z dwoma polami :

  • code ( w tym polu przechowywana jest wartość, która jest widoczna na obrazku )
  • img_src ( ścieżka do obrazka z kodem)

Aby dołączyć mechanizm, w pliku formularza:

  • inicjujemy sesję, dołączamy plik z generatorem kodów, oraz inicjujemy tablicę $_SESSION[‚captcha’] poprzez umieszczenie na samym początku pliku form.php poniższego kodu
  • <?php
    session_start();
    $_SESSION = array();
    
    include("captcha.php");
    $_SESSION['captcha'] = simple_php_captcha();
    
    ?>
    
  • modyfikujemy plik formularza, jak poniżej
  • <img src="<?php echo $_SESSION['captcha']['image_src']?>" alt="captcha-code" />

Formularz jest gotowy. Możemy przystąpić do zaimplementowania reguł dla biblioteki jQuery Validation.

// JavaScript Document
$().ready(function(){
	
	var declarationForm = $( "#declarationForm" );
	
	declarationForm.validate({
		rules:{
			securityCaptcha:{
				required:true,
				remote: {
					url: "security-check.php",
					type: "post",
				}
			},
		},
		messages:{
			securityCaptcha:{
				required: "Wprowadź kod zabezpieczający widoczny na obrazku",
				remote: "Wprowadzony kod jest nieprawidłowy"
			},
		}
	});
});

Istotnym elementem jest tutaj dodanie dla pola securityCaptcha reguły remote. Reguła ta wysyła żądanie pod wskazany adres url i oczekuje na odpowiedź true lub false. W przypadku otrzymania true, walidator uznaje, że pole jest wypełnione poprawnie, w przeciwnym wypadku zostaje wyświetlony komunikat zdefiniowany w sekcji messages dla reguły remote.

Na koniec pozostaje jeszcze sprawdzenie czy w polu obok obrazka z kodem użytkownik wprowadził wartość zgodną z kodem na obrazku. Poniższy kod umieszczamy we wcześniej utworzonym pliku check-form.php

<?php
	session_start();
	$response = "false";
	
	if($_SESSION['captcha'] && $_POST['securityCaptcha']){
		$response = ($_SESSION['captcha']['code'] === $_POST['securityCaptcha']) ? "true" : $response;
	}
	
	echo $response;
?>