cookie的原理
何为 cookie 呢?我们在上面了解到 HTTP 是无状态的,但随着 Web 的不断发展,这种 无状态 的特性出现了弊端。当你登录到一家购物网站,在跳转到该站的其他页面时也应该继续保持登录状态。但是因为 HTTP 是无状态的,所以必须得在浏览器端存储一些信息来标识当前用户,因此 cookie 应运而生,它一种浏览器管理状态的文件。
浏览器第一次发出请求,服务器会将 cookie 放入到响应请求中,在浏览器第二次发请求的时候,会把 cookie 带过去,于是服务端就会辨别用户身份。注意:单个 cookie 保存的数据不能超过 4K,很多浏览器都限制一个站点最多保存 20 个 cookie。
cookie 在请求头中有一个 cookie 字段,在响应头里有一个 set-cookie 字段。
cookie 是不可跨域的
cookie 本身就是用来保存一些隐私性的字段,基于安全性的考量,必须要保证它是 不可跨域的。我们可以做个实验:先打开 google.com,然后在开发者工具中输入以下代码:
document.cookie = 'hello=world;path=/;domain=.baidu.com';
document.cookie = 'world=hello;path=/;domain=.google.com';
复制代码
打开 Application 选项卡,在侧边栏找到 Cookies,可以发现只有 domain 为 .google.com 的被成功添加。
cookie 的属性
我们通过一个登录的小例子来了解服务端设置 cookie。首先通过 express application generator 生成一个 Express 工程。
接着在 index.html 文件中输入以下代码,我们创建一个输入用户名和密码的界面,在点击按钮的时候,通过 fetch 将输入的值发送给后端。
<fieldset>
<legend>Login</legend>
<input id="userName" type="text" placeholder="请输入用户名" />
<input id="userPwd" type="password" placeholder="请输入密码" />
<button id="loginBtn">登录</button>
</fieldset>
<p>登录状态: <span id="result"></span></p>
<script>
const userName = document.getElementById('userName');
const userPwd = document.getElementById('userPwd');
const loginBtn = document.getElementById('loginBtn');
const result = document.getElementById('result');
loginBtn.addEventListener('click', function() {
const data = {
userName: userName.value,
userPwd: userPwd.value
};
fetch('/login', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json'
}),
body: JSON.stringify(data)
})
.then(res => {
return res.json();
})
.then(json => {
result.innerHTML = json.msg;
});
});
</script>
复制代码
当用户名和密码匹配时 (假设用户名和密码都是 yancey),返回给客户端一个 cookie 以及登录成功的 json;否则返回登录失败的 json。下面是模拟服务端登录的接口。
router.post('/login', (req, res, next) => {
const body = req.body;
if (body.userName === 'yancey' && body.userPwd === 'yancey') {
// 设置 cookie
res.cookie('yancey', 'success');
res.json({
success: true,
msg: '登录成功'
});
} else {
res.status(401).json({
success: false,
msg: '用户名或密码错误'
});
}
});
复制代码
通过这个例子可以看到,在 express 中,setCookie 的方式为:第一个参数传递 name,第二个参数传递 value,注意浏览器会将元字符和语义字符之外的字符进行转义。打开 Chrome 的开发者工具,就可以看到该 cookie 被添加到浏览器上了。或者你在控制台输入 document.cookie,同样可以看到 cookie 字符串。
这只是一个设置 cookie 的简单例子,cookie 有 7 种属性可供使用,我们一一来了解。
domain
该属性给 cookie 设置 域名,默认为当前网站的域名,下面的例子将 domain 设为 yanceyleo.com,由于前端页面是 127.0.0.1,根据同源策略,该条 cookie 不会生效。
res.cookie('domain', 'domian', { domain: 'yanceyleo.com' });
复制代码
expires / maxAge
httpOnly
当该属性设为 true 时,document.cookie 将无法获取该条 cookie,但服务端可以照常获得。该属性可以有效的避免跨站脚本攻击 (XSS)。 关于几种脚本攻击`
res.cookie('httpOnly', 'httpOnly', {
// 只能被 web server 访问到,也就是说在浏览器输入 document.cookie 无法取到该条 cookie,目的是防止 xss
httpOnly: true
});
复制代码
path
该属性给 指定的路径 添加此 cookie,默认为 /。如下代码就是给 users 这个路由设置 cookie (即便在服务端该路径不存在也会被添加上)。
res.cookie('path', 'path', {
path: '/users'
});
复制代码
secure
只有当连接是 HTTPS 协议,该 cookie 才会被添加。该属性默认为 fasle。因为我本地的 express 是 HTTP 协议,因此该条 cookie 不会生效。
res.cookie('secure', 'secure', {
secure: true
});
复制代码
signed (防篡改签名)
该属性是给浏览器发送一个加密的 cookie,该属性默认为 false。在 express 中,我们可以使用 cookie-parser 插件来创建一个加密后的 cookie。服务端通过该 cookie 的内容和签名来检验它是否 被篡改
首先给 cookieParser 传入一个 secret。
app.use(cookieParser('forcabarca'));
然后返回一个 sign 后的 cookie。
res.cookie('signed', 'signed', {
signed: true
});
复制代码
在 express 中,我们可以使用 req.cookies 来获得 未加密 的 cookie 对象,可以通过 req.signedCookies 来获得 已加密 的 cookie 对象。
console.log(req.cookies); // { httpOnly: 'httpOnly' }
console.log(req.signedCookies); // { signed: 'signed' }
复制代码
session
ession 是服务端使用的一种记录客户端状态的机制,与 cookie 不同的是,session 保存在 服务端。当客户端初次发送请求时 (比如登录成功),服务端会将用户信息以某种形式保存在服务端,当再次访问时只需从该 session 中找到该客户的状态即可。
因此,cookie 机制就是通过检查客户身上的 “通行证” 来确定客户身份,而 session 则是通过检查服务器上的 “客户明细表” 来确认客户身份。session 相当于程序在服务器上建立的一份客户档案,客户来访的时候只需要查询客户档案表就可以了。
因为 HTTP 是无状态的,所以单纯的 session 仍不能判断是否为到底是哪个用户。因此服务端仍要向客户端发送一个 maxAge 为 -1 的 cookie 来作为不同用户的唯一标识。
当然你也可以不使用 cookie,你可以通过重写 URL 地址的方式来实现。它的原理是将用户的 seesion id 写入到 URL 中,当浏览器解析新的 URL 时就可以定位到是哪位用户。
万变不离其宗,两种方式都是要保证用户信息以某种形式保存到客户端。更先进的 localStorage,sessionStorage,IndexedDB 也是同样的道理,这里不去细说。