详解 cookie(待补充)

摘要:
前言:这原本是一个跨领域的学习问题,但当我看到一篇文章时,我提到了cookie。我工作了这么多年,但我无法描述。我解释说我的学习是无效的。费尔曼学会了技能,只是想了解它。什么是cookie,以及cookie的作用。2.cookie的工作机制,即cookie是运行过程的基本属性。3.如何使用cookie。1.什么是cookie http协议本身无状态,什么是无状态?也就是说,服务器无法判断用户的身份。cookie本质上是一小段文本信息。既然服务器无法判断用户的身份,那么它如何判断用户的状态?

前言:

本来是学习跨域的问题,结果看到一篇文章时,提到了cookie,工作这么多年,可是自己却无法进行述说.说明自己的学习是无效的,费尔曼学习技巧,只想去弄懂他.

1.什么是cookie,cookie的作用

2.cookie的工作机制,即cookie是运行流程

3.cookie的基本属性(4个),如何去使用cookie

一.什么是cookie

http协议本身是无状态的,什么是无状态呢,即服务器无法判断用户身份,cookie实质是一小段的文本信息(key=value格式各个cookie之间一般用";"隔开,即键值对格式)

问题:既然服务器无法判断用户身份,那么又是如何来判断用户的状态呢?  (这里对应cookie机制)

第一步:客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response(响应)向客户端浏览器颁发一个cookie.

第二步:客户端浏览器会把cookie保存起来.

第三步:当浏览器再请求网站时,浏览器会把请求的网址连同该cookie一同提交给服务器.服务器检查该cookie,以此来辨认用户状态

故事说明:例如我们去办银行卡,里面存放了身份证,密码等信息,等下次来银行时,银行机器就能识别你的卡,从而可以办理业务.

二.cookie机制

当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:

1.客户端发送一个请求到服务器

2.服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部

3.客户端保存cookie,之后想服务器发送请求时,HttpRequest请求中会包含一个cookie的头部

4.服务器返回响应数据

详解 cookie(待补充)第1张

三.cookie的属性项

属性项属性项介绍
NAME=VALUE键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
Expires过期时间,在设置的某个时间点后该 Cookie 就会失效
Domain生成该 Cookie 的域名,如 domain="www.baidu.com"
Path该 Cookie 是在当前的哪个路径下生成的,如 path=/wp-admin/
Secure如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie


以上内容来源:https://www.jianshu.com/p/6fc9cea6daa2
 
以上是基本的介绍.因为来源讲了后台的cookie,并没有完全了解,这里后续会根据自己的知识去待补充
 
 
 

四.cookie的基本结构

cookie是以键值对的形式保存的,即key=value的格式,cookie之间以";"分隔
 

四.场景预设:

在一个流程操作中,由A页面跳转到B页面,若在A页面中采用js用变量temp保存了某一变量值,在B页面时,同样要使用js来引用temp的变量值,对于js中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,没有达到保存的效果,解决整个问题的最好的方案是采用cookie来保存该变量的值,那如何设置和读取cookie呢?
 
 

4.1 js设置cookie

 
场景:假设在A页面中保存变量username的值("jack")到cookie中,key值为name,则相应的js代码为:
document.cookie = "name="+username;
提点:
cookie的本质是一小段的文本信息,采用key=value格式.
cookie是依附在document对象上的
 

4.2 js读取cookie

场景: 在B页面中获取变量username的值得js代码如下:
假设cookie中存储的内容为:name=jack;password=123
let username = document.cookie.split(";")[0].split("=")[1];  
提点:
cookie的本质是一小段的文本信息,采用key=value格式.
cookie是依附在document对象上的
 
重点:cookie是运行在客户端的,所以可以用js来设置cookie.
扩展: 
1/ session是运行在服务器端的.
2/cookie是运行在客户端的,所以可以用js来设置cooie
 
