Csrf token mismatch ошибка что делать

Если вы столкнулись с ошибкой «истек CSRF-токен» — читайте нашу статью. Из неё вы узнаете, как работает CSRF-token защита, и что делать, если CSRF токен истек.

Что такое CSRF

CSRF (англ. cross-site request forgery) — это межсайтовая подделка запроса. Это атака, которой может подвергаться любой веб-ресурс или веб-приложение. В первую очередь это касается сайтов, которые используют cookies, сертификаты авторизации и браузерную аутентификацию. В результате атаки страдают клиенты и репутация ресурса.

Вредоносный скрипт прячется в коде сайта или обычной ссылке. С помощью него мошенник получает доступ к конфиденциальной информации: платежным реквизитам, логину и паролю, личной переписке. После того как данные “в кармане”, хакер может изменить пароль, указать свой номер телефона или email, перевести деньги на свой счёт и многое другое.

Как работает CSRF-атака

Злоумышленник может использовать фишинговую ссылку — это наиболее распространенный способ обмана. В этом случае атака работает по следующей схеме:

CSRF-атаки случаются из-за того, что без специальных настроек сервер не может с точностью в 100% определить, кто именно выполняет действия со стороны пользователя. Он не может проверить, действительно ли на кнопку “оплатить” нажал тот пользователь, который изначально открыл страницу с оплатой. Хакеры активно используют этот люфт в безопасности HTTP-запросов и применяют вредоносные скрипты. Однако от атаки можно защититься с помощью CSRF-токенов. 

Что такое CSRF-token и как он работает

В общем понимании токен — это механизм, который позволяет идентифицировать пользователя или конкретную сессию для безопасного обмена информацией и доступа к информационным ресурсам. Токены помогают проверить личность пользователя (например, клиента, который онлайн получает доступ к банковскому счёту). Их используют как вместо пароля, так и вместе с ним. Токен — это в каком-то смысле электронный ключ.

CSRF-token — это максимально простой и результативный способ защиты сайта от CSRF-мошенников. Он работает так: сервер создаёт случайный ключ (он же токен) и отправляет его браузеру клиента. Когда браузер запрашивает у сервера информацию, сервер, прежде чем дать ответ, требует показать ключ и проверяет его достоверность. Если токен совпадает, сессия продолжается, а если нет — прерывается. Токен действителен только одну сессию — с новой сессией он обновляется.

Чтобы получить ответ от сервера, используются разные методы запроса. Условно они делятся на две категории: те, которые не изменяют состояние сервера (GET, TRACE, HEAD), и те, которые изменяют (PUT, PATCH, POST и DELETE). Последние имеют большую CSRF-уязвимость и поэтому должны быть защищены в первую очередь.

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

• нахождение в скрытом параметре;

• генерация с помощью генератора псевдослучайных чисел;

• ограниченное время жизни (одна сессия);

• уникальность для каждой транзакции;

• устойчивый к подбору размер (в битах);

• невозможно переиспользовать.

Типы токенов

Существует три основных типа токенов по способу генерации:

Помимо токенов, для защиты используется флаг Same-Site (большинство браузеров его поддерживает). Он работает напрямую для cookies и позволяет помечать куки конкретного домена. Сервер проверяет, содержатся ли нужные пометки в куках страницы, с которых происходит оплата или вносятся изменения. Если пометок нет — сессия прекращается.

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

«Истек срок действия токена» или «CSRF-значение недопустимо»: что это значит и что делать

Даже при авторизации на сайтах, для которых настроена защита от атак, можно встретить следующие варианты сообщения об ошибке: «Недопустимое CSRF-значение»/«CSRF-токены не совпадают» или «Token expired» (в переводе — срок действия токена истек). Сообщение может отображаться как на английском, так и на русском. Пример ошибки при авторизации на сайте REG.RU:

Обычно ошибка возникает по двум основным причинам:

• сервер некорректно сгенерировал токен;

• срок токена истек — пользователь долго не совершал никаких действий на странице.

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

