【2023】前端JWT详解

news2024/11/17 5:22:41

概述

回顾登录的流程:

接下来的问题是:这个出入证(令牌)里面到底存啥?

一种比较简单的办法就是直接存储用户信息的JSON串,这会造成下面的几个问题:

  • 非浏览器环境,如何在令牌中记录过期时间
  • 如何防止令牌被伪造

JWT就是为了解决这些问题出现的。

JWT全称Json Web Token,本质就是一个字符串

它要解决的问题,就是在互联网环境中,提供统一的、安全的令牌格式

因此,jwt只是一个令牌格式而已,你可以把它存储到cookie,也可以存储到localstorage,没有任何限制!

同样的,对于传输,你可以使用任何传输方式来传输jwt,一般来说,我们会使用消息头来传输它

比如,当登录成功后,服务器可以给客户端响应一个jwt:

HTTP/1.1 200 OK
...
set-cookie:token=jwt令牌
authentication:jwt令牌
...

{..., token:jwt令牌}

可以看到,jwt令牌可以出现在响应的任何一个地方,客户端和服务器自行约定即可。

当然,它也可以出现在响应的多个地方,比如为了充分利用浏览器的cookie,同时为了照顾其他设备,也可以让jwt出现在set-cookieauthorization或body中,尽管这会增加额外的传输量。

当客户端拿到令牌后,它要做的只有一件事:存储它。

你可以存储到任何位置,比如手机文件、PC文件、localstorage、cookie

当后续请求发生时,你只需要将它作为请求的一部分发送到服务器即可。

虽然jwt没有明确要求应该如何附带到请求中,但通常我们会使用如下的格式:

GET /api/resources HTTP/1.1
...
authorization: bearer jwt令牌
...

这样一来,服务器就能够收到这个令牌了,通过对令牌的验证,即可知道该令牌是否有效。

它们的完整交互流程是非常简单清晰的

image-20200422172837190

令牌的组成

为了保证令牌的安全性,jwt令牌由三个部分组成,分别是:

  1. header:令牌头部,记录了整个令牌的类型和签名算法
  2. payload:令牌负荷,记录了保存的主体信息,比如你要保存的用户信息就可以放到这里
  3. signature:令牌签名,按照头部固定的签名算法对整个令牌进行签名,该签名的作用是:保证令牌不被伪造和篡改

它们组合而成的完整格式是:header.payload.signature

比如,一个完整的jwt令牌如下:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9.BCwUy3jnUQ_E6TqCayc7rCHkx-vxxdagUwPOWqwYCFc

它各个部分的值分别是:

  • header:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
  • payload:eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9
  • signature: BCwUy3jnUQ_E6TqCayc7rCHkx-vxxdagUwPOWqwYCFc

下面分别对每个部分进行说明

header

它是令牌头部,记录了整个令牌的类型和签名算法

它的格式是一个json对象,如下:

{
  "alg":"HS256",
  "typ":"JWT"
}

该对象记录了:

  • alg:signature部分使用的签名算法,通常可以取两个值
    • HS256:一种对称加密算法,使用同一个秘钥对signature加密解密
    • RS256:一种非对称加密算法,使用私钥签名,公钥验证
  • typ:整个令牌的类型,固定写JWT即可

设置好了header之后,就可以生成header部分了

具体的生成方式极其简单,就是把header部分使用base64 url编码即可

base64 url不是一个加密算法,而是一种编码方式,它是在base64算法的基础上对+=/三个字符做出特殊处理的算法

base64是使用64个可打印字符来表示一个二进制数据,具体的做法参考百度百科

浏览器提供了btoa函数,可以完成这个操作:

window.btoa(JSON.stringify({
  "alg":"HS256",
  "typ":"JWT"
}))
// 得到字符串:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

同样的,浏览器也提供了atob函数,可以对其进行解码:

window.atob("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9")
// 得到字符串:{"alg":"HS256","typ":"JWT"}

nodejs中没有提供这两个函数,可以安装第三方库atobbota搞定

或者,手动搞定

payload

