стрілка вверх

валідація HTML-форми

Валідація HTML-форми.

травень 2016

Стаття за ресурсом w3schools.com PHP 5 Form Validation.


1. Про перевірку даних форми

Розглянемо матеріал щодо валідації (перевірки) даних, що надходять від HTML-форми клієнта, застосовуючи ресурси PHP.


info label

В процесі розробки PHP-скрипту обробки HTML-форми зважайте на питання ВЕБ-БЕЗПЕКИ!

Правильна перевірка даних форми захистить вас від хакерів та спамерів!


HTML-форма даного розділу складається із полів, що призначенні для введення різних даних:
обов'язкових та необов'язкових текстових полів, кнопки вибору даних та кнопки активації HTML-форми, наприклад:


* поле обов'язкове для заповнення.

Ім'я: *

E-mail: *

Website

Коментарій:

Стать: Чоловіча Жіноча *





Правила перевірки вище наведеної форми будуть слідуючі:

Поле

Умова валідації даних

Ім'я

Обов'язкове. + Повинне складатись лише із літер та пробілів.

E-mail

Обов'язкове. + Повинне складатись із коректної електронної адреси (із @ та . )

Website

Необов'язкове. Якщо поле заповнюється, то повинне складатись із коректного URL.

Коментарій

Необов'язкове. Багаторядкове поле введення даних (textarea).

Стать

Обов'язкове.



Розглянемо код HTML-форми:

Текстові поля

Поля Імя, E-mail, та Website є текстовими полями введення даних, Коментарій є елементом форми textarea.

HTML код яких має вигляд:


Name: <input type="text" name="name">
E-mail: <input type="text" name="email">
Website: <input type="text" name="website">
Comment: <textarea name="comment" rows="5" cols="40"></textarea>


Елемент HTML-форми Radio

Поле Стать реалізовано за допомогою кнопки radio, HTML-код виглядає на зразок:

Стать:
<input type="radio" name="gender" value="female">жіноча
<input type="radio" name="gender" value="male">чоловіча


Елемент Form

HTML код для форми виглядає на зразок:


<form
   method="post"
   action="<?php
             echo htmlspecialchars($_SERVER["PHP_SELF"]);
                ?>"
>

Якщо активується кнопка форми input type="submit" дані відправляються до серверу, застосовуючи метод передачі даних method="post".


Що це за змінна $_SERVER["PHP_SELF"] ?

Змінна $_SERVER визначає деяку інформацію стосовно серверу, детальніше документація щодо визначеної змінної $_SERVER.

Змінна із атрибутом $_SERVER["PHP_SELF"] повертає назву поточного PHP-скрипту.


Таким чином за допомогою змінної $_SERVER["PHP_SELF"] дані відправляються до веб-сторінки за тією ж URL-адресою, що й HTML-форма.


Що таке htmlspecialchars() ?

Функція htmlspecialchars() перетворює деякі спеціальні символи до HTML сутностей.

Тобто це значить, що функція замінює HTML-символи такі як < та > на &lt; та &gt;.

Це унеможливлює зловмисне виконання кодів (HTML та Javascript кодування, Cross-site Scripting attacks), що передане через поле HTML-форми.


Безпека форми засобами PHP

Вираз $_SERVER["PHP_SELF"] може бути використаний хакерами!

Якщо, скажімо, ви застосовуєте параметр PHP_SELF на власній веб-сторінці, то зловмисник додавши слеш (/) та деякий Cross Site Scripting (XSS) зможе реалізувати його виконання.


info label

XSS (англ. Cross Site Scripting — «міжсайтовий скриптінг») — тип вразливості інтерактивних інформаційних систем у вебі.

XSS дозволяє зловмисникам впровадити зловмисний скрипт до веб-сторінки та виконати його на стороні клієнта під час перегляду даної веб-сторінки іншими користувачами.


Наприклад, якщо маємо HTML-форму на зразок:


<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">


Якщо користувач введе в адресній стрічці браузера URL на зразок "http://www.example.com/test_form.php", то код можна інтерпритувати так:



<form method="post" action="test_form.php">


ніби й все нормально...


Проте, давайте розглянемо якщо користувач введе в адресній стрічці ось таке кодування:

http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E


В такому випадку, цей код може бути інтерпритований як:



<form method="post" action="test_form.php/"><script>alert('hacked')</script>


Даний код додає тег скрипту та команду, що виводить інформаційне повідомлення. Коли ж сторінка завантажується, виконується кодування JavaScript, і відвідувач побачить повідомлення 'hacked'.

Поданий приклад показує вразливість застосування PHP_SELF за умови безпечного підходу перевірки даних HTML-форми.

Зважте, що будь-який JavaScript код може бути прописаний всередині тегу <script>. Наприклад, хакер таким чином зможе перенаправити відвідувача до іншого серверу та отримати конфіденційні дані користувача.


Як уникнути вразливості $_SERVER["PHP_SELF"]?

Вразливість виразу $_SERVER["PHP_SELF"] можна уникнути, якщо застосувавши функцію htmlspecialchars() .

Безпечне кодування HTML-форми матиме вигляд:



<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">


Функція htmlspecialchars() перетворює деякі спеціальні символи до HTML-сутностей і таким чином порушується виконання потенційно небезпечного коду. Якщо зловмисник намагається внести небезпечне кодування, але ми використовуємо додатково функцію htmlspecialchars() в PHP_SELF, то результат матиме вигляд:



