jQuery 将 CSRF 令牌添加到所有 $.post() 请求的数据
jQuery add CSRF token to all $.post() requests' data
我正在开发一个 Laravel 5 应用程序,它默认为所有 POST 请求启用 CSRF 保护。我喜欢这种增加的安全性,所以我正在尝试使用它。
在发出简单的 $.post()
请求时,我收到了一个 'Illuminate\Session\TokenMismatchException'
错误,因为 POST 数据中缺少所需的表单输入 _token
。下面是一个 $.post 请求的例子:
var userID = $("#userID").val();
$.post('/admin/users/delete-user', {id:userID}, function() {
// User deleted
});
我将我的 CSRF 令牌作为元字段存储在我的 header 中,并且可以使用以下方式轻松访问它:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
是否可以将此附加到所有传出 $.post()
请求的 json 数据中?我尝试使用 headers 但 Laravel 似乎无法识别它们 -
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);
}
});
您的 $.ajaxPrefilter
方法很好。不过,您不需要添加 header;您只需要在 data
字符串中添加一个 属性。
数据作为 $.post
的第二个参数提供,然后在预过滤器访问 data
选项之前格式化为查询字符串 (id=foo&bar=baz&...
)。因此,您需要将自己的字段添加到查询字符串中:
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);
}
});
这会将 id=userID
变成 id=userID&_token=csrf_token
。
我认为上述解决方案可能效果不佳。当你这样做时:
var x;
x + ""
// "undefined" + empty string coerces value to string
您将获得类似 "undefined_token=xxx"
的数据
当您使用上述解决方案进行 laravel 的删除时,您必须像这样检查:
if (typeof options.data === "undefined")
options.data = "";
else
options.data += "&";
options.data = "_token=" + csrf_token;
来自 Laravel 文档:
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')
} });
例如,您可以执行如下请求。
将此元标记添加到您的视图中:
<meta name="csrf-token" content="{{ csrf_token() }}">
这是一个示例脚本,您可以与 Laravel 通信(当您单击 id="some-id" 的元素时发送请求,您可以在 id=[ 的元素中看到响应=22=]):
<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>
大体上我同意 Kornel 提出的概念,除了一件事。
是的,Laravel 的文档建议使用 $.ajaxSetup
,但不推荐,因为此方法会影响所有后续的 ajax 请求。为每个请求设置 ajax 设置更正确。虽然你可以 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()
如果您使用 $.ajax()
,使用 data
属性 或 headers
更方便。 Laravel 允许 CSRF-token 作为请求参数或 header.
首先,将以下元标记添加到视图中
<meta name="csrf-token" content="{{ csrf_token() }}">
然后以任一方式发出 ajax 请求:
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
_token: $('meta[name="csrf-token"]').attr('content')
},
datatype: "json"
});
或
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
},
headers:
{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
datatype: "json"
});
Django documentation on CSRF 给出了一个很好的代码片段 ajaxSetup
用于自动将适当的 header 添加到重要的所有请求类型:
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);
}
}
});
有一种更简单的方法可以做到这一点,您可以在发送之前像这样序列化数据
<form method="post" id="formData">
<input type="text" name="name" >
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="submit" id="sub" class="btn btn-default" value="Submit" />
</form>
<script>
$(document).on('submit', '#formData', function (event) {
event.preventDefault();
var formData = $('#formData').serialize();
$.ajax({
url: url,
type: "POST",
data : formData,
success: function (result) {
console.log(result);
}
});
});
});
</script>
名称为 attr 的所有内容都将放入查询并提交
无需设置任何 元标记 csrf_token() 和
csrf_field() !
您可以使用这个 jQuery 片段:
$.ajaxPrefilter(function( settings, original, xhr ) {
if (['post','put','delete'].includes(settings.type.toLowerCase())
&& !settings.crossDomain) {
xhr.setRequestHeader("X-XSRF-TOKEN", getCookie('XSRF-TOKEN'));
}
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
只有少数其他答案试图设置 csrf header 但根据 Laravel 文档 (here) ,header 键应该是 "X-XSRF-TOKEN" 和 Laravel 本身在名为 "XSRF-TOKEN"
的 cookie 中为我们的每个请求提供所需的值
所以只是更正了键并编辑了几行,谢谢
我正在开发一个 Laravel 5 应用程序,它默认为所有 POST 请求启用 CSRF 保护。我喜欢这种增加的安全性,所以我正在尝试使用它。
在发出简单的 $.post()
请求时,我收到了一个 'Illuminate\Session\TokenMismatchException'
错误,因为 POST 数据中缺少所需的表单输入 _token
。下面是一个 $.post 请求的例子:
var userID = $("#userID").val();
$.post('/admin/users/delete-user', {id:userID}, function() {
// User deleted
});
我将我的 CSRF 令牌作为元字段存储在我的 header 中,并且可以使用以下方式轻松访问它:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
是否可以将此附加到所有传出 $.post()
请求的 json 数据中?我尝试使用 headers 但 Laravel 似乎无法识别它们 -
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);
}
});
您的 $.ajaxPrefilter
方法很好。不过,您不需要添加 header;您只需要在 data
字符串中添加一个 属性。
数据作为 $.post
的第二个参数提供,然后在预过滤器访问 data
选项之前格式化为查询字符串 (id=foo&bar=baz&...
)。因此,您需要将自己的字段添加到查询字符串中:
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);
}
});
这会将 id=userID
变成 id=userID&_token=csrf_token
。
我认为上述解决方案可能效果不佳。当你这样做时:
var x;
x + ""
// "undefined" + empty string coerces value to string
您将获得类似 "undefined_token=xxx"
的数据当您使用上述解决方案进行 laravel 的删除时,您必须像这样检查:
if (typeof options.data === "undefined")
options.data = "";
else
options.data += "&";
options.data = "_token=" + csrf_token;
来自 Laravel 文档:
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') } });
例如,您可以执行如下请求。
将此元标记添加到您的视图中:
<meta name="csrf-token" content="{{ csrf_token() }}">
这是一个示例脚本,您可以与 Laravel 通信(当您单击 id="some-id" 的元素时发送请求,您可以在 id=[ 的元素中看到响应=22=]):
<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>
大体上我同意 Kornel 提出的概念,除了一件事。
是的,Laravel 的文档建议使用 $.ajaxSetup
,但不推荐,因为此方法会影响所有后续的 ajax 请求。为每个请求设置 ajax 设置更正确。虽然你可以 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()
如果您使用 $.ajax()
,使用 data
属性 或 headers
更方便。 Laravel 允许 CSRF-token 作为请求参数或 header.
首先,将以下元标记添加到视图中
<meta name="csrf-token" content="{{ csrf_token() }}">
然后以任一方式发出 ajax 请求:
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
_token: $('meta[name="csrf-token"]').attr('content')
},
datatype: "json"
});
或
$.ajax({
url: "/your/url",
method: "POST",
data:
{
a: 'something',
b: 'something else',
},
headers:
{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
datatype: "json"
});
Django documentation on CSRF 给出了一个很好的代码片段 ajaxSetup
用于自动将适当的 header 添加到重要的所有请求类型:
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); } } });
有一种更简单的方法可以做到这一点,您可以在发送之前像这样序列化数据
<form method="post" id="formData">
<input type="text" name="name" >
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="submit" id="sub" class="btn btn-default" value="Submit" />
</form>
<script>
$(document).on('submit', '#formData', function (event) {
event.preventDefault();
var formData = $('#formData').serialize();
$.ajax({
url: url,
type: "POST",
data : formData,
success: function (result) {
console.log(result);
}
});
});
});
</script>
名称为 attr 的所有内容都将放入查询并提交
无需设置任何 元标记 csrf_token() 和 csrf_field() !
您可以使用这个 jQuery 片段:
$.ajaxPrefilter(function( settings, original, xhr ) {
if (['post','put','delete'].includes(settings.type.toLowerCase())
&& !settings.crossDomain) {
xhr.setRequestHeader("X-XSRF-TOKEN", getCookie('XSRF-TOKEN'));
}
});
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
只有少数其他答案试图设置 csrf header 但根据 Laravel 文档 (here) ,header 键应该是 "X-XSRF-TOKEN" 和 Laravel 本身在名为 "XSRF-TOKEN"
的 cookie 中为我们的每个请求提供所需的值所以只是更正了键并编辑了几行,谢谢