这部分是jwt的主体信息,它仍然是一个JSON对象,它可以包含以下内容:

{
  "ss""发行者",
  "iat""发布时间",
  "exp""到期时间",
  "sub""主题",
  "aud""听众",
  "nbf""在此之前不可用",
  "jti""JWT ID"
}

以上属性可以全写,也可以一个都不写,它只是一个规范,就算写了,也需要你在将来验证这个jwt令牌时手动处理才能发挥作用

上述属性表达的含义分别是:

  • ss:发行该jwt的是谁,可以写公司名字,也可以写服务名称
  • iat:该jwt的发放时间,通常写当前时间的时间戳
  • exp:该jwt的到期时间,通常写时间戳
  • sub:该jwt是用于干嘛的
  • aud:该jwt是发放给哪个终端的,可以是终端类型,也可以是用户名称,随意一点
  • nbf:一个时间点,在该时间点到达之前,这个令牌是不可用的
  • jti:jwt的唯一编号,设置此项的目的,主要是为了防止重放攻击(重放攻击是在某些场景下,用户使用之前的令牌发送到服务器,被服务器正确的识别,从而导致不可预期的行为发生)

可是到现在,看了半天,没有出现我想要写入的数据啊😂

当用户登陆成功之后,我可能需要把用户的一些信息写入到jwt令牌中,比如用户id、账号等等(密码就算了😳)

其实很简单,payload这一部分只是一个json对象而已,你可以向对象中加入任何想要加入的信息

比如,下面的json对象仍然是一个有效的payload

{
  "foo":"bar",
  "iat":1587548215
}

foo: bar是我们自定义的信息,iat: 1587548215是jwt规范中的信息

最终,payload部分和header一样,需要通过base64 url编码得到:

window.btoa(JSON.stringify({
  "foo":"bar",
  "iat":1587548215
}))
// 得到字符串:eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9

signature

这一部分是jwt的签名,正是它的存在,保证了整个jwt不被篡改

这部分的生成,是对前面两个部分的编码结果,按照头部指定的方式进行加密

比如:头部指定的加密方法是HS256,前面两部分的编码结果是eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9

则第三部分就是用对称加密算法HS256对字符串eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9进行加密,当然你得指定一个秘钥,比如shhhhh

HS256(`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9`, "shhhhh")
// 得到:BCwUy3jnUQ_E6TqCayc7rCHkx-vxxdagUwPOWqwYCFc

最终,将三部分组合在一起,就得到了完整的jwt

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1ODc1NDgyMTV9.BCwUy3jnUQ_E6TqCayc7rCHkx-vxxdagUwPOWqwYCFc

由于签名使用的秘钥保存在服务器,这样一来,客户端就无法伪造出签名,因为它拿不到秘钥。

换句话说,之所以说无法伪造jwt,就是因为第三部分的存在。

而前面两部分并没有加密,只是一个编码结果而已,可以认为几乎是明文传输

这不会造成太大的问题,因为既然用户登陆成功了,它当然有权力查看自己的用户信息

甚至在某些网站,用户的基本信息可以被任何人查看

你要保证的,是不要把敏感的信息存放到jwt中,比如密码

jwt的signature可以保证令牌不被伪造,那如何保证令牌不被篡改呢?

比如,某个用户登陆成功了,获得了jwt,但他人为的篡改了payload,比如把自己的账户余额修改为原来的两倍,然后重新编码出payload发送到服务器,服务器如何得知这些信息被篡改过了呢?

这就要说到令牌的验证了

令牌的验证

image-20200422172837190

令牌在服务器组装完成后,会以任意的方式发送到客户端

客户端会把令牌保存起来,后续的请求会将令牌发送给服务器

而服务器需要验证令牌是否正确,如何验证呢?

首先,服务器要验证这个令牌是否被篡改过,验证方式非常简单,就是对header+payload用同样的秘钥和加密算法进行重新加密

然后把加密的结果和传入jwt的signature进行对比,如果完全相同,则表示前面两部分没有动过,就是自己颁发的,如果不同,肯定是被篡改过了。