<form method="post" action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">


Спроба внести шкідливе кодування до веб-застосунку в такому випадку зазнає невдачі!


Валідація даних HTML-форми засобами PHP

Перш за все всі дані, що надходять від клієнта, ми пропускаємо через PHP-функцію htmlspecialchars().

Коли ми використовуємо htmlspecialchars() функцію; і пізніше користувач намагатиметься вводити кодування на зразок:


<script>location.href('http://www.hacked.com')</script>

- це кодування не буде виконуватись, завдяки представлення символів кодування безпечними символами, на зразок:


&lt;script&gt;location.href('http://www.hacked.com')&lt;/script&gt;


Таким чином дані, що ввів користувач безпечні для показу на екрані монітору будь-якого відвідувача чи, наприклад, за потреби для розміщення всередині текстової інформації електронного листа.

Варто також додатково виконати ще такі операції над даними HTML-форми:

  1. Очистити дані форми від зайвих символів (extra space, tab, newline) за допомогою PHP-функції trim() .
  2. Видалити зворотній слеш (\) з вхідних даних застосовуючи PHP-функцію stripslashes() .

Наступним кроком буде створення функції, що виконує всі перевірки вхідних даних форми (застосування функції набагато зручніше, аніж прописувати одне й те ж кодування перевірки декілька раз).

Функцію можна назвати test_input().

В такому випадку, ми маємо можливість перевірити кожну змінну $_POST за допомогою новоствореної функції test_input(), а скрипт матиме вигляд:



<?php
// Визначаємо змінні та надаємо їм пусті значення
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
  $website = test_input($_POST["website"]);
  $comment = test_input($_POST["comment"]);
  $gender = test_input($_POST["gender"]);
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

Переглянути приклад »


Декілька слів про роботу поданого скрипту

Ми перевіряємо чи HTML-форма була активована перевіряючи наявність запиту $_SERVER["REQUEST_METHOD"]

Якщо ми отримали дані форми методом POST вони перевіряються функцією test_input().

Якщо ж форма не була активована - валідація форми пропускається.

Варто звернути увагу, що скрипт буде коректно працювати, якщо навіть деякі поля HTML-форми будуть пропущені.


Наступним кроком аналізу даних HTML-форми буде як реалізувати вимогу обовязкового заповнення поля форми та створення інформаційного повідомлення....



PHP - Обов'язкові поля для заповнення

Згідно вимог перевірки даних форми, поля Ім'я, E-mail, Стать обов'язкові для заповнення.

В наступному кодуванні перевірки даних HTML-форми ми створюємо додаткові змінні: $nameErr, $emailErr, $genderErr, та $websiteErr. Змінні виводять інформаційне повідомлення за умови наявності пустого поля HTML-форми. Наявність пустого повідомлення перевіряється для кожної змінної $_POST за допомогою PHP-функції empty() та умовного оператора if else. Якщо поле форми пусте, то використовуємо відповідне інформаційне повідомлення, якщо ж ні перевіряємо дані за допомогою функції test_input().


<?php
Визначаємо змінні та надаємо їм пусті значення
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Імя обовязкове";
  } else {
    $name = test_input($_POST["name"]);
  }

  if (empty($_POST["email"])) {
    $emailErr = "Email обовязковий";
  } else {
    $email = test_input($_POST["email"]);
  }

  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
  }

  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }

  if (empty($_POST["gender"])) {
    $genderErr = "Стать обовязкова для заповнення";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>



PHP - Виводимо повідомлення Error Messages

Пізніше ми додаємо невеличкий скрипт після кожного обов'язкового поля, що реалізує необхідне інформаційне повідомлення за необхідності (коли користувач намагається відправити форму з наявними пустими полями):


<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">

</form>



Слідуючим кроком буде визначити, наприклад, "- Чи введені дані складаються лише із літер та пробілів?", "- Чи коректна електронна адреса?" та "- Як перевірити коректну URL-адресу?"



PHP - Обов'язкові поля для заповнення

PHP-перевірка введенння коректного імені

Код поданий нижче,- просте рішення перевірки імені відвідувача, тобто чи складається імя із дозволених символів та пробілу.
Якщо введені дані некоректні, то створюється відповідне інформаційне повідомлення.


$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
  $nameErr = "Лише літери та пробіл дозволений";
}

Функція preg_match() перевіряє наявність шаблону символів у змінній $name. Функція preg_match() повертає значення true якщо є відповідність по символам, та повертає false якщо відповідних символів не знайдено. Документація php.net preg_match().


PHP-перевірка коректної електронної адреси

Найкращий спосіб перевірки коректної електронної адреси, це використання функції php-фільтру filter_var(). Документація php.net filter_var().

PHP-код, що перевіряє коректну електронну пошту:


$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $emailErr = "Невірний формат email";
}


PHP-перевірка коректної URL-адреси

Поданий нижче код, перевіряє коректну URL-адресу:


$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  $websiteErr = "Invalid URL";
}



Загалом скрипт виглядатиме на зразок:


<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
    }
  }

  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
    }
  }

  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "Invalid URL";
    }
  }

  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }

  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>

Переглянути приклад »



Корисні лінки

  1. Cross-site Scripting (XSS) Attack