前端宝典十四：Node缓存、安全与鉴权

2024-08-24 06:28
文章标签 安全 十四 前端 缓存 frontend node 鉴权 宝典

本文主要是介绍前端宝典十四：Node缓存、安全与鉴权，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文主要从Node缓存、安全与鉴权几个方面展开解析，包含几个方面：

  1. Cookie 定义、设置、生命周期以及安全性
  2. Node缓存分类和区别
  3. Node鉴权包含session、cookie、token、jwt等

一、Cookie

HTTP Cookie（通常也叫 Web Cookie 或浏览器 Cookie），是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。支持无状态的HTTP变为“有状态”

1、Cookie 作用：

1. 会话状态管理

如用户登录状态、购物车、游戏分数或其它需要记录的信息

2. 个性化设置

如用户自定义设置、主题等

3. 浏览器行为跟踪

如跟踪分析用户行为等

当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。

2、Set-Cookie

服务器使用 Set-Cookie 响应头部向用户代理（一般是浏览器）发送 Cookie 信息。一个简单的 Cookie 可能像这样：

Set-Cookie: <cookie 名>=<cookie 值>

服务器通过该头部告知客户端保存 Cookie 信息

3、Cookie 的生命周期

Cookie 的生命周期包括：

1. 会话期 Cookie

浏览器关闭之后它会被自动删除，也就是说它仅在会话期内有效。会话期 Cookie 不需要指定过期时间（Expires）或者有效期（Max-Age）；

2. 持久性 Cookie

生命周期取决于过期时间（Expires）或有效期（Max-Age）；

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

4、如何保证Cookie安全性

1. Secure

表示只应通过被 HTTPS 协议加密过的请求发送给服务端；

2. HttpOnly

JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的 cookie；此类 Cookie 仅作用于服务器。例如，持久化服务器端会话的 Cookie 不需要对 JavaScript 可用，而应具有 HttpOnly 属性。

HttpOnly 类型的 Cookie 用于阻止了 JavaScript 对其的访问性而能在一定程度上缓解XSS攻击。

3. SameSite Cookie

允许服务器要求某个 cookie 在跨站请求时不会被发送，从而可以阻止（CSRF）。
SameSite 可以有下面三种值：

  1. None：浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写；
  2. Strict：浏览器将只在访问相同站点时发送 cookie；
  3. Lax：与 Strict 类似，但用户从外部站点导航至 URL 时（例如通过链接）除外。 在新版本浏览器中，为默认选项，Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到 URL 时才会发送。如 link 链接；

cookie samesite限制 strict可缓解CSRF攻击

示例：

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly;SameSite=Strict

二、Node缓存

1、强制缓存

当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回，不存在则请求真的服务器。
强制缓存直接减少请求数，是提升最大的缓存策略。 如果考虑使用缓存来优化网页性能的话，强制缓存应该是首先被考虑的。
强制缓存不需要与服务器发生交互。
在这里插入图片描述
可以造成强制缓存的字段是 Cache-control 和 Expires
但是Expires设置的绝对时间，不好用，如果客户端修改本地时间，cookie失效
所有要使用Cache-control，Cache-control这是的相对时间

// 表示有效时间为20s

Cache-control: max-age=20

cache-control设置：

  1. no-cache：相当于需要使用协商缓存，禁止使用强制缓存；
  2. no-store：相当于不使用强制缓存和协商缓存；
  3. public 任何路径的缓存者（本地缓存、代理服务器），可以无条件的缓存改资源，不设置默认为public；
  4. private 只针对单个用户或者实体（不同用户、窗口）缓存资源；

2、协商缓存也叫对比缓存

当强制缓存失效(超过规定时间)时，就需要使用对比缓存，由服务器决定缓存内容是否失效。对比缓存是可以和强制缓存一起使用。

1. last-modified

缺点：

  1. last-modified是以秒为单位的，假如资料在1s内可能修改几次，那么该缓存就不能被使用的；
  2. 如果文件是通过服务器动态生成，那么更新的时间永远就是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用；

2. Etag

Etag是根据文件内容，算出一个唯一的值。服务器存储着文件的 Etag 字段。
之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 变成了 If-None-Match。
服务器同样进行比较，命中返回 304, 不命中返回新资源和 200。 Etag 的优先级高于 Last-Modified

缺点：

  1. 每次请求的时候，服务器都会把文件读取一次，以确认文件有没有修改；
  2. 大文件进行etag 一般用文件的大小 + 文件的最后修改时间 来组合生成这个etag；

三、Node鉴权

目前常用的鉴权有四种：

  • HTTP Basic Authentication
  • session-cookie
  • Token 验证
  • OAuth(开放授权)

这里主要讨论session-cookie和Token 验证

1、session-cookie

session 是缓存在服务端的，cookie 则是缓存在客户端，他们都由服务端生成，为了弥补 Http 协议无状态的缺陷。

1.session-cookie认证

  1. 服务器在接受客户端首次访问时在服务器端创建seesion，然后保存seesion(我们可以将seesion保存在 内存中，也可以保存在redis中，推荐使用后者)，然后给这个session生成一个唯一的标识字符串,然后在 response header 中种下这个唯一标识字符串；
  2. 签名。这一步通过秘钥对sid进行签名处理，避免客户端修改sid；(非必需步骤)
  3. 浏览器中收到请求响应的时候会解析响应头，然后将sid保存在本地cookie中，浏览器在下次http请求的请求头中会带上该域名下的cookie信息。
  4. 服务器在接受客户端请求时会去解析请求头cookie中的sid，然后根据这个sid去找服务器端保存的该客户端的session，然后判断该请求是否合法。