Иногда ошибка возникает из-за расширений защиты конфиденциальности или плагинов блокировки рекламы (например, Ghostery, UBlock Origin, Blur), которые настроены у пользователя. В этом случае можно отключить расширение. Также можно добавить сайт, на котором появилось сообщение, в список доверенных сайтов.

На примере сайта reg.ru покажем, что для этого нужно:

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

Заключение

Успешная атака CSRF позволяет хакеру действовать на сайте от имени другого зарегистрированного посетителя. Чтобы мошенник не добрался до конфиденциальных данных, для сайта нужно настроить один из типов CSRF-токенов. Токены позволяют серверу и браузеру безопасно обмениваться информацией в течение сессии. Однако даже на безопасных сайтах можно столкнуться с ошибкой «токен CSRF истек». В этом нет ничего страшного. Чтобы возобновить подключение, достаточно обновить страницу браузера.

If you are using template files, than you can put your meta tag in the head section (or whatever you name it) which contain your meta tags.

@section('head')
<meta name="csrf_token" content="{{ csrf_token() }}" />
@endsection

Next thing, you need to put the headers attribute to your ajax(in my example, I am using datatable with server-side processing:

"headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')}

Here is the full datatable ajax example:

$('#datatable_users').DataTable({
        "responsive": true,
        "serverSide": true,
        "processing": true,
        "paging": true,
        "searching": { "regex": true },
        "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
        "pageLength": 10,
        "ajax": {
            "type": "POST",
            "headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            "url": "/getUsers",
            "dataType": "json",
            "contentType": 'application/json; charset=utf-8',
            "data": function (data) {
                console.log(data);
            },
            "complete": function(response) {
                console.log(response);
           }
        }
    });

After doing this, you should get 200 status for your ajax request.

Hi All,

So I’ve been spending some time with the issue and I’ve gotten a little bit closer to solving it.

Updated CORS Library

First, I updated my CORS library to be the BarryVDH (which is now fruitcake/laravel-cors). I did this because it was mentioned by Taylor that it will be integrated in Laravel 7.0 (https://twitter.com/taylorotwell/status/1216198072319037440?s=20) and I figured, the best way to test would be to use the package.

Current CORS Config

The changes to the default config are as follows:

'paths' => [
    'airlock/csrf-cookie',
    'login',
    'api/*'
],

and

'allowed_origins' => ['http://localhost:3000'],

I explicitly set the allowed_origins to my local host and NOT the *. I read about this within the Axios GitHub (sorry I lost the link), but it mentioned that for any POST, we had to explicitly set the origin.

Airlock Config

I also set the airlock config to explicitly be my Nuxt domain as well:

'stateful' => [
    'http://localhost:3000',
],

Nuxt Login Call

Since I’m working within Nuxt, I wanted to limit the amount of variables and use their Auth package. The call I make for authentication is as follows:

this.$axios.get('https://API/airlock/csrf-cookie', {
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    },
    withCredentials: true
}).then(function( response ){
    this.$auth.loginWith('local', {
        data: {
            email: this.email,
            password: this.password
        },
        withCredentials: true,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        },
    });
}.bind(this));

I ensure that the withCredentials is set to true so it passes the cookies correctly.

Now when I inspect my request, I see that under the cookies sent with the request, the XSRF-TOKEN is being sent along to the POST /login route. @robertotcestari I had the same issue where these weren’t being sent, but the current config I have set up, sends the cookies.

This is great! However, I’m still getting a 419 response.

Current Questions

Diving into the VerifyCsrfToken.php middleware, it looks for the header X-CSRF-TOKEN or X-XSRF-TOKEN. Since these are not headers in my request (they are in the cookies), do I have to set up Axios to send as a header? If so, is there any instructions on how to send as a header vs a cookie?

Thanks a ton!

UPDATE

So it’s definitely Axios needing to send the cookie as a header. The IlluminateFoundationHttpMiddlewareVerifyCsrfToken.php checks the header of the request for the X-XSRF-TOKEN and currently axios is passing it as the XSRF-TOKEN cookie.

In my testing environment, with the same variables I have listed above, I forked and modified the middleware to read the cookie, and it worked!

Hi Dev,

Today, in this article i will explain you laravel csrf token mismatch on ajax request

