关于jwt（token）储存在哪的方案

标签：储存 请求 jwt token cookie csrf 客户端

第一种方案：（安全系数高的项目推荐这种）

直接由服务端设置cookie到浏览器（客户端。jwt token是储存在cookie的，请求是自动发送到服务器的，服务器直接获取就行，拿到验证

且需要设置 cookie为 httpOnly（这个设置后js不能操作cookie，就意味客户端不能操作cookie 这样一来就能防止xss攻击（这个不懂百度自己看））

但是不能防csrf攻击（这个在用户登录时会有cookie的信息，所以在没有安全退出时去访问不安全的网站时有可能被此网站利用去重要操作）

所以需要在重要的表单提交（post）或者重要数据展示（前后分离情况有get请求也有post请求）做csrf_token(这个不清楚百度)

列：

<form action="">
   <input type="hidden"name="csrf_token" value="sl6imh36im7r3kctfa05bm810r">
</form>

<a href ="https://i.cnblogs.com?csrf_token=sl6imh36im7r3kctfa05bm810r" ></a>

csrf_token是服务器端生成的发送到客户端的，所以服务端要保存csrf_token，客户端发送请求时就需要带csrf_token和服务器的验证比对。

当然还有别的方式防止csrf，比如：解决的方法是通过设置Cookie的SameSite属性为Strict，跨站时不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie

优点：不用考虑xss 综合下来是比较安全的。

缺点：有点繁琐（不符合jwt 规范，本来jwt天然防csrf攻击）还有跨域问题（成本问题）

 

第二种方案：

第二种方式都比较符合jwt规范（restful api），项目前后端分离需要Ajax类似的请求，但是又分为3小种

1、是由客户端去请求获取到客户端生成的jwt token，存放在cookie

列：

$.cookie('token', 'value', { expires: 7});

 

然后每次请求都需要从cookie取出通过，放到 authorization 头中做请求

列：

$.ajax({
    type: "GET",
    url: "test.php",
    success: function(data) {
        console.log(data);
    },
    beforeSend: function(xhr) {
       let token = $.cookie('token');
            xhr.setRequestHeader("Authorization", "Basic " + token );

    }
});

优点：较为符合jwt规范适合前后端分离的项目，且自带防御csrf(因为请求时需要带token这直接省略csrf_token了)

缺点：（需要防xss 泄露token）有些客户端不支持cookie

==========================================================================================================

 

2、jwt 的token储存在localstorage，用法是和第二种方案类似（前后端分离的项目推荐这种）

列：

$.ajax({ 
          type: "POST",
          url: "http:xxx",
          beforeSend: function(xhr) { 
　　　　　　　　　var token= localStorage.getItem('token');
               xhr.setRequestHeader("Authorization", "Bearer" +token);  
           },
          success: function(result){
            console.log(result);
        }
    });

优点：自带csrf防御 符合api请求规定

缺点：需要（xss防御）localstorage的生命周期是，会永久保存在客户端。这如需要就得手动清除

===================================================================================================================

 

3、储存在sessionStorage，用法和localstorage类似

列：

$.ajax({ 
          type: "POST",
          url: "http:xxx",
          beforeSend: function(xhr) { 
　　　　　　　　　var token= sessionStorage.getItem('token');
               xhr.setRequestHeader("Authorization", "Bearer" +token);  
           },
          success: function(result){
            console.log(result);
        }
    });

一般业务没啥优点

缺点：就是生命周期是，关闭页面和浏览器会清除

标签：储存,请求,jwt,token,cookie,csrf,客户端
From： https://www.cnblogs.com/yangshiyi/p/16859598.html