传入的header.传入的payload.传入的signature
新的signature = header中的加密算法(传入的header.传入的payload, 秘钥)
验证:新的signature == 传入的signature

当令牌验证为没有被篡改后,服务器可以进行其他验证:比如是否过期、听众是否满足要求等等,这些就视情况而定了

注意:这些验证都需要服务器手动完成,没有哪个服务器会给你进行自动验证,当然,你可以借助第三方库来完成这些操作

总结

最后,总结一下jwt的特点:

  • jwt本质上是一种令牌格式。它和终端设备无关,同样和服务器无关,甚至与如何传输无关,它只是规范了令牌的格式而已
  • jwt由三部分组成:header、payload、signature。主体信息在payload
  • jwt难以被篡改和伪造。这是因为有第三部分的签名存在。

面试题

请阐述JWT的令牌格式

参考答案:

token 分为三段,分别是 header、payload、signature

其中,header 标识签名算法和令牌类型;payload 标识主体信息,包含令牌过期时间、发布时间、发行者、主体内容等;signature 是使用特定的算法对前面两部分进行加密,得到的加密结果。

token 有防篡改的特点,如果攻击者改动了前面两个部分,就会导致和第三部分对应不上,使得 token 失效。而攻击者不知道加密秘钥,因此又无法修改第三部分的值。

所以,在秘钥不被泄露的前提下,一个验证通过的 token 是值得被信任的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/419802.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C/C++每日一练(20230416)

目录 1. 求数列第n项值 ※ 2. 整数转换英文表示 🌟🌟🌟 3. 数组中找出最大值及索引位置 ※ 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 求数…

微信小程序引入骨架屏

骨架屏的使用越来越广泛。在微信小程序中使用骨架屏如果自己实现,不同的页面对应不同的骨架屏,会有一定难度;不过,微信小程序已经提供生成骨架屏功能,使得我们在开发中非常方便,下面介绍如何生成 在生成骨架…

[Linux]管理用户和组

​⭐作者介绍:大二本科网络工程专业在读,持续学习Java,输出优质文章 ⭐作者主页:逐梦苍穹 ⭐所属专栏:Linux基础操作。本文主要是分享一些Linux系统常用操作,内容主要来源是学校作业,分享出来的…

JavaEE 协议 信息是如何在一个机器传到另一个机器的(理论)

抓住你了! 文章目录JavaEE & 协议 & 信息是如何在一个机器传到另一个机器的1. 局域网2. 广域网3. IP与端口号(初识)4. 协议4.1 协议分类分层4.2 协议分层的好处4.3 真实的网络协议分层,TCP/IP五层网络模型4.3.1 应用层4.3…

Spark 3.0中 Spark SQL优化

在Spark3.x版本提供Adaptive Query Execution自适应查询技术,通过在”运行时”对查询执行计划进行优化,允许Planner在运行时执行可选计划,这些可选计划将会基于运行时数据统计进行动态优化,从而提高性能。 Adaptive Query Execut…

在DongshanPI-D1开箱使用分享与折腾记录实现MPU6050数据读取

前言 上一篇文章使用RT-Smart的IIC驱动OLED屏幕,进行基本的字符串显示,在使用过程中对RT-Smart有了一定熟悉,准备使用SPI驱动ST7789,但SPI接口没有引出,本次使用手上已有的传感器MPU6050进行使用。 过程 本次直接开始添加离线包…

NDK RTMP直播客户端二

在之前完成的实战项目【FFmpeg音视频播放器】属于拉流范畴,接下来将完成推流工作,通过RTMP实现推流,即直播客户端。简单的说,就是将手机采集的音频数据和视频数据,推到服务器端。 接下来的RTMP直播客户端系列&#xff…

在国内pmp证书有什么含金量?

关于PMP的含金量,很多回答的说法都差不多,但那也只是字面上的含金量,真正的含金量还是得自己考过了之后能够给自己带来的帮助才方可对PMP含金量下定义,但能一眼就能看到的含金量是在一些招聘信息上关于PMP证书的要求,下…

