获取，设置cookie和csrf [英] Fetch, set-cookies and csrf

问题描述

我在我的应用程序中使用Isomorphic fetch并且遇到了一些处理CSRF的麻烦。

实际上，我有一个向后发送CSRF-TOKEN的后端在set-cookies属性中：

我的问题

我的问题是我的后端需要接收x-csrf-token标头，所以我可以'将其设置为我的POST请求。

我需要什么

怎么能我将 set-cookies：CSRF-TOKEN 的值放入下一个请求 x-csrf-token 标题中？

解决方案

在您的场景中，您应该从CSRF-TOKEN cookie中读取。否则它会被标记为HttpOnly为JSESSIONID。后者意味着您无法从网页访问它，而只是自动发回服务器。

一般来说，从cookie中读取CSRF令牌没有错。请检查一下这个好的讨论：为什么它很常见在CSR中放置CSRF预防令牌？

您可以使用以下代码阅读您的cookie（不是原因）

  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）{
返回null; 
} 
 
返回decodeURIComponent（xsrfCookies [0] .split（'='）[1]）; 
} 
  

所以提取电话看起来像

  const csrfToken = getCookie（'CSRF-TOKEN'）; 
 
 const headers = new Headers（{
'Content-Type'：'x-www-form-urlencoded'，
'X-XSRF-TOKEN'：csrfToken 
}）; 
返回this.fetcher（url，{
方法：'POST'，
标题，
凭证：'include'，
正文：JSON.stringify（{
电子邮件：'[e-mail]'，
密码：'密码'
}）
}）; 
  

I m using Isomorphic fetch in my application and I m having some troubles dealing with CSRF.

Actually, I m having a backend that sends me a CSRF-TOKEN in set-cookies property :

I have read somewhere that it's not possible, or it's a bad practice to access this kind of cookies directly inside of my code.

This way, I tried to make something using the credentials property of fetch request :

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

This way, I m able to send my CSRF cookie back to my server to serve my need (it's a different one, because it s not the same request) :

My problem

My problem is that my backend needs to receive a x-csrf-token header and so I can't set it to my POST request.

What I need

How can I do to put the value of set-cookies: CSRF-TOKEN into the next request x-csrf-token header ?

解决方案

It looks like in your scenario you are supposed to read from CSRF-TOKEN cookie. Otherwise it would be marked HttpOnly as JSESSIONID. The later means you cannot access it from the web page but merely send back to server automatically.

In general there is nothing wrong in reading CSRF token from cookies. Please check this good discussion: Why is it common to put CSRF prevention tokens in cookies?

You can read your cookie (not HttpOnly, of cause) using the following code

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]);
}

So fetch call could look like

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: '[e-mail]',
            password: 'password'
        })
    });

这篇关于获取，设置cookie和csrf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！