Страница 1 из 1

Fetch API validateCsrf failed

Добавлено: 2020.04.24, 19:46
leonidps
есть надобность вместо AJAX использовать Fetch API
Если AJAX validateCsrf успешна то fetch validateCsrf провалена
Для примера простая задача загрузка данных для select

Код: Выделить всё

let hAddress = document.querySelector(".house-address");
let hService = document.querySelector(".house-service");
let pUrl = '/index.php?r=options%2Fservice-house';
let param = document.querySelector('meta[name="csrf-param"]').content;
let token = document.querySelector('meta[name="csrf-token"]').content;
let pData = {};
pData[param] = token;

hAddress.addEventListener('change', function () {
    let pVal = this.options[this.selectedIndex].value;
    pData['house_id'] = pVal;
    getOptionsByFetchPost(pUrl);
});
function getOptionsByFetchPost(pUrl) {
    fetch(pUrl, {
        method: 'POST', 
        body: JSON.stringify(pData), 
        headers: {
            'Content-Type': 'text/html'
        }
    })
            .then((response) => {
                return response.text()
            })
            .then((html) => {
//                console.log(html);
                hService.innerHTML = html;
            })
            .catch(err => console.error(err))
            ;
}
Ответ соответственно Bad Request (#400)Не удалось проверить переданные данные.
Выбрасывает в /web/Controller /web/Request->validateCsrfToken()...

Re: Fetch API validateCsrf failed

Добавлено: 2020.04.26, 20:50
leonidps
некоторые результаты могут быть интересны
для успешной csrf валидации AJAX POST достаточно значение токена включить в POST-параметр
для успешной csrf валидации fetch POST значение токена включить в заголовок X-СSRF-TOKEN
например

Код: Выделить всё

    let myHeaders = new Headers();
    myHeaders.append('X-CSRF-Token', token);
Насколько это корректно, не беру ответственность
Одного взгляда на ~2000 строк /web/Request мне хватило чтобы отказаться от каких-либо изысканий.
Тем более что уже идет разработка 3 версии

Re: Fetch API validateCsrf failed

Добавлено: 2021.10.04, 17:36
Sasha_ch
Итого получается как-то так:

Код: Выделить всё

function getOptionsByFetchPost(pUrl) {
  fetch(pUrl, {
    method: 'POST',
    body: JSON.stringify(pData),
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': yii.getCsrfToken(),
    }
  })
    .then((response) => {
      return response.text()
    })
    .then((html) => {
      hService.innerHTML = html;
    })
    .catch(err => console.error(err));
}

Re: Fetch API validateCsrf failed

Добавлено: 2022.06.26, 10:29
Arroyo
Спасибо, помогло. Никак ответ не мог найти, что токен в заголовки нужно записывать