丹徒网站建设平台,分销商城平台,Wordpress development,电子商务网站前台设计一、Cookie的出现浏览器和服务器之间的通信少不了HTTP协议#xff0c;但是因为HTTP协议是无状态的#xff0c;所以服务器并不知道上一次浏览器做了什么样的操作#xff0c;这样严重阻碍了交互式Web应用程序的实现。针对上述的问题#xff0c;网景公司的程序员创造了Cookie。…一、Cookie的出现浏览器和服务器之间的通信少不了HTTP协议但是因为HTTP协议是无状态的所以服务器并不知道上一次浏览器做了什么样的操作这样严重阻碍了交互式Web应用程序的实现。针对上述的问题网景公司的程序员创造了Cookie。二、Cookie的传输服务器端在实现Cookie标准的过程中需要对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分Set-Cookie: namevalue; expiresTue, 03-Sep-2019 14:10:21 GMT; path/; domain.xxx.com;浏览器端会存储这样的Cookie并且为之后的每个请求添加Cookie HTTP请求头发送回服务器Cookie: namevalue服务器通过验证Cookie值来判断浏览器发送请求属于哪一个用户。三、浏览器中的Cookie浏览器中的Cookie主要由以下几部分组成名称Cookie唯一的名称必须经过URL编码处理。同名会出现覆盖的情况值必须经过URL编码处理。域domain默认情况下cookie在当前域下有效你也可以设置该值来确保对其子域是否有效。路径path指定Cookie在哪些路径下有效默认是当前路径下。失效时间expires默认情况下浏览器会话结束时会自动删除Cookie也可以设置一个GMT格式的日期指定具体的删除日期如果设置的日期为以前的日期那么Cookie会立即删除。安全标志secure指定之后只允许Cookie发送给https协议。浏览器在发送请求时只会将名称与值添加到请求头的Cookie字段中发送给服务端。浏览器提供了一个非常蹩脚的API来操作Cookiedocument.cookie通过上述方法可以对该Cookie进行写操作每一次只能写入一条Cookie字符串document.cookie a1; secure; path/通过该方法还可以进行Cookie的读操作document.cookie // a1由于上述方法操作Cookie非常的不直观一般都会写一些函数来简化Cookie读取、设置和删除操作。对于Cookie的设置操作中需要以下几点对于名称和值进行URL编码处理也就是采用JavaScript中的encodeURIComponent()方法expires要求传入GMT格式的日期需要处理为更易书写的方式比如设置秒数的方式注意只有的属性名的secure每一段信息需要采用分号加空格。function setCookie (key, value, attributes) {if (typeof document undefined) {return}attributes Object.assign({}, {path: /}, attributes)let { domain, path, expires, secure } attributesif (typeof expires number) {expires new Date(Date.now() expires * 1000)}if (expires instanceof Date) {expires expires.toUTCString()} else {expires }key encodeURIComponent(key)value encodeURIComponent(value)let cookieStr ${key}${value}if (domain) {cookieStr ; domain${domain}}if (path) {cookieStr ; path${path}}if (expires) {cookieStr ; expires${expires}}if (secure) {cookieStr ; secure}return (document.cookie cookieStr) }Cookie的读操作需要注意的是将名称与值进行URL解码处理也就是调用JavaScript中的decodeURIComponent()方法function getCookie (name) {if (typeof document undefined) {return}let cookies []let jar {}document.cookie (cookies document.cookie.split(; ))for (let i 0, max cookies.length; i max; i) {let [key, value] cookies[i].split()key decodeURIComponent(key)value decodeURIComponent(value)jar[key] valueif (key name) {break}}return name ? jar[name] : jar }最后一个清除的方法就更加简单了只要将失效日期expires设置为过去的日期即可function removeCookie (key) { setCookie(key, , { expires: -1 }) }介绍Cookie基本操作的封装之后还需要了解浏览器为了限制Cookie不会被恶意使用规定了Cookie所占磁盘空间的大小以及每个域名下Cookie的个数。为了绕开单域名下Cookie个数的限制开发人员还创造了一种称为subcookie的概念这里就不在赘述了可以参考【JavaScript高级程序设计第23章 p633】。四、服务端的Cookie相比较浏览器端服务端执行Cookie的写操作时是将拼接好的Cookie字符串放入响应头的Set-Cookie字段中执行Cookie的读操作时则是解析HTTP请求头字段Cookie中的键值对。 与浏览器最大的不同在于服务端对于Cookie的安全性操碎了心signed当设置signedtrue时服务端会对该条Cookie字符串生成两个Set-Cookie响应头字段 Set-Cookie: lastTime2019-03-05T14:31:05.543Z; path/; httponlySet-Cookie: lastTime.sigURXREOYTtMnGm0b7qCYFJ2Db400; path/; httponly这里通过再发送一条以.sig为后缀的名称以及对值进行加密的Cookie来验证该条Cookie是否在传输的过程中被篡改。httpOnly服务端Set-Cookie字段中新增httpOnly属性当服务端在返回的Cookie信息中含有httpOnly字段时开发者是不能通过JavaScript来操纵该条Cookie字符串的。 这样做的好处主要在于面对XSSCross-site scripting攻击时黑客无法拿到设置httpOnly字段的Cookie信息。 此时你会发现localStorage相比较Cookie在XSS攻击的防御上就略逊一筹了。sameSite 在介绍这个新属性之前首先你需要明白当用户从http://a.com发起http://b.com的请求也会携带上Cookie而从http://a.com携带过来的Cookie称为第三方Cookie。虽然第三方Cookie有一些好处但是给CSRFCross-site request forgrey攻击的机会。为了从根源上解决CSRF攻击sameSite属性便闪亮登场了它的取值有以下几种strict浏览器在任何跨域请求中都不会携带Cookie这样可以有效的防御CSRF攻击但是对于有多个子域名的网站采用主域名存储用户登录信息的场景每个子域名都需要用户重新登录造成用户体验非常的差。lax相比较strict它允许从三方网站跳转过来的时候使用Cookie。为了方便大家理解sameSite的实际效果可以看这个例子 // a.com 服务端会在访问页面时返回如下Cookiecookies.set(foo, aaaaa)cookies.set(bar, bbbbb)cookies.set(name, cccccc)// b.com 服务端会在访问页面时返回如下Cookiecookies.set(foo, a, { sameSite: strict })cookies.set(bar, b, { sameSite: lax })cookies.set(baz, c)如何现在用户在a.com中点击链接跳转到b.com它的请求头是这样的Request Headers Cookie: barb; bazc 五、网站性能优化Cookie在服务端和浏览器的通信中主要依靠HTTP的响应头和请求头传输的所以Cookie会占据一定的带宽。前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息但是对于同站内的静态资源服务器并不需要处理其携带的Cookie这无形中便浪费了带宽。在最佳实践中一般都会将静态资源部署到独立的域名上从而可以避免无效Cookie的影响。作者descire链接http://www.imooc.com/article/286535