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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
理解javascript模块化
Mar 28 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 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
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue axios请求拦截实例代码
2018/03/29 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python使用sorted排序的方法小结
2017/07/28 Python
python用户管理系统的实例讲解
2017/12/23 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python Tkinter的图片刷新实例
2019/06/14 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
服装机修工岗位职责
2013/12/26 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
廉洁自律个人总结
2015/02/14 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技