so i will here show two solution method of csrf token mismatch on ajax request in laravel 9.

So, Sometimes if you use ajax form with laravel 9 you will get an error message in front of you related to csrf token mismatch and 419 status code in laravel app.

You are getting error message like this,

Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app

• csrf token mismatch laravel ajax
• message csrf token mismatch in ajax call
• csrf token mismatch laravel api
• axios csrf token laravel
• laravel csrf token expiration time
• csrf token mismatch laravel postman
• laravel csrf token mismatch on ajax post a second time
• send token in ajax in laravel

Here, you will face above error message in csrf token mismatch on ajax request laravel 9 so simply follow my below step.

Solution 1: CSRF Token Mismatch

In this first step, You can simply open your view blade file and paste the below code in to top of the head section.

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

Next, open your blade view file get the csrf token and add the below ajax code in your laravel project.

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




  


                       
  



});
$.ajax({
   // your ajax code
});

Solution 2: CSRF Token Mismatch

Next, in this second Solution you facing this issue like a status code: 419 unknown status and csrf token mismatch in your laravel app so you can just following below code.

So, open your blade view file and add the following line of code into your blade view file head section.

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




  


                       
  

So, you can see how to send csrf token in your laravel ajax form method:

$.ajax({
    type: "POST",
    url: '/your_url',
    data: { somefield: "Some field value", _token: '{{csrf_token()}}' },
    success: function (data) {
       console.log(data);
    },
    error: function (data, textStatus, errorThrown) {
        console.log(data);




  


                       
  



    },
});

I hope it can help you…

Тест на localhost

• Серверная часть приложения на Laravel для API-запросов: localhost:8080
• Клиентская часть на Nuxt: localhost:3000

Перечислю основные части для максимальной краткости.

Каждый раз (Nuxt), загружая любую страницу (localhost:3000), перед отрисовкой в методе nuxtServerInit(), делается post-запрос для получения данных:

export const actions = {
    async nuxtServerInit({ state }) {
        await this.$axios.post('/init')
        .then((result) => {
            state.data = result.data;
        });
    }
}

В контроллере (Laravel), отправляем в ответе токен:

public function index(Request $request)
    {
        $state = array(
            'token' => csrf_token()
        );
    
        return json_encode($state);
    }

В файле appHttpKernel.php:

protected $middlewareGroups = [
        ...
        'api' => [
            AppHttpMiddlewareEncryptCookies::class,
            IlluminateCookieMiddlewareAddQueuedCookiesToResponse::class,
            IlluminateSessionMiddlewareStartSession::class,
            IlluminateViewMiddlewareShareErrorsFromSession::class,

            AppHttpMiddlewareVerifyCsrfToken::class,

            'throttle:60,1',
            IlluminateRoutingMiddlewareSubstituteBindings::class,
        ],
    ];

Чтобы этот запрос не был отклонён нужно указать исключение главного маршрута в appHttpMiddlewareVerifyCsrfToken.php :

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        'api/init'
    ];
}

Теперь для теста создадим vue-страницу с формой (ниже сокращённая версия) и отправку будем осуществлять пользовательским методом:

<form @submit.prevent="submit">
	...
</form>

Ниже скриптовая часть на этой же странице. Здесь получаем токен из хранилища, который ранее получили в запросе перед отрисовкой страницы в методе nuxtServerInit().

<script>
export default {
    components: {
    },
    data() {
        return {
            form: {
                _token: this.$store.getters.params.token,
                name: '',
                email: '',
                message: ''
            }
        }
    },
    methods: {
        async submit() {
            await this.$axios.post('contacts', this.form)
            .then((result) => {
                console.log('post >', result.data);
            });
        }
    }
}
</script>

Пробуем отправить данные из формы и получаем ошибку:

419: CSRF token mismatch.

Что в этой схеме неправильно? Как получить токен, который затем можно использовать в post-запросах на таком простом примере?

Now, let’s see post of laravel csrf token mismatch on ajax request. you will learn csrf token mismatch laravel ajax. I would like to share with you csrf token mismatch laravel angular. I’m going to show you about laravel ajax csrf token mismatch.

If you are working on laravel ajax form and you found error with csrf token mismatch and 419 status code then i will help you how to solve it.

Moreover, if you found following errors then also you can use this solution. see bellow error messages.

• csrf token mismatch laravel ajax
• laravel csrf token expiration time
• csrf token mismatch laravel postman
• laravel csrf token mismatch on ajax post a second time
• message csrf token mismatch in ajax call
• csrf token mismatch laravel api
• axios csrf token laravel

You can use this solution with laravel 6, laravel 7, laravel 8 and laravel 9 versions as well.

So, let’s see two solution and you can use what ever you want:

Solution 1:

Here, you need to add meta tag with csrf-token token and use this token when you fire ajax as bellow blade file code:

In Header:

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

In Script:

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

Full Example:

<!DOCTYPE html>
<html>



  


                       
  



<head>
    <title>Laravel 9 Ajax Post Request Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container">
    <div class="card bg-light mt-3">



  


                       
  



        <div class="card-header">
            Laravel 9 Ajax Post Request Example - ItSolutionStuff.com
        </div>
        <div class="card-body">
            <button type="button" class="btn btn-success float-end" data-bs-toggle="modal"  data-bs-target="#postModal">
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">



  


                       
  



  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Post</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form >
            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>



  


                       
  



            </div>
            <div class="mb-3">
                <label for="titleID" class="form-label">Title:</label>
                <input type="text" id="titleID" name="name" class="form-control" placeholder="Name" required="">
            </div>
            <div class="mb-3">
                <label for="bodyID" class="form-label">Body:</label>
                <textarea name="body" class="form-control" id="bodyID"></textarea>
            </div>
            <div class="mb-3 text-center">



  


                       
  



                <button class="btn btn-success btn-submit">Submit</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
    $.ajaxSetup({



  


                       
  



        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(".btn-submit").click(function(e){
        e.preventDefault();
        var title = $("#titleID").val();



  


                       
  



        var body = $("#bodyID").val();
        $.ajax({
           type:'POST',
           url:"{{ route('posts.store') }}",
           data:{title:title, body:body},
           success:function(data){
                if($.isEmptyObject(data.error)){
                    alert(data.success);
                    location.reload();
                }else{
                    alert('Something is wrong');
                }
           }
        });
    });
</script>
</html>

Solution 2:

Here, we will pass csrf-token token with ajax code. so you can see below code:

<script type="text/javascript">
$(".btn-submit").click(function(e){
    e.preventDefault();
    var title = $("#titleID").val();
    var body = $("#bodyID").val();
    $.ajax({
       type:'POST',
       url:"{{ route('posts.store') }}",
       data:{ title:title, body:body, _token: "{{csrf_token()}}" },
       success:function(data){
            if($.isEmptyObject(data.error)){
                alert(data.success);
                location.reload();
            }else{
                alert('Something is wrong');
            }
       }
    });
});
</script>

Full Example:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Ajax Post Request Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
</head>
<body>
<div class="container">
    <div class="card bg-light mt-3">
        <div class="card-header">
            Laravel 9 Ajax Post Request Example - ItSolutionStuff.com
        </div>
        <div class="card-body">
            <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#postModal">
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Post</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form >
            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>
            </div>
            <div class="mb-3">
                <label for="titleID" class="form-label">Title:</label>
                <input type="text" id="titleID" name="name" class="form-control" placeholder="Name" required="">
            </div>
            <div class="mb-3">
                <label for="bodyID" class="form-label">Body:</label>
                <textarea name="body" class="form-control" id="bodyID"></textarea>
            </div>
            <div class="mb-3 text-center">
                <button class="btn btn-success btn-submit">Submit</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
    $(".btn-submit").click(function(e){
        e.preventDefault();
        var title = $("#titleID").val();
        var body = $("#bodyID").val();
        $.ajax({
           type:'POST',
           url:"{{ route('posts.store') }}",
           data:{ title:title, body:body, _token: "{{csrf_token()}}" },
           success:function(data){
                if($.isEmptyObject(data.error)){
                    alert(data.success);
                    location.reload();
                }else{
                    alert('Something is wrong');
                }
           }
        });
    });
</script>
</html>

I hope it can help you…