Как правильно сделать запрос на сервер с csurf?

Question

[Иоанн]

Сломал себе всю голову как сделать финт ушали.
Делаю приложуху на vue.
Для теста надо сделать post ajax запрос на сервер на nodejs с csurf.
Пробовал так:

let token = await fetch("http://site/admin/", {method:'get'}).then(data=>data.json())
let response = await fetch("http://site/admin/", {
        credentials: 'same-origin',
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            "X-CSRF-Token": token.csrfToken
        },
        body: .....
    });

Токен получает, но при ПОСТ на сервере вылетает сообщение что "ForbiddenError: invalid csrf token"
Причём подозреваю, что он их воспринимает как запросы с разных клиентов.
Так вот, как можно исправить эту ситуацию?

Comments

[Игорь]

token.csrfToken <= здесь точно токен?

[Иоанн]

Игорь, да точно, в консоли выводил

[Михаил]

Иоанн,
'CSRF-Token': token

[Иоанн]

Михаил, нет, в token - {"csrfToken":".................."}

[Михаил]

Иоанн,
Это? https://github.com/expressjs/csurf#using-ajax

[Игорь]

Иоанн, Нужно смотреть что прилетает на сервер.
Я однажды не мог понять в чем же дело, composer не мог найти файл

Да вот же он лежит.

constants.php
сonstants.php

Из за невнимательности, оказалось, что первый символ "с" в кириллице

[Иоанн]

Михаил, не понял вас. Сделано, да, по этому примеру из документации. Только токен я предварительно просил get ajax

[Михаил]

Иоанн, X-CSRF-Token или CSRF-Token ?

[Иоанн]

Михаил, и так и так пробовал. Пробовал все 4 хедера что в доха описаны

[Иоанн]

Игорь, запрос на сервер приходит, но что туда приходит посмотреть не могу, так как csurf "посылает" раньше чем я могу что то вывести.

[Иоанн]

Игорь, поставил перед app.use(csrf())

app.use(function (req,res,next) {
    console.log(req.headers)
    next()
})

токен приходит
{
host: 'site',
connection: 'keep-alive',
'content-length': '48',
accept: 'application/json',
'csrf-token': '7YohokbB-OEwkRBYcVh5PaM0B7KwLQJls8A4',
........
}

[Игорь]

У вас в каждом примере разные ключи в заголовках.
Что происходит?

[Игорь]

csrf-token
csrfToken
X-CSRF-Token

Как понимать?

[Иоанн]

Игорь, извиняюсь за дезориентацию. Это я просто в пост запросе очередной раз поменял хедер.
Говорю же, при каждом чихе пробую все 4 варианта что в документации указаны

[Игорь]

Проблема скорее всего кроится в наименовании ключа заголовка.
Ключи должны именоваться так:

My-Header
Content-Type

[Игорь]

Вам нужно ловить этот заголовок на сервере, у вас имеется доступ к серверу?

[Иоанн]

Игорь, вы документацию csurf читали?

value
Provide a function that the middleware will invoke to read the token from the request for validation. The function is called as value(req) and is expected to return the token as a string.

The default value is a function that reads the token from the following locations, in order:

req.body._csrf - typically generated by the body-parser module.
req.query._csrf - a built-in from Express.js to read from the URL query string.
req.headers['csrf-token'] - the CSRF-Token HTTP request header.
req.headers['xsrf-token'] - the XSRF-Token HTTP request header.
req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header.
req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header.

[Иоанн]

Игорь,

Вам нужно ловить этот заголовок на сервере, у вас имеется доступ к серверу?

Я же писал выше, что хедер приходит на сервер

[Игорь]

Иоанн, Вы наверное и здесь были?

[Иоанн]

Игорь, да

[Иоанн]

Игорь, Михаил, судя по логам дело видимо в том, что он для каждого из запросов(сначала гет, потом пост) создаёт отдельные сессии. А как сказать, что это одна и та же сессия (один и тот же клиент)?

[Михаил]

Иоанн,

resave: false,
saveUninitialized: false,

?

[Иоанн]

Михаил,

resave: true,
    saveUninitialized : false

[Михаил]

Иоанн, помню что с resave были проблемы, он на каждый запрос перезаписывал куку

[Иоанн]

Михаил, изменил, но ничего не поменялось

[Михаил]

Иоанн, тогда хз что у вас там не так

[Михаил]

Иоанн, cookie-parser стоит до csrf ?

[Михаил]

Иоанн,

Requires either a session middleware or cookie-parser to be initialized first.

это может

[Иоанн]

Михаил, а может в этом проблема? fetch у меня "same-origin"

credentials
Опция credentials указывает, должен ли fetch отправлять куки и авторизационные заголовки HTTP вместе с запросом.

"same-origin" – стоит по умолчанию, не отправлять для запросов на другой источник,
"include" – отправлять всегда, но при этом необходим заголовок Access-Control-Allow-Credentials в ответе от сервера, чтобы JavaScript получил доступ к ответу сервера, об этом говорилось в главе Fetch: запросы на другие сайты,

[Михаил]

Иоанн, если вы отправляете на тот же домен то все ок
сессионная кука то приходит?

[Иоанн]

Михаил, так в том то и проблема, что vue-cli запускается на порту 8080, а сервер данных на 80 порту.
Получается что запросы идут совсем на другой сайт

[Михаил]

Иоанн, include значит

[Иоанн]

Михаил, так то оно так, только теперь с CORS задница.
Я так понимаю если поставить mode : no-cors получу тот же гемор. В смысле не будут данные и куки передаваться?

[Иоанн]

Михаил, пробовал я include, только у меня не получилось из-за настроек cors. Сейчас перенастроил, заработало, только гемор блин.

Answer 1

[bahurtsev]

У вас вот тут интересная строка:

let token = await fetch("http://site/admin/", {method:'get'}).then(data=>data.json())

Одновременно и await и .then();

Вот как я сделал:

Клиент:

function get_csurf_token(){

	return new Promise(async (resolve, reject) => {
		let response = await fetch('/get_csurf_token', {
			method:'get',
			headers: {
				'Accept': 'application/json',
			},
		});

		if(response.status == 200){	
			let obj = await response.json();
			console.log(obj)
			resolve(obj.token);
		}
	});

}

form_add.addEventListener('submit', async function(event){

	event.preventDefault();

	let csurf_token = await get_csurf_token();

	let response = await fetch(form_add.getAttribute('action'), {
		method: form_add.getAttribute('method'),
		headers: {
			'Content-type': 'application/json',
			'Accept': 'application/json',
			'X-Csrf-Token': csurf_token,
		},
		body: JSON.stringify({
			first_name: form_add.first_name.value,
			last_name: form_add.last_name.value
		})
	});
	console.log(response)
	if(response.status == 200){

		let user = await response.json();
		output.innerHTML = 'В базу данных добавлен новый пользователь: <b>' + user.first_name + ' ' + user.last_name + '</b><br>';

	}
	else{
		output.innerHTML = 'Произошла ошибка!<br>' + response.status + ' ' + response.statusText;
	}

});

Сервер:

app.use(csurf());

app.get('/get_csurf_token', async function(req, res){
	
	let token = req.csrfToken();
	console.log(token);	// Получим строку вида: xmRBPXdh-s8TAuC5xwUt80ocW6hiim9Ow690
	res.send({ token });

});