Опубликовано: понедельник, 24 июля 2023 г. в 08:13

Как исправить ошибку 419 Page Expired/CSRF token mismatch

Источник: «How to Fix 419 Page Expired/CSRF token mismatch in Laravel?»

Использование CSRF-токенов добавляет дополнительный уровень безопасности, подтверждая, что запрос исходит от того же приложения, а не от вредоносного источника. Laravel обеспечивает встроенную защиту от CSRF-атак путём генерации и проверки CSRF-токенов.

Чтобы устранить ошибку 419 Page Expired, необходимо убедиться, что CSRF-токен включён в отправляемую форму, добавив @csrf после между открывающим и закрывающим тегами <form>. При этом в форму будет автоматически добавлено скрытое поле input, содержащее CSRF-токен.

Вот пример того, как будет выглядеть обновлённая форма с использованием @csrf:

<form method="POST" action="/your-route">
    @csrf
    <!-- Остальные элементы формы -->
</form>

В качестве альтернативы вы можете использовать csrf_field() в <form>, которая выглядит следующим образом:

<form method="POST" action="/your-route">
    {{ csrf_field() }}
    <!-- Остальные элементы вашей формы -->
</form>

Обратите внимание, что ошибка 419 Page Expired может возникнуть и при наличии токена. Обычно это означает, что пользователь был неактивен в течение определённого времени и срок действия токена истёк. Это можно исправить, просто обновив страницу и отправив форму заново.

В примерах кода выше мы узнали, как применить токен к обычной форме. Читайте дальше, чтобы узнать, как добавить CSRF-токен в запросы Ajax POST с помощью jQuery или Axios. Мы также узнаем, как отключить проверку CSRF-токена для определённого маршрута или всего приложения. Наконец, мы ответим на некоторые часто задаваемые вопросы о том, почему GET-запрос не требует CSRF верификации и почему API вообще не требуют её.

Как исправить 419 (unknown status) с помощью Ajax POST (jQuery)

При отправке формы с помощью AJAX из jQuery вы можете получить ответ об ошибке — 419 (unknown status).

Используя Laravel/jQuery, вы можете исправить ошибку 419 (unknown status), добавив вызов csrf_token() в раздел <head> и вызвав $.ajaxSetup, для настройки jQuery на добавление токена в заголовки всех последующих POST-запросов.

Выполните следующие шаги, чтобы применить это исправление к вашему коду:

Добавьте CSRF-токен в раздел <head>:

<head>
   <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

Добавьте вызов $.ajaxSetup:

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

Добавьте код jQuery для отправки POST-запроса:

<script>
    // Отправляем сокращённый jQuery POST:
    $.post('/formProcessor');

    // Или отправьте обычный jQuery POST:
    $.ajax({
        type: "POST",
        url: "/formProcessor"
    });
</script>

Полный пример (маршрут и вид):

routes/web.php:

Route::get('/form', function () {
    return view('form');
});

Route::post('/formProcessor', function () {
    return response('', 200);
});

/resources/views/form-jquery-ajax.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Ajax POST Example</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <button class="sendButton">Click me</button>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('.sendButton').click(function(){
            $.post('/formProcessor');
        });
    </script>
</body>
</html>

Использование Axios для отправки Ajax POST (нет необходимости устанавливать CSRF-токен)

Axios — это HTTP-клиент для JavaScript. Он значительно упрощает отправку AJAX POST-запросов. Он делает это, устраняя необходимость включать jQuery, устанавливать токен или вызывать функцию настройки. Я рекомендую использовать Axios в любом проекте, который отправляет Ajax-запросы из JavaScript.

По умолчанию Laravel поставляется с Axios и Vite. Для того чтобы использовать Axios, нам просто нужно выполнить следующие команды:

npm install
npm run build

Эти команды установили Axios и создали правильный .js файл в папке /public.

Теперь вы можете включить app.js и использовать Axios в своём коде для отправки POST-запроса, как показано в этом примере:

/resources/views/form-axios-ajax.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Ajax POST Example</title>
    @vite(['resources/js/app.js'])
</head>
<body>
<button class="sendButton">Click me</button>
<script>
    document.querySelector('.sendButton').addEventListener('click', function (event) {
        axios.post('/formProcessor', {
            // Полезная нагрузка запроса
            data: 'your-data'
        }).then(response => {
            // Обработка ответа
            alert('successful!');
        }).catch(error => {
            // Обработка ошибки
            console.error(error);
        });
    });
</script>
</body>
</html>

Как отключить проверку CSRF-токенов в Laravel

Чтобы отключить проверку токена CSRF для всех маршрутов в Laravel, вы можете удалить промежуточное программное обеспечение CSRF, выполнив следующие шаги:

