cookie、xss攻击、WebStorage

cookie

1. cookie的定义

   • cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据
   • cookie就是页面用来保存信息，比如自动登录，用户名

2. cookie作用

   • cookie的主要作用是保存信息，并与服务器互动，因此在很多情况下都可以使用到cookie。
   • 密码 cookie：访当问者首次访问页面时，也许会填写密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回

3. cookie的特性

   • cookie必须运行在服务器的环境下（开启服务器）
   • cookie的容量: 5kb
   • cookie存储的数据类型: 字符串
   • cookie 的作用域为当前域，有文件夹路径的区分,以域中的文件夹存储，不能跨域访问。存储的位置都是以这个域作为存储空间的，别的域不能访问
   • 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条
   • Cookie默认是临时存储的，当浏览器关闭时，自动销毁
   • 如果想长时间存放一个cookie，同时需要设置一个过期时间
   • cookie的使用方面
     • 刷新页面时可以使用
     • 跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容

4. cookie的缺点

   • cookie可能被用户禁用，可能被删除，安全性不够高，保存用户名密码等信息时，最好事先经过加密处理。cookie是与浏览器相关的， 不同浏览器之间所保存的cookie也是不能互相访问的

5. 创建cookie

   • 存储cookie数据

     • document.cookie="name=lisi";
       document.cookie="name=zhangsan";
       //同一属性只能设置一次，否则会被覆盖
       

   • 获取cookie数据

     • console.log(document.cookie);
       

6. cookie的生存周期

   • 生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。

   • //设置生存时间
     var date=new Date();
     date.setMinutes(6);
     document.cookie="name=zhangsan;expires="+date.toUTCString();
     

   • //删除过期失效的cookie
     
     

7. 一些零碎知识

   • 两种存储方式：存储到本地（获取计算机权限）存储到服务器
   • 中间部分：浏览器，任何页面不允许到本地存储
   • md5进行加密，是不可逆的
   • md5进行在线解密

   XSS攻击

   • 跨站脚本攻击
   • xss是一种在web应用中的计算机安全漏洞，他允许恶意web用户将代码植入到提供给其他用户使用的页面中
   • 能被XSS攻击需要以下两点：
     • 需要向web页面注入恶意代码
     • 这些恶意代码能够被浏览器成功的执行

   WebStorage

   1. 解释

      • HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。这些数据可以是临时的（浏览器一关就自动删除），或者是长期存在的（无论多少天之后打开网站，仍然可以访问这些数据）。。

   2. 分类

      • localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
      • sessionStorage: 会话存储，用于本地存储一个会话中的数据，这些数据当在关闭浏览器后数据也随着销毁

   3. webstorage的操作

      • //存储localStorage中name属性和值
        localStorage.name="zhangsan";
        
        //获取localStorage的数据
        console.log(localStorage.name);
        
        //和localStorage.name="zhangsan";一样
        localStorage.setItem("name","zhangsan");
        
        //和localStorage.name一样
        localStorage.getItem("name")
        
        localStorage.removeItem("name");//删除某个数据
        localStorage.clear();//清除所有数据
        
        // 只能存储字符串，所以往localStorage中存储时只能先转化为json字符串
        var arr=[1,2,3];
        localStorage.arr=JSON.stringify(arr);
        var arr=JSON.parse(localStorage.arr);
        console.log(arr);
        

   4. localStorage/session/cookie的区别

      • cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

      • 存储大小限制不同。cookie数据不能超过4k,而sessionStorage和localStorage可以达到5M或更大

      • 数据有效期不同。sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

      • 作用域不同。sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

      • Web Storage 的 api 接口使用更方便

      • Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

      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];
      }
      
      
      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);
          }
      }
      
      //删除一个数据的cookie数据
      static removeCookie(key){
          Utils.setCookie(key,"",new Date());
      }
      //删除所有的cookie数据
      static clearCookie(){
          for(var key in Utils.getCookie()){
              Utils.removeCookie(key);
          }
      }