Предотвращение повторной отправки формы при обновлении страницы

Быстрый ответ

Для предотвращения повторной отправки данных формы при обновлении страницы следует использовать подход Post/Redirect/Get (PRG). Этот подход предполагает выполнение 302-го редиректа после обработки POST-запроса, который перенаправляет пользователя либо на страницу подтверждения, либо обратно к исходной форме.

Пример реализации на PHP:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Обрабатываем данные формы и заботимся о безопасности
    header('Location: confirmation.php'); // Выходим из "опасной зоны"
    exit;
}

Такой способ обеспечивает повторный запуск процесса с GET-запросом к confirmation.php, предотвращая повторную отправку данных.

Защита данных пользователя

Важно удостовериться, что данные пользователя не потеряются в результате редиректа. Их можно сохранить в сессиях или куках, что позволит восстановить информацию пользователя после редиректа и обеспечит сохранность пользовательского опыта:

session_start(); // Инициируем сессию
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Сохраняем данные формы в сессии
    $_SESSION['form_data'] = $_POST;
    // Перенаправляем пользователя
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
} elseif (!empty($_SESSION['form_data'])) {
    // Восстанавливаем данные
    $form_data = $_SESSION['form_data'];
    // Очищаем сессию
    unset($_SESSION['form_data']);
}

Для хранения данных на клиентской стороне без обращения к серверу в JavaScript можно воспользоваться localStorage или sessionStorage.

Использование уникальных идентификаторов и обеспечение идемпотентности на сервере

Назначение уникального идентификатора на каждый запрос отправки формы позволяет привязать его к созданному на основе данных сессии или БД уникальному токену. После использования токен аннулируется, что не дает возможности его повторно использовать:

session_start(); // Выполняем старт сессии
$unique_id = bin2hex(random_bytes(16)); // Генерируем уникальный ID
$_SESSION['form_unique_id'] = $unique_id; // Сохраняем его в сессии

При обработке данных формы:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['form_unique_id'] === $_SESSION['form_unique_id']) { // Проверяем токен
        // Обрабатываем данные формы
        // Аннулируем токен после использования
        unset($_SESSION['form_unique_id']);
        header('Location: confirmation.php');
        exit;
    }
}

Укрепляем защиту на клиентской стороне

Помимо логики PRG на сервере, можно осуществить защиту на клиентской стороне с помощью JavaScript. Метод window.history.replaceState позволяет управлять историей браузера:

if (window.history.replaceState) {
    window.history.replaceState(null, null, window.location.href); // Убираем форму из истории браузера
}

Такой подход удаляет информацию формы из истории и предотвращает её повторную отправку при обновлении страницы.

Визуализация

Представьте себе отправку формы как запуск бумажного самолетика с сообщением:

До: [✉️🏗️] -> [🛫]

Если предохранительный механизм не реализован:

После: [✉️🏗️] -> [🛫🛫🛫]

С реализованным предохранителем:

После: [✉️🏗️] -> [🛫] -> [📭] – и ваш самолетик полетит строго в одном направлении!

Практики безопасности

Охранные данные и предохраняйте формы от атак типа "межсайтовая подделка запросов" (CSRF). Используйте токены и алгоритмы хеширования для создания надежных токенов. Валидация при обработке формы способствует укреплению безопасности.

Улучшение пользовательского опыта

Любые технологии, внедряемые в процесс, должны оставаться незаметными для пользователя и не вызывать дискомфорта. Чтобы снизить серверную нагрузку и исключить возможность повторной отправки, проводите валидацию на клиентской стороне перед отправкой данных на сервер.

Проверьте всё прежде, чем отдыхать

Регулярно просматривайте и тестируйте процесс обработки форм. Проверьте, чтобы серверная валидация и клиентская валидация надежно предотвращали повторную отправку данных формы.

Полезные материалы

1. Переадресации в HTTP – HTTP | MDN — подробное руководство MDN, разъясняющее принципы работы HTTP редиректов.
2. PHP: $_SESSION – Руководство — здесь вы сможете узнать об управлении сессиями в PHP и о работе с серверными состояниями.
3. Куки в JavaScript — будет полезно для тех, кто хочет получше узнать о управлении куками в JavaScript.
4. Post/Redirect/Get – Википедия — более детальный обзор шаблона PRG.
5. Руководство по формам HTML | web.dev — всесторонний ресурс, рассказывающий о формах HTML.
6. Межсайтовая подделка запросов (CSRF) | Фонд OWASP — изучите техники противодействия CSRF, предложенные OWASP, для обеспечения безопасности ваших форм.