【Axure教程】日期时间下拉列表

在系统中,我们经常会用到日期时间选择器,它同时包含了日历日期的选择和时间的选择,一般是下拉列表的形式进行选择。 今天作者就教大家如何在Axure中用中继器制作真实日期时间效果的下拉列表选。 一、效果展示 1、点击控件,可以…

游戏开发学习路线图(2023最新版)建议收藏

游戏开发是一个高度技术化的领域,需要掌握编程语言和编程技能。你可以从学习基本的编程概念和语法开始,如C、C#、Python等常用的游戏编程语言。掌握编程的基础知识是游戏开发的基石。很多小伙伴不知道怎么学习游戏开发,那么今天,就…

c/c++:windows平台下依赖的动态库,c底层是汇编语言,程序断点调试,反汇编,vs快捷键

c/c:windows平台下依赖的动态库,c底层是汇编语言,程序断点调试,反汇编,vs快捷键 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,此时学会c的话, 我所知…

【多媒体】多媒体架构

多媒体架构 首先,多媒体架构层通常由三个主要层次组成: 应用层:负责媒体的展示、控制和交互等功能,如播放器、视频编辑器等。应用层一般是用户最直接接触到的界面。 中间件层:提供了各种媒体操作的基本服务,如编解码、音频合成、图像处理、网络传输、数据存储等。中间件…

【图像分割】Meta分割一切(SAM)模型环境配置和使用教程

注意:python>3.8, pytorch>1.7,torchvision>0.8 Feel free to ask any question. 遇到问题欢迎评论区讨论. 官方教程: https://github.com/facebookresearch/segment-anything 1 环境配置 1.1 安装主要库: (1&…

day08_数组

今日内容 零、 复习昨日 一、作业 二、数组 零、 复习昨日 方法/函数是什么? 方法就是完成某个功能的一段代码的集合例如: 方法是 做饭 方法的作用是什么? 封装的思想方便维护方便复用 方法的参数列表是什么意思? 参数:方法执行所需的数据参数列表: 方法执行可以需要多个数据…

Linux下C/C++ SNTP网络时间协议实现

对于许多应用程序,特别是在小型计算机和微控制器上,不需要NTP的最终性能。便开发了简单网络时间协议(SNTP),为功能较弱的计算机提供时钟同步,而这些计算机不需要NTP的复杂性。 而简单网络时间协议&#xf…

简易糖尿病胰岛素注射量推荐系统运行记录(github项目)

前言 在github上找案例推理相关实现代码,找到这个项目,记录一下运行过程。项目地址:https://github.com/jcf-junior/Diabetes-CBR 运行记录 运行项目的前提是已经装好的所有request的包,电脑里已经安装过mongodb数据库。 原项目…

Linux XFS文件系统的备份与还原

文章目录Linux XFS文件系统的备份与还原XFS文件系统备份xfsdump语法xfsdump备份完整的文件系统用xfsdump进行增量备份XFS文件系统还原xfsrestore语法用xfsrestore观察和xfsdump后的备份数据内容简单恢复level 0 的文件系统恢复增量备份数据仅还原部分文件到xfsrestore交互模式L…

深入剖析Android视图层次结构,为什么UI界面如此多样化?

简述 在Android Framework中,渲染机制是指如何为应用程序的用户界面绘制和布局视图(View)。Android的视图层次结构(View Hierarchy)是由视图树中的每个节点表示的 。当更新视图树时,Android会执行以下流程…

记一次内存泄漏问题的排查

阶段一: 前段时间,突然发现服务在毫无征兆的情况下发生了重启。去看了一下容器退出的日志,发现内存利用率超过了100%,导致容器重启,进一步看了skyWalking,发现heap内存超了,当时只是简单的以为是…

HTML2.1列表标签

列表标签种类 无序列表 有序列表 自定义列表 使用场景:在列表中按照行展示关联性内容。 特点:按照行的形式,整齐显示内容。 一、无序列表 标签名说明ul无序列表整体,用于包裹li标签li表示无序列表的每一项,用于包…