Arhn - архитектура программирования

Как добавить токен csrf в запрос ajax

У меня проблемы с добавлением csrf в запрос ajax. Я использую тимелеаф на стороне клиента с пружинной загрузкой / пружинной безопасностью. Безопасность Spring не разрешила бы запрос, потому что отсутствует csrf-token. Вот мой код для ajax

function bits(){
    var xhttp = new XMLHttpRequest();
    var selected = document.getElementById("product").value;
    xhttp.onreadystatechange = function(){
      if(xhttp.readyState==4 && xhttp.status==200){
        var result= JSON.parse(xhttp.responseText)
        var length = result.length;
        for(i=0; i<length; i++){

           console.log(result[k].spid);
        }
    }

};

 xhttp.open("POST", "http://localhost:8080/bids?q="+selected,  true);
 xhttp.send();

}

Помощь будет оценена

spring ajax spring-security thymeleaf
23.05.2016

Ответы:


1

Я изменил решение @Prakash Hari Sharma и получил следующий код, который у меня сработал. Обратите внимание: префикс th: при использовании Thymeleaf.

- Заголовок раздела

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>

Функция скрипта Ajax

...
...
var token = $("meta[name='_csrf']").attr("content"); 
var header = $("meta[name='_csrf_header']").attr("content");
...
...
xhttp.open("POST", "http://localhost:8080/bids?q="+selected,  true);
xhttp.setRequestHeader(header, token);
xhttp.send();

Надеюсь, это тоже кому-то поможет.

25.05.2016

2

В качестве дополнения к ответу @EdwardoS после добавления метатегов к элементу <head>:

Тимелист:

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>

JSP:

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

... затем вы можете сделать то, что предлагается в Документация Spring, и пусть весь ваш будущий ajax будет включать csrf:

$(function () {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function (e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
});
08.11.2016

3

В весенней документации также предлагается не использовать токен csrf в запросах GET по соображениям безопасности.

«Возможность определять, какие запросы получают токен, помогает защититься от утечки CSRF-токена третьей стороне».

Таким образом, вы можете фильтровать, чтобы передать токен только для запросов POST, следующим образом:

$(function() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
        if (options.type == "POST") {
            xhr.setRequestHeader(header, token);
        }
    });
});

Мета-теги в элементе <head> будут такими же, как и в предыдущих ответах:

<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
24.03.2017

4

Храните токен CSRF в метатегах jsp

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

и добавить значения токена csrf в запрос ajax

var elementToken = document.querySelector('meta[property="_csrf"]');
var token = elementToken && elementToken.getAttribute("content");
var elementHeader = document.querySelector('meta[property="_csrf_header"]');
var header = elementHeader && elementHeader.getAttribute("content");
xhttp.open("POST", "http://localhost:8080/bids?q="+selected,  true);
xmlhttp.setRequestHeader(header, token);
xhttp.send();
23.05.2016
  • Я применил приведенный выше код, но все равно получил ошибку запрета. Затем я заменил все строки переменных в приведенном выше коде на: var token = $ (meta [name = '_ csrf']). Attr (content); var header = $ (meta [name = '_ csrf_header']). attr (content); И проблема была решена. Спасибо за помощь! 23.05.2016
  • Для Thymeleaf просто добавьте префикс th: к «имени» и «содержимому» в метасах выше. Я использовал Thymleaf, и это то, что я сделал. 24.05.2016

    • 5

    ниже вы можете найти мой код для использования ajax с csrf. Я тоже использую Spring Security.

        // In your JSP meta tags
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>

    // In your javascript
    // CSRF Variables
    var _tc = $("meta[name='_csrf']").attr("content");
    var _hc = $("meta[name='_csrf_header']").attr("content");


    // Header
    var headersStomp = {};
    headersStomp[_hc] = _tc;

    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(_hc, _tc);
    });
    23.05.2016

    6

    Вы можете установить токен CSRF Spring Security в переменную Javascript с именем MyApp.csrfToken.

    В свой JSP добавьте текущий скрипт для вызова функции инициализации после того, как документ будет готов:

    <script type="text/javascript">
    document.onreadystatechange = function () {
       var state = document.readyState;
       if (state == 'complete') {
         fnInit("${_csrf.parameterName}", "${_csrf.token}"); 
       }
    }​;
</script>

    В файле JS определите функцию fnInit

    var MyApp = MyApp || {};
function fnInit(csrfParam, csrfToken) {
  MyApp.csrfToken = {
      param : csrfParam,
      value : csrfToken
  }
}

    Теперь у вас есть токен, готовый к использованию в любом вызове ajax.

    ...
...
xhttp.open("POST", "http://localhost:8080/bids?q="+selected + "&"+ MyApp.csrfToken.param+"="+ MyApp.csrfToken.value,  true);
xhttp.send();

    PS: Нет необходимости в jQuery, это чистый JavaScript.

    04.01.2017
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..