Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to pass a CSRF token with an Ajax request in Laravel?
CSRF stands for Cross-Site Request Forgeries. CSRF is a malicious activity performed by unauthorized users acting to be authorized. Laravel protects such malicious activity by generating a csrf token for each active user session that must be included with Ajax requests.
Generating CSRF Token
You can get the token in two ways
By using
$request?session()?token()By using 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 output for above is
13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d 13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d
CSRF Token in Blade Template
Inside blade template you can make use of @csrf directive that will help you generate the csrf token stored as hidden field
Example
<form method="POST" action="/student">
@csrf
<!-- Equivalent to... -->
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
</form>
Using CSRF Token with Ajax Request
To work with csrf token inside Ajax requests, you need to add the csrf token in head section of html
<meta name="csrf-token" content="{{ csrf_token() }}">
Include jQuery and set up Ajax headers to automatically include the CSRF token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Now make an 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;
}
});
Complete Example
ajaxtest.blade.php
<html>
<head>
<title>Ajax CSRF TOKEN Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function getData() {
$.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>
</head>
<body>
<div id='data'></div>
<button onClick='getData()'>Click Me</button>
</body>
</html>
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);
}
}
?>
routes/web.php
Route::get('ajaxtest',function() {
return view('ajaxtest');
});
Route::post('/getdata', [AjaxCSRFController::class, 'index']);
Conclusion
Always include CSRF tokens in Ajax requests by setting up the meta tag and using $.ajaxSetup() to automatically add the X-CSRF-TOKEN header. This ensures your Laravel application remains protected against CSRF attacks.
24K+ Views