Откройте файл app/Http/Kernel.php в вашем проекте Laravel.
Найдите свойство $middleware в классе Kernel.
Найдите middleware класс VerifyCsrfToken, который обычно указывается как \App\Http\Middleware\VerifyCsrfToken::class.
Удалите или закомментируйте строку, содержащую middleware класс VerifyCsrfToken.
Например, измените:
app/Http/Kernel.php:
```
\App\Http\Middleware\VerifyCsrfToken::class,
```
на
```
// \App\Http\Middleware\VerifyCsrfToken::class,
```
Сохраните изменения в файле Kernel.php.

Удалив middleware VerifyCsrfToken, проверка маркера CSRF будет отключена для всех маршрутов в вашем приложении Laravel. Однако помните, что этот подход устраняет важную меру безопасности, поэтому используйте его с осторожностью и только в конкретных случаях, когда защита CSRF не требуется.

Как отключить CSRF-токен только для определённого маршрута

Чтобы отключить проверку CSRF-токена для определённого маршрута в Laravel, вы можете исключить маршрут из защиты CSRF, изменив middleware CSRF. Вот как это можно сделать:

Откройте файл app/Http/Middleware/VerifyCsrfToken.php в вашем проекте Laravel.
В классе VerifyCsrfToken найдите свойство except. Это свойство определяет URI, которые должны быть исключены из проверки CSRF-токенов.
Добавьте URI маршрута, который вы хотите исключить из защиты CSRF, в массив except. Например, если вы хотите исключить маршрут /example из проверки CSRF, добавьте следующую строку в массив except:
app/Http/Middleware/VerifyCsrfToken.php:
```
protected $except = [
  '/example',
];
```
Если вам нужно исключить несколько маршрутов, вы можете добавить их в массив через запятую.
Сохраните изменения в файле VerifyCsrfToken.php.

Существуют обоснованные случаи использования отключения VerifyCsrfToken для определённых маршрутов. Например, чтобы наше приложение могло получать обратные вызовы от сторонних систем, например, от поставщика платежей. Обычно это используется для обновления статуса заказа до оплаченного.

Добавив конкретный маршрут в массив except в middleware VerifyCsrfToken, Laravel обойдёт проверку CSRF-токена для этого маршрута. Важно отметить, что хотя этот подход может быть полезен в определённых сценариях, отключение CSRF защиты должно выполняться осторожно и только в случае необходимости для обеспечения безопасности вашего приложения.

Почему маршруты API Laravel не используют проверку CSRF-токена

Стоит отметить, что в Laravel middleware для проверки CSRF-токенов намеренно не добавляется автоматически в маршруты API.

Маршруты API Laravel не используют проверку CSRF (Cross-Site Request Forgery) по умолчанию из-за своей stateless природы. API обычно работают в режиме stateless, то есть они не хранят данные сессии и не поддерживают состояние клиента между запросами.

Вместо этого API используют механизмы аутентификации на основе токенов, такие, как JWT (JSON Web Tokens) или OAuth для аутентификации и авторизации запросов. Такая аутентификация на основе токенов обеспечивает безопасный механизм без необходимости использования CSRF-токенов. Однако для традиционных веб-форм защита от CSRF остаётся крайне важной.

Почему к GET-запросам Laravel не применяется проверка CSRF-токена

CSRF-токен требуется в любых запросах POST, PUT, PATCH или DELETE, которые отправляются с веб-сайта. Но почему он не требуется, когда мы отправляем GET-запрос?

GET-запросы обычно используются для получения данных и считаются безопасными, поскольку они не должны изменять данные на стороне сервера. Поскольку CSRF атаки основаны на несанкционированных модификациях, применение CSRF-токенов к GET-запросам не требуется.

Для полноты картины стоит упомянуть, что запросы OPTIONS и HEAD также считаются запросами только для чтения, которые, как и GET-запросы, не требуют проверки CSRF-токена. Как показывает официальный код VerifyCsrfToken Middleware:

VerifyCsrfToken.php:

protected function isReading($request)
{
    return in_array($request->method(), ['HEAD', 'GET', 'OPTIONS']);
}

Заключение

В этой статье рассматривалось, как устранить ошибки 419 Page Expired и CSRF token mismatch в Laravel при использовании обычных форм или Ajax-запросов POST, отправленных с помощью jQuery или Axios.

Кроме того, в статье было показано, как можно отключить проверку CSRF-токена для определённого маршрута и как её можно отключить полностью. Наконец, мы также объяснили, почему маршруты API не используют проверку CSRF-токена по умолчанию и почему GET-запросы в Laravel не проверяют токен CSRF.

Надеюсь, эта статья будет вам полезна. Счастливого кодинга!