jQuery add CSRF token to all $.post() requests' data
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>
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
.