node中的cookie的具体使用


Posted in Javascript onSeptember 13, 2018

为什么需要cookie

我们知道http是无状态的协议,无状态是什么意思呢?

我来举一个小例子来说明:比如小明在网上购物,他浏览了多个页面,购买了一些物品,这些请求在多次连接中完成,如果不借助额外的手段,那么服务器是不知道他到底购买了什么的,因为服务器压根就不知道每次请求的到底是不是小明,除非小明有一个标识来证明他是小明。

所以,网站为了辨别用户身份,进行 session 跟踪,cookie出现了。

cookie是什么

简单来说,cookie就是标识。

严格来说,cookie是一些存储在客户端的信息,每次连接的时候由浏览器向服务器递交,服务器也向浏览器发起存储 Cookie 的请求,依靠这样的手段,服务器可以识别客户端。

具体来说,浏览器首次向服务器发起请求时,服务器会生成一个唯一标识符并发送给客户端浏览器,浏览器将这个唯一标识符存储在 Cookie 中,之后每次发起的请求中,客户端浏览器都会向服务器传送这个唯一标识符,服务器通过这个唯一标识符来识别用户。

说了这么多,打开浏览器,我们先来看看这货吧。

node中的cookie的具体使用

上图中,就是浏览器中存的一个cookie,他的名字叫name,值为abc。

常规cookie

光看不过瘾,接下来,用node动手来做一个常规cookie吧。

首先,安装express框架和cookieParser中间件

npm i express --save
npm install cookie-parser --save

cookieParser中间件的主要用途如下:

  1. 解析来自浏览器的cookie,放到req.cookies中;
  2. 针对签名cookie,对cookie签名和解签

代码如下:

var express = require('express');
var cookieParser = require('cookie-parser');

var app = express();
app.use(cookieParser());

app.use(function (req, res) {
 if (req.url === '/favicon.ico') {
 return
 }

 // 设置常规cookie, 有效期为20s, 客户端脚本不能访问它的值
 res.cookie('name', 'abc', { signed: false, maxAge: 20 * 1000, httpOnly: true });
 console.log(req.cookies, req.url, req.signedCookies);

 res.end('hello cookie');
})

app.listen(4000)

运行后,在浏览器中打开 http://localhost:4000/

以chrome为例,f12打开浏览器调试工具,在application中的cookies中便能发现你定义的cookie。

req.cookies和req.signedCookies属性是随http请求发送过来的请求头中的Cookie的解析结果。

其中,req.cookies对应的是普通cookie,req.signedCookies对应的是签名cookie。

如果请求中没有cookie,这两个对象都是空的。

签名cookie

签名cookie更适合敏感数据,因为用它可以验证cookie数据的完整性,有助于防止中间人攻击。

有效的签名cookie放在req.signedCookies对象中。

代码如下:

var express = require('express');
var cookieParser = require('cookie-parser');

var app = express();

// 设置密钥,用来对cookie签名和解签, Express可以由此确定cookie的内容是否被篡改过
app.use(cookieParser('a cool secret'));

app.use(function (req, res) {
 if (req.url === '/favicon.ico') {
 return
 }

 // 设置签名cookie, 并且有效期为1min
 res.cookie('name', 'efg', { signed: true, maxAge: 60 * 1000, httpOnly: true });
 console.log(req.cookies, req.url, req.signedCookies);

 res.end('signed cookie');
})
app.listen(4000)

运行后,在浏览器中打开 http://localhost:4000/

以chrome为例,f12打开浏览器调试工具,在application中的cookies中便能发现你定义的签名cookie,格式如下:s%3Aefg.7FJDuO2E9LMyby6%2Bo1fGQ3wkIHGB9v1CDVWod8NQVAo

.号左边是cookie的值,右边是服务器上用SHA-1 HMAC生成的加密哈希值。

如果这个签名cookie的值被篡改,那么服务器上对cookie的解签会失败,在node中输出的req.signedCookies将为false。如下:

node中的cookie的具体使用

而如果cookie完好无损地传上来,那么将会被正确解析:

node中的cookie的具体使用

总结

你可以在cookie中存放任意类型的文本数据,但通常是在客户端存放一个会话cookie,这样你就能在服务器端保留完整的用户状态。

session

session和基于cookie的。 存在于服务器,相对cookie安全,但session也存在session劫持的风险, 所以需要一串很长很多的秘钥数组来增加破解的难度。同时设置manAge过期时间, 减少留给坏人破解时间。

node中有的中间件 是cookie-session

const express = require('express');
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');

var app = express();
app.use(cookieParser());

//cookieSession 必须放在cookieParser后面
app.use(cookieSession({
 //session的秘钥,防止session劫持。 这个秘钥会被循环使用,秘钥越长,数量越多,破解难度越高。
 keys: ['aaa', 'bbb', 'ccc'],
 //session过期时间,不易太长。php默认20分钟
 maxAge: 60*60,
 //可以改变浏览器cookie的名字
 name: 'session'
}));

app.use('/', function (req, res) {

 //假设使用count记录用户访问的次数
 if(req.session['count'] == null) {
  req.session['count'] = 1;
 }else{
  req.session['count']++;
 }
 console.log(req.session['count'])
 res.send('ok')
})
app.listen(8080)

//删除 delete req.session

浏览器中可以看到,服务器通过respond的set-cookie返回cookie

node中的cookie的具体使用

session是返回的cookie ID, session.sig 是session签名,作用是知道session是否被修改过

node中的cookie的具体使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
js 页面输出值
Nov 30 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jQuery链使用指南
Jan 20 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
vue实现简单的日历效果
Sep 24 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
vue动态改变背景图片demo分享
Sep 13 #Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 #Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 #Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 #Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 #Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 #Javascript
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
js tab效果的实现代码
2009/12/26 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python计算N天之后日期的方法
2015/03/31 Python
分享6个隐藏的python功能
2017/12/07 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
企划主管岗位职责
2013/12/12 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
导游词之无锡梅园
2019/11/28 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js