存储cookie

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 接口使用更方便。