常见写入和读取cookie的语句 ,后面有分析
说明:这里为什么有两种语法呢,因为document.cookie无法被写入和读取,猜测是语句问题,但是并不是语法问题.
// function setCookie(name, value) { // var Days = 30; // var exp = new Date(); // exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); // document.cookie = // name + // "=" + // escape(value) + // ";expires=" + // // exp.toGMTString() + // exp.toUTCString() + // ";HttpOnly=false"; // } // function getCookie(name) { // var arr, // reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); // if ((arr = document.cookie.match(reg))) return unescape(arr[2]); // else return null; // } // setCookie("name", "hayden"); // console.log(getCookie("name")); var Cookie = { set: function (key, val, expiresDays) { if (expiresDays) { var date = new Date(); date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); var expiresStr = "expires=" + date.toUTCString() + ":"; } else { var expiresStr = ""; } document.cookie = key + "=" + escape(val) + ";" + expiresStr; }, get: function (key) { var getCookie = document.cookie.replace(/[ ]/g, ""); var resArr = getCookie.split(";"); var res; for (var i = 0, len = resArr.length; i < len; i++) { var arr = resArr[i].split("="); if (arr[0] == key) { res = arr[1]; break; } } return unescape(res); }, }; Cookie.set("name", "123", 30); console.log(Cookie.get());  
 
document.cookie无法写入读取分析
1/谷歌浏览器现在版本不支持,与httponly属性有关
    试验过在document.cookie="httponly=false" // 可惜没有效果
2/查资料,cookie的读写目前已知的只有火狐浏览器可以.
 
为什么不让documnet.cookie进行写入与读取
1/可以防止xss攻击
 
未来可能遇到的问题
谷歌浏览器接口请求cookie突然无法携带的问题 来源:https://blog.csdn.net/weixin_43990297/article/details/107716124?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
最近突然遇到一个奇怪的事情,公司的一个后台项目,突然在自己浏览器上无法登陆,查看接口发现是接口没有携带cookie,但是换个浏览器就可以,比如火狐,别人的电脑在谷歌上却能登陆,这个问题可把我搞蒙了,找了一圈资料,终于发现一篇有用的。
首先如果你用axios,那么先设置withCredentials为true,
然后打开谷歌浏览器在Chrome中访问chrome://flags/,搜索SameSite并设置为disabled即可。
原因是Chrome升级到80版本之后cookie的SameSite属性默认值由None变为Lax,这也就造成了一些访问跨域cookie无法携带的问题。

解决方案除了上述手动设置,也可以上后台伙伴去设置响应头中set-cookie中的SameSite值,好像还有其他的一些参数,具体需要后台支持,后台伙伴看这里传送门

再者就是将cookie中携带的参数用请求头啊或者其他方式传递。

  

 
 
 

免责声明:文章转载自《详解 cookie(待补充)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇什么是xss攻击异步(二)回调地狱下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用jmeter做接口测试

1.启动jmeter。 我们可以找到Jmeter/bin 目录下的jmeter-server这个脚本,运行即可。 在下图打开的Jmeter 页面中,右键“测试计划” -> “添加” -> "Threads(Users)" -> “线程组”, 建立线程组。然后添加HTTP请求, 右键“线程组” -> “添加” -> “Sampl...

cookies,sessionStorage 和 localStorage 之间有什么区别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存 存储大小: cookie数据大小不能超过4k s...

ASP.NET内置对象Session缺点及解决办法---by winter

Session 是我们经常用到的对象,今天我才发现原来它不是那么简单,他也有很多优缺点和局限性。如果我吗想将我们的网站做到极致,就必须了解它的优缺点。希望在此之后我能够去学习session以外的其他asp.net内置对象。这是一个任务。过年前必须完成!!! 以下是我需要深入了解的: 什么是内置对象?就是asp.net已经为你定义好了的,不用自己定义,直接调用...

《图解HTTP》学习总结

第一章 了解Web及网络基础 1.Web的出现是为了实现知识共享规划的。最初的设想是,借助多文档之间相互关联形成的超文本,连成万维网(WWW)。 2.WWW构建技术是SGML、HTTP和URL,现在WWW简称为Web。 3.TCP/IP协议族分为四层:应用层、传输层、网络层和数据链路层。传输层对请求报文进行分割和标序,网络层对请求报文增加MAC地址。 4.I...

Cookie&amp;&amp;Session

会话技术 域对象: ServletContext:服务器开启到服务器关闭,在整个web应用中只有一个context对象。 Request对象:从客户端请求到服务端request域对象建立,第一次请求结束的一刹那request域对象就销毁了。 会话:一次会话中包含多次请求和响应。 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直...

05-常见面试题目-HTTP

1.HTTP报文结构 HTTP有两类报文:1)请求报文2)响应报文 HTTP的请求报文和响应报文由三个部分组成。1)开始行。用于区分是请求报文还是响应报文。在请求报文中的开始行叫做请求行,在响应报文中的开始行叫做状态行2)首部行,用于说明浏览器,服务器或报文主体的一些信息3)实体主体 2.常见状态码和含义 状态码都是三位数字的,分为5大类共33种 1xx:...