cookie存储 XSS跨站脚本攻击 localStorage sessionStorage_sessionstorage.getitem xss

什么是cookie

cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。

cookie的主要作用是在浏览器中进行数据的存储，并与服务器互动。
比如：密码 cookie，访当问者首次登陆网站时，需要填写密码。密码可被存储于 cookie 中。当他们再次访问网站时，就会从 cookie 中取回密码。

cookie可以用来做广告的精准投放，将用户搜索的信息存储在本地，在别的网站做广告时，可以调用cookie，从而完成广告的精准投放。

cookie的特点

• cookie只能存储文本信息，存储的数据类型只能是字符串；
• cookie是根据文件的域名和路径进行存储的；
  • 不同域名下的cookie是不可以被相互调用的，只能调用自己域名下的cookie；
  • 子目录能看到上级目录的cookie；
  • 上级目录看不到子目录的cookie；
  • 不同同级目录看不到相互的cookie；
• 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为50条。
• cookie默认是临时存储的，当浏览器关闭时，自动销毁，如果想长时间存放一个cookie，同时需要设置一个过期时间，参数是UTC格式的日期；
• cookie必须运行在服务器的环境下（开启服务器）；
• cookie的容量: 5kb；
• cookie存储在指定的位置，不能随意改变位置，以前在电脑c盘=>window文件夹可以直接找到查看cookie文件，cookie后来都做了加密隐藏处理，现在无法直接找到cookie文件内容；
• 在cookie使用中，主要用于前后端不分离，如果前后端分离，使用AJAX发送时是不同的；前后端不分离时，cookie会随着访问自动往返服务端和客户端，如果是ajax发送，cookie就不会自动携带发送；

cookie的操作

• 使用 document.cookie = “key=value”，创建cookie；
• 使用 document.cookie，可以获取到cookie文件的内容；
• 使用 expires 设置 cookie 过期时间，参数是UTC格式的日期；

//创建cookie
document.cookie="user=xiaoming";
document.cookie="age=30";
document.cookie="sex=man";

//获取cookie
console.log(document.cookie);//user=xiaoming; age=30; sex=man

//设置cookie的生存期
var date=new Date();
date.setHours(date.getHours() + (24 * 30)); //保存30天
document.cookie="user=xiaoming;expires="+date.toUTCString();
1
2
3
4
5
6
7
8
9
10
11
12

XSS跨站脚本攻击

XSS攻击，全称跨站脚本攻击，是为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中，它的目的是盗取cookie数据 ，不过现在这种攻击方式基本都已经被屏蔽了。

举个例子：
当在输入框中写入 <script>alert(document.cookie)</script> 后，点击提交，页面会执行提交的 script 脚本，这样就可以获取到当前用户页面中存储的 cookie了。

XSS 实现有以下三点：

1. 必须有允许用户输入文本内容的情况，并且将这个输入的文本内容可以发送到服务器；
2. 服务器必须存储了这个发过来文本内容，并且将这个文本内容展示在页面中；
3. 这个文本内容必然包括了 script 脚本，在用户打开页面时，这段 script 脚本被执行（可以将当前用的cookie盗取后发送到指定的服务器存储）；

如何解决这些问题：

1. 前端发送数据时，在文本内容提交前将 script 用正则提取出来转义（替换为任何其他非脚本文字）然后再发送给服务器；
2. 服务器在返回客户端存储的时候，生产页面需要做判断处理查看是否有XSS攻击，然后做转义处理；
3. 除此之外，还需要判断所有提交标签中 href 属性中是否含有JavaScript 内容，也要做转义处理；
4. 在设置cookie时，将httpOnly属性设置为true，表示cookie仅通过HTTP（S）发送，并且不提供给客户端JavaScript，这样使用js 就获取不到cookie了。

WebStorage

WebStorage 分为localStorage（本地存储）和sessionStorage（会话存储）；

• localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
• sessionStorage：会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁；
• localstorage 在不同的浏览器下，是不互通的；
• sessionStorage 在不同窗口、不同标签页是不互通的；

localStorage 和 sessionStorage的操作语法相同。

//创建localStorage
localStorage.user="xiaoming";
localStorage["user"]="xiaoming";
localStorage.setItem("user","xiaoming");

//获取localStorage
console.log(localStorage.user);
console.log(localStorage["user"]);
console.log(localStorage.getItem("user"));

//删除localStorage
delete localStorage.user;
localStorage.removeItem("user");

//清除所有localStorage存储
localStorage.clear();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

给 window 监听 storage 事件，可以用来不同页面间的通信，可以获取到 storage 现在的值和过去的值：

window.addEventListener("storage",storageHandler);
function storageHandler(e){
	console.log(e);
	// e.key 属性  e.newValue新值  e.oldValue过去的值
}
1
2
3
4
5

localStorage、sessionStorage与cookie的区别

• 在前后端不分离的项目中，cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下，而localStorage和sessionStorage不区分目录。
• 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，如果不设置过期时间，则当浏览器关闭时自动销毁，。
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
• WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。
• WebStorage 的 api 接口使用更方便。