cookie
存储cookie
- cookie以域当中的文件夹存储,最上层的无法访问下层文件夹存储,下层子文件夹可以访问上层文件夹。
- 重要的文件存储在顶级域中
document.cookie="name=cyj"
获取cookie
- cookie 是怎么来到后端的 ? 自动携带在请求头里面过来的
- req 就是本次请求的所有内容
- req 里面有一个信息叫做 headers
- 拿到的就是本次请求的请求头
- req.headers.cookie
static getCookie(){
return document.cookie.split(/;\s*/).reduce((value,item)=>{
var arr=item.split("=");
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return value;
},{})
}
static getCookieValue(key){
return Utils.getCookie()[key];
}
设置cookie
- 后端设置 cookie 是在响应头里面设置
- 设置 cookie 就是在写一段响应头
- res.writeHead(200, { 配置信息 })
- 设置一条 cookie: { ‘set-cookie’: ‘cookie内容’ }
- 设置带有过期时间: { ‘set-cookie’: ‘cookie内容;expires=时间’ }
- 后端拿到的就是服务器时间
- 2020-09-01T00:20:10.160Z 服务端格式
- cookie 不认识服务端格式的, 必须要用 客户端格式
static setCookie(key,value,date){
if(!date){
document.cookie=`${key}=${value}`;
return;
}
document.cookie=`${key}=${value};expires=${date.toUTCString()}`;
}
static setCookies(obj,date){
for(var key in obj){
Utils.setCookie(key,obj[key],date);
}
}
- setcookie()
var obj= getCookie();
console.log(obj)
function getCookie(){
return document.cookie.split(/;\s*/).reduce((value,item)=>{
// console.log(item.match(/([^=]+)=([^=]+)/).slice(1));
// ^= 不包含=
var arr=item.split("=");
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return value;
},{})//空对象
}
// split切割变成数组 reduce归并
- cookie 只能作为临时存储,当浏览器关闭,就会丢失
- cookie 的作用域为当前域,有文件夹路径的区分,域中的文件夹存储,存储的位置都是以这个域作为存储空间的,别的域不能访问
- 1、刷新页面是可以使用
- 2、跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容
删除cookie
static removeCookie(key){
Utils.setCookie(key,"",new Date());
}
static clearCookie(){
for(var key in Utils.getCookie()){
Utils.removeCookie(key);
}
}
}
cookie可以设置过期时间
var date=new Date();
date.setMinutes(6);//设置6分钟后过期
document.cookie="name=cyj;expires="+date.toUTCString();//需要是格林尼治时间
- document.cookie = “名称=值;expires=” + 时间;(时间必须是一个字符串)
删除已经过期的cookie值
- clearcookie
- removecookie
cookie缺点
- cookie的容量: 5kb
- cookie存储的数据类型: 字符串
- 一个域名下存放的cookie的个数是有限制的,不同浏览器存放的个数不一样,cookie能存储的条目数为:50条。
- cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能
- cookie是与浏览器相关的。这意味着即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的;
- cookie可能被删除。因为每个cookie都是硬盘上的一个文件,因此很有可能被用户删除;
- cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。
Web Storage
可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。
这些数据可以是临时的(浏览器一关就自动删除),或者是长期存在的(无论多少天之后打开网站,仍然可以访问这些数据)。
- sessionstorage
- localstorage
- localStorage持久化存储,sessionStorage临时存储
XSS攻击
- 跨站脚本攻击,(Cascading Style
Sheets)XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
能被XSS攻击需要以下两点
- 需要向web页面注入恶意代码
- 这些恶意代码能够被浏览器成功的执行
XSS攻击手段
- 盗用cookie,获取敏感信息
- 利用植入Flash,通过crossdomain权限设置进一步获取更高权限;或者利用Java等得到类似的操作。
- 利用iframe、frame、XMLHttpRequest或上述Flash等方式,以(被攻击)用户的身份执行一些管理动作,或执行一些一般的如发微博、加好友、发私信等操作。
- 利用可被攻击的域受到其他域信任的特点,以受信任来源的身份请求一些平时不允许的操作,如进行不当的投票活动。
- 在访问量极大的一些页面上的XSS可以攻击一些小型网站,实现DDoS攻击的效果。
cookie和web storage区别
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage
虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 - 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage
在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。 - Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。