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

2024-08-24 06:28

本文主要是介绍前端宝典十四: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

相关文章

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Redis与缓存解读

《Redis与缓存解读》文章介绍了Redis作为缓存层的优势和缺点,并分析了六种缓存更新策略,包括超时剔除、先删缓存再更新数据库、旁路缓存、先更新数据库再删缓存、先更新数据库再更新缓存、读写穿透和异步... 目录缓存缓存优缺点缓存更新策略超时剔除先删缓存再更新数据库旁路缓存(先更新数据库,再删缓存)先更新数

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

SpringBoot使用注解集成Redis缓存的示例代码

《SpringBoot使用注解集成Redis缓存的示例代码》:本文主要介绍在SpringBoot中使用注解集成Redis缓存的步骤,包括添加依赖、创建相关配置类、需要缓存数据的类(Tes... 目录一、创建 Caching 配置类二、创建需要缓存数据的类三、测试方法Spring Boot 熟悉后,集成一个外

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.