Fetch, set-cookies и csrf

Question

Я использую изоморфную выборку в своем приложении, и у меня возникают проблемы с CSRF.

На самом деле, я м, имеющий бэкенд, который посылает мне CSRF-токен в набор-печенье собственности:

Я где-то читал, что это не возможно, или это плохая практика, чтобы получить доступ к этому вроде файлов cookie непосредственно внутри моего кода.

Таким образом, я пытался сделать что-то, используя учетные данные свойства выборки запроса:

const headers = new Headers({ 
      'Content-Type': 'x-www-form-urlencoded' 
     }); 
     return this.fetcher(url, { 
      method: 'POST', 
      headers, 
      credentials: 'include', 
      body: JSON.stringify({ 
       email: 'mail@mail.fr', 
       password: 'password' 
      }) 
     }); 

Таким образом, я м в состоянии послать мой CSRF печенье обратно на мой сервер, чтобы служить моей потребности (это другое один, потому что это не то же самое запрос):

Моя проблема

Моя проблема заключается в том, что моему бэкэнду необходимо получить заголовок x-csrf-token, поэтому я не могу установить его в свой POST-запрос.

Что мне нужно

Как я могу сделать, чтобы поставить значение Set-печенье: CSRF-токен в следующем запросе х-CSRF-токенов заголовок?

Answer 1

Похоже, что в вашем сценарии вы должны читать cookie CSRF-TOKEN. В противном случае он будет помечен как HttpOnly как JSESSIONID. Последнее означает, что вы не можете получить к нему доступ с веб-страницы, но просто отправляйте обратно на сервер автоматически.

В общем, нет ничего плохого в чтении токена CSRF из файлов cookie. Пожалуйста, проверьте это хорошее обсуждение: Why is it common to put CSRF prevention tokens in cookies?

Вы можете читать печенье (не HttpOnly, причины), используя следующий код

function getCookie(name) { 
    if (!document.cookie) { 
    return null; 
    } 

    const xsrfCookies = document.cookie.split(';') 
    .map(c => c.trim()) 
    .filter(c => c.startsWith(name + '=')); 

    if (xsrfCookies.length === 0) { 
    return null; 
    } 

    return decodeURIComponent(xsrfCookies[0].split('=')[1]); 
} 

Так принести вызов может выглядеть

const csrfToken = getCookie('CSRF-TOKEN'); 

const headers = new Headers({ 
     'Content-Type': 'x-www-form-urlencoded', 
     'X-XSRF-TOKEN': csrfToken 
    }); 
    return this.fetcher(url, { 
     method: 'POST', 
     headers, 
     credentials: 'include', 
     body: JSON.stringify({ 
      email: 'mail@mail.fr', 
      password: 'password' 
     }) 
    });