How to pass CSRF token via Ajax request in Laravel?

CSRF stands for Cross-Site Request Forgery. CSRF is malicious activity performed by an unauthorized user pretending to be authorized.

Laravel protects against such malicious activity by generating a csrf token for each active user session. The token is stored in the user's session. It is always regenerated if the session changes, so the token is verified every session to ensure an authorized user is performing any task. The following is an example of accessing csrf_token.

Generate csrf token

You can obtain the token in two ways.

• By using $request→session()→token()

• Use the csrf_token() method directly

Example

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller {
   public function index(Request $request) {
      echo $token = $request->session()->token();
      echo "<br/>";
      echo $token = csrf_token();
   }
}

Output

The above output is -

13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d
13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d

CSRF token in blade template

Whenever you have to use POST, PUT, PATCH, DELETE in html form, make sure to use csrf token as hidden field in html form. This will ensure that requests made are protected by CSRF middleware protection.

In blade template you can use @csrf directive to help you generate csrf token which can later be stored as a hidden field as shown below -

Example

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller {
   public function index(Request $request) {
      return view('hello');
   }
}

hello.blade.php

<form method="POST" action="/student">
   @csrf
   
   <!-- Equivalent to... -->
   <input type="hidden" name="_token" value="{{ csrf_token() }}" />
</form>

Using csrf tokens in Ajax requests

Ajax request will be used here and the csrf token will be passed in it. Using csrf tokens with Ajax. You need to add csrf token in head section of html like below -

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

Include the jquery file in the html because we will use $.ajaxSetup() and $.ajax to make the ajax calls.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Later call ajaxsetup using the header as shown below -

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

Now make the ajax call as shown below -

$.ajax({
   type:'POST',
   url:'/getdata',
   success:function(data) {
      $("#data").html(data.msg);
   },
   
   error: function (msg) {
      console.log(msg);
   var errors = msg.responseJSON;
   }
});

The complete code in ajaxtest.blade.php is -

   
   <meta name="csrf-token" content="{{ csrf_token() }}">
   
   
   <script>
      function getData() {
         console.log("ABCD");
         $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
         });
         $.ajax({
            type:'POST',
            url:'/getdata',
            success:function(data) {
               $("#data").html(data.msg);
            },
            error: function (msg) {
               console.log(msg);
               var errors = msg.responseJSON;
            }
         });
      }
   </script>


   

   '/ajaxtest'));?>
      'getData()']);?>
   

AjaxCSRFController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxCSRFController extends Controller {
   public function index() {
      $data = "Hello World";
      return response()->json(array('msg'=> $data), 200);
   }
}

Create a route for CSRF testing in routes/web.php

Route::get('ajaxtest',function() {
   return view('ajaxtest');
});
Route::post('/getdata',[AjaxCSRFController::class, 'index']);

Now click on the URL in your browser: http://localhost:8000/ajaxtest and you will get the following output-

The above is the detailed content of How to pass CSRF token via Ajax request in Laravel?. For more information, please follow other related articles on the PHP Chinese website!