jQuery add CSRF token to all $.post() requests' data
Solution 1
Your $.ajaxPrefilter
approach is a good one. You don't need to add a header, though; you simply need to add a property to the data
string.
Data is provided as the the second argument to $.post
, and then formatted as a query string (id=foo&bar=baz&...
) before the prefilter gets access to the data
option. Thus, you need to add your own field to the query string:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
if (options.type.toLowerCase() === "post") {
// initialize `data` to empty string if it does not exist
options.data = options.data || "";
// add leading ampersand if `data` is non-empty
options.data += options.data?"&":"";
// add _token entry
options.data += "_token=" + encodeURIComponent(csrf_token);
}
});
This will turn id=userID
into id=userID&_token=csrf_token
.
Solution 2
From Laravel documentation:
You could, for example, store the token in a "meta" tag:
Once you have created the meta tag, you can instruct a library like jQuery to add the token to all request headers. This provides simple, convenient CSRF protection for your AJAX based applications:
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
So for example you can do request like below.
Add this meta tag to your view:
<meta name="csrf-token" content="{{ csrf_token() }}">
And this is an example script which you can communicate with Laravel (sends request when you click an element with id="some-id" and you can see the response in an element with id="result"):
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
headers:
{ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
$("#some-id").on("click", function () {
var request;
request = $.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
},
datatype: "json"
});
request.done(function(msg) {
$("#result").html(msg);
});
request.fail(function(jqXHR, textStatus) {
$("#result").html("Request failed: " + textStatus);
});
});
});
</script>
Solution 3
Generally I agree with the concept Kornel suggested except one thing.
Yes, Laravel's docs advice to use $.ajaxSetup
, but it's not recommended since this method affects all the subsequent ajax requests. It is more correctly to set the ajax settings for each request. Though you can re-set stuff:
All subsequent Ajax calls using any function will use the new settings, unless overridden by the individual calls, until the next invocation of $.ajaxSetup()
If you use $.ajax()
, it's more convenient to utilize either data
property or headers
. Laravel allows CSRF-token both as a request parameter or a header.
First, you add the following meta tag into the view
<meta name="csrf-token" content="{{ csrf_token() }}">
And then make an ajax request either way:
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
_token: $('meta[name="csrf-token"]').attr('content')
},
datatype: "json"
});
OR
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
},
headers:
{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
datatype: "json"
});
Solution 4
The Django documentation on CSRF gives a nice code snippet with ajaxSetup
for automatically adding the appropriate header to all request types where it matters:
function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
NightMICU
Founder and CEO of Ophelia Design, a small web development firm in the Northern Neck of Virginia. I work mostly with PHP and the Laravel framework, Node, Python, Rails, LAMP stack, HTML5, Javascript, and jQuery.
Updated on April 30, 2020Comments
-
NightMICU about 4 years
I am working on a Laravel 5 app that has CSRF protection enabled by default for all POST requests. I like this added security so I am trying to work with it.
While making a simple
$.post()
request I received a'Illuminate\Session\TokenMismatchException'
error because the required form input_token
was missing from the POST data. Here is an example of a $.post request in question:var userID = $("#userID").val(); $.post('/admin/users/delete-user', {id:userID}, function() { // User deleted });
I have my CSRF token stored as a meta field in my header and can easily access it using:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
Is it possible to append this to the json data on all outgoing
$.post()
requests? I tried using headers but Laravel did not seem to recognize them -var csrf_token = $('meta[name="csrf-token"]').attr('content'); alert(csrf_token); $.ajaxPrefilter(function(options, originalOptions, jqXHR){ if (options['type'].toLowerCase() === "post") { jqXHR.setRequestHeader('X-CSRFToken', csrf_token); } });