在这里插入图片描述

2.实例：用户登录认证

使用session-cookie做登录认证时，登录时存储session，退出登录时删除session，而其他的需要登录后才能操作的接口需要提前验证是否存在session，存在才能跳转页面，不存在则回到登录页面。

  • 在koa中做一个验证的中间件，在需要验证的接口中使用该中间件。
//前端代码
async login() {await axios.post('/login', {username: this.username,password: this.password})
},
async logout() {await axios.post('/logout')
},
async getUser() {await axios.get('/getUser')
}

//中间件 auth.js
module.exports = async (ctx, next) => {if (!ctx.session.userinfo) {ctx.body = {ok: 0,message: "用户未登录" };} else {await next();}
};//需要验证的接口
router.get('/getUser', require('auth'), async (ctx) => {ctx.body = {message: "获取数据成功",userinfo: ctx.session.userinfo}
})//登录
router.post('/login', async (ctx) => {const {body} = ctx.requestconsole.log('body', body)//设置sessionctx.session.userinfo = body.username;ctx.body = {message: "登录成功"}
})//登出
router.post('/logout', async (ctx) => {//设置sessiondelete ctx.session.userinfoctx.body = {message: "登出系统"}
})

2、Token

token 是一个令牌，浏览器第一次访问服务端时会签发一张令牌，之后浏览器每次携带这张令牌访问服务端就会认证该令牌是否有效，只要服务端可以解密该令牌，就说明请求是合法的，令牌中包含的用户信息还可以区分不同身份的用户。一般 token 由用户信息、时间戳和由 hash 算法加密的签名构成。

1. Token认证流程

  1. 客户端使用用户名跟密码请求登录；
  2. 服务端收到请求，去验证用户名与密码；
  3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端；
  4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者Local Storage 里；
  5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token；
  6. 服务端收到请求，然后去验证客户端请求里面带着的 Token（request头部添加Authorization），如果验证成功，就向客户端返回请求的数据 ，如果不成功返回401错误码，鉴权失败；

2. Token和session的区别

session-cookie的缺点：

  1. 认证方式局限于在浏览器中使用，cookie 是浏览器端的机制，如果在app端就无法使用 cookie；
  2. 为了满足全局一致性，我们最好把 session 存储在 redis 中做持久化，而在分布式环境下，我们可能需要在每个服务器上都备份，占用了大量的存储空间；
  3. 在不是 Https 协议下使用 cookie ，容易受到 CSRF 跨站点请求伪造攻击。

3. token的缺点：

  1. 加密解密消耗使得 token 认证比 session-cookie 更消耗性能；
  2. token 比 sid 大，更占带宽；

4. token与cookie的区别

  1. token 认证不局限于 cookie ，这样就使得这种认证方式可以支持多种客户端，而不仅是浏览器。且不受同源策略的影响；
  2. 不使用 cookie 就可以规避CSRF攻击；
  3. token 不需要存储，token 中已包含了用户信息，服务器端变成无状态，服务器端只需要根据定义的规则校验这个 token 是否合法就行。这也使得 token 的可扩展性更强。

这篇关于前端宝典十四：Node缓存、安全与鉴权的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1101703。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
《纳瓦尔宝典》是纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言

《纳瓦尔宝典》是纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言

《纳瓦尔宝典》是一本由埃里克·乔根森（Erik Jorgensen）编著的书籍，该书于2022年5月10日由中信出版社出版。这本书的核心内容围绕硅谷知名天使投资人纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言，特别是关于财富积累和幸福人生的原则与方法。 晓北斗推荐 《纳瓦尔宝典》 基本信息 书名：《纳瓦尔宝典》作者：[美] 埃里克·乔根森译者：赵灿出版时间：2022
阅读更多...
缓存雪崩问题

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库，瞬间耗尽数据库资源，导致数据库无法使用。 解决方案： 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内，大量缓存数据同时失效，导致所有请求直接涌向数据库，瞬间增加数据库的负载压力，可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k
阅读更多...
客户案例：安全海外中继助力知名家电企业化解海外通邮困境

客户案例：安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司（以下简称“格兰仕”），成立于1978年，是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地，格兰仕拥有多项国际领先的家电制造技术，连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展，更重视业务流程的高效与顺畅，以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施，其海外业务快速增长，电子邮件成为了关键的沟通工具。
阅读更多...
安全管理体系化的智慧油站开源了。

安全管理体系化的智慧油站开源了。

AI视频监控平台简介 AI视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。用户只需在界面上进行简单的操作，就可以实现全视频的接入及布控。摄像头管理模块用于多种终端设备、智能设备的接入及管理。平台支持包括摄像头等终端感知设备接入，为整个平台提
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
2024网安周今日开幕，亚信安全亮相30城

2024网安周今日开幕，亚信安全亮相30城

2024年国家网络安全宣传周今天在广州拉开帷幕。今年网安周继续以“网络安全为人民，网络安全靠人民”为主题。2024年国家网络安全宣传周涵盖了1场开幕式、1场高峰论坛、5个重要活动、15场分论坛/座谈会/闭门会、6个主题日活动和网络安全“六进”活动。亚信安全出席2024年国家网络安全宣传周开幕式和主论坛,并将通过线下宣讲、创意科普、成果展示等多种形式，让广大民众看得懂、记得住安全知识，同时还
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2