jQuery добавляет токен CSRF ко всем $.данные POST() запросов
Я работаю над приложением Laravel 5, которое имеет защиту CSRF по умолчанию для всех запросов POST. Мне нравится эта дополнительная безопасность, поэтому я пытаюсь работать с ней.
при простой $.post()
запрос я получил 'IlluminateSessionTokenMismatchException'
ошибка, потому что требуемая форма ввода _token
отсутствовал в данных POST. Вот пример $.post запрос в вопросе:
var userID = $("#userID").val();
$.post('/admin/users/delete-user', {id:userID}, function() {
// User deleted
});
у меня есть токен CSRF, хранящийся в качестве мета-поля в моем заголовке, и я могу легко получить к нему доступ использование:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
можно ли добавить это к данным json на всех исходящих $.post()
запросы? Я попытался использовать заголовки, но Ларавель, похоже, не узнал их -
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);
}
});
6 ответов
код $.ajaxPrefilter
подход хороший. Однако вам не нужно добавлять заголовок; Вам просто нужно добавить свойство в data
строку.
данные предоставляются в качестве второго аргумента $.post
, а затем в виде строки запроса (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
.
из документации Laravel:
вы можете, например, сохранить токен в теге "meta":
Как только вы создали мета-тег, вы можете проинструктировать библиотеку, такую как jQuery для добавления маркера во все заголовки запросов. Это обеспечивает простой, удобная защита CSRF для приложений на основе AJAX:
$.метода ajaxsetup({ заголовки: { 'Х-КЛЮЧ CSRF-ТОКЕН': $('meta[name= "csrf-token"]').буква attr('контент') } });
Так, например, вы можете сделать запрос, как показано ниже.
добавить этот мета-тег вида:
<meta name="csrf-token" content="{{ csrf_token() }}">
и это пример скрипта, который вы можете общаться с Laravel (отправляет запрос, когда вы нажимаете элемент с id= "some-id" , и вы можете увидеть ответ в элементе с 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>
в целом я согласен с концепцией, предложенной Корнелем, за исключением одного.
да, рекомендации Laravel по использованию$.ajaxSetup
, но это не рекомендуется, так как этот метод влияет на все последующие AJAX-запросы. Правильнее установить настройки ajax для каждого запроса. Хотя вы можете переустановить материал:
все последующие вызовы Ajax с использованием любой функции будут использовать новые настройки, если не переопределены отдельными вызовами, до следующего вызова $.метода ajaxsetup()
если вы используете $.ajax()
, это более удобно использовать либо data
собственность или headers
. Фреймворк Laravel позволяет ключ CSRF-токен как параметр запроса или заголовков.
во-первых, вы добавляете следующий мета-тег в view
<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 по CSRF дает хороший фрагмент кода с ajaxSetup
для автоматического добавления соответствующего заголовка ко всем типам запросов, где это имеет значение:
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); } } });
Я думаю, что выше решение не может работать. Когда вы делаете:
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;
есть гораздо более простой способ сделать это, вы можете сериализовать данные так перед отправкой
<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 будет помещено в запрос и отправлено