cookie

已于 2023-04-06 17:27:18 修改
阅读量1.2k 收藏 3
点赞数
分类专栏： 2022_浏览器 # 插件 文章标签： 服务器 java 网络
于 2023-04-06 17:11:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43260366/article/details/129409549
版权

目录

定义

cookie 是后端可以存储在用户浏览器中的小块数据！

cookie 最常见用例包括用户跟踪，个性化以及身份验证。

cookie的相关信息

以百度的打开界面为例，查看一下cookie的相关信息，如下图：
在这里插入图片描述
一条cookie就存在12个相关配置信息

Doamin

Domain: 表示cookie能够作用的主机地址(域名);

tips: Domain里面不携带协议和端口，但是cookie的部分属性只有在https协议下才有效(Secure字段相关)

  • Domain字段的值：

    在这里插入图片描述
    通过上图可以看到有的域名前面带有.,有的域名前面不加.

    前面加点的表示该cookie既可以作用于当前域名又可以作用于其子域名 ，不加点表示该cookie仅仅作用于当前域名

  • 默认值：若是没有显示设置Domain,则浏览器会自动截取当前url的host作为Domain的值
    在这里插入图片描述
    当前页面的域名为 www.baidu.com

    在当前页面设置cookie ⇒ document.cookie=‘test=11111’
    在这里插入图片描述
    可以看到默认的域名为当前页面的host

  • 可以设置的域名
    在这里插入图片描述
    我想修改cookie的Domain为localhost ==> document.cookie=‘test=11111; Domain=localehost’, 发现cookie的Domain值无变化

    原因是在子域里面可以给父域设置cookie，其余不可互相设置！ www.baidu.com与localhost之间毫无关联，因此不可互相设置为其Domain

    那么此时我将域名设置为baidu.com, document.cookie=‘test=11111; Domain=baidu.com’
    此时发现域名值变为.baidu.com(设置成功)
    在这里插入图片描述

    tips: 只有Name/Domain/Path值都一致，才会被认为是同一cookie才会被覆盖，其余情况会被认为是不同cookie

Path

Path: 表示在当前路径后面拼接哪些路径可以使用此cookie

  • 默认值： / 表示当前路径后面拼接任何路径都可以使用此cookie
  • 举例说明 在a.com/a 这个页面设置了一个cookie 这个cookie的path= /a 那么在a.com/a这个页面可以拿到这个cookie但是在a.com/b这个页面就拿不到cookie
    注：在a.com/a/b还是可以拿到这个cookie的
Expires/Max-age

expirse: 在指定时间失效; 若是设置的时间为过去的时间则表示立即删除这个cookie
max-age：多少秒之后失效。若是负值则表示立即删除这个cookie

都存在：max-age 的优先级更高一点
都不存在：session(会话)cookie，在浏览器关闭时cookie失效（关闭当前页面不会失效）
在这里插入图片描述

tips:这里显示的时间要加8个小时才是北京时间

HttpOnly

HttpOnly字段为true表示该cookie无法使用js获取和操作，仅能通过浏览器或服务器来控制。

这个字段为true的cookie一般是用来存储一些与用户身份相关的信息或安全凭证的！

使用这个字段可以避免用户的关键信息被盗用

Secure

这个字段为true表示该cookie 只能在 协议为https的协议中使用

若是协议为http的请求，则这个cookie会被自动忽略！

samesite

samesite可以 限制跨站请求时cookie的发送，该字段只有在跨站请求的时候才会起作用！

samesite的值一共有四种情况

  • None: 不论是否跨站都发送cookie
    注：虽然约束性最弱，但是只有在协议为https时才有效 而且必须带有Secure字段 否则会有 橙色感叹号标志

  • Lax：部分情况下携带cookie
    在这里插入图片描述

  • Strict: 跨站不携带cookie

使用js操作cookie
获取cookie

document.cookie可以获取部分cookie相关信息(HttpOnly为false的字段)

  document.cookie.split(';')

获取到的值为

[
 'BIDUPSID=E0494A9A74FC1B360707B6185A210ABE',
 ' PSTM=1679652950',
 ' BAIDUID=E0494A9A74FC1B368E290637135810DB:FG=1', 
 ' BD_UPN=123253', 
 ' BAIDUID_BFESS=E0494A9A74FC1B368E290637135810DB:FG=1', 
 ' BD_HOME=1', 
 ' ZFY=Kg6ntAWGkfjwXZ5ocPZXZENPOSJeX2IcPgSR4yMqnYs:C', 
 ' H_PS_PSSID=36545_38105_38470_38439_38468_38289_36806_37925_38383_26350_38423_37881', 
 ' BA_HECTOR=0ga081aka1a1a4040k842kf11i27ng41m']0: "BIDUPSID=E0494A9A74FC1B360707B6185A210ABE"1: " PSTM=1679652950"2: " BAIDUID=E0494A9A74FC1B368E290637135810DB:FG=1"3: " BD_UPN=123253"4: " BAIDUID_BFESS=E0494A9A74FC1B368E290637135810DB:FG=1"5: " BD_HOME=1"6: " ZFY=Kg6ntAWGkfjwXZ5ocPZXZENPOSJeX2IcPgSR4yMqnYs:C"7: " H_PS_PSSID=36545_38105_38470_38439_38468_38289_36806_37925_38383_26350_38423_37881"8: " BA_HECTOR=0ga081aka1a1a4040k842kf11i27ng41m"
]
添加/修改一个cookie
  • 使用document.cookie='key=value ...'语法添加或修改cookie
    • 若是不存在此字段(或name/domain/path任意字段不同)，则添加cookie
    • 若是存在此字段(且name/domain/path三个字段都相同)，则修改cookie值
  • 在添加过程中，除了Name字段是必须设置的，其余字段都可以不设置，若是不设置值，那么这些字段的默认值是什么呢？
     document.cookie='test='
    在上述代码中我在添加cookie时仅仅设置了cookie的name与value字段其他字段都没有设置，通过下属图片可以看到其他字段的默认值
    在这里插入图片描述
    • Value: 默认为空
    • Domain: 默认为当前url的host
    • Path: 默认为/
    • Expires/Max-Age: 默认为会话(浏览器关闭失效)
    • HttpOnly: 默认为false
    • Secure: 默认为false
    • SameSite: 默认为空
  • 举例说明
      document.cookie='test=111'
  document.cookie='test=111; max-age=7000'
  document.cookie='test=111; max-age=7000; path=/web/search' // 设置无效，因为当前url为/web 所以浏览器会默认忽略这条cookie; 此时打开url='/web/search'会发现存在此cookie
删除cookie
  document.cookie = 'key=;max-age=-1'

通过添加max-age等于一个负值，则该字段就会在cookie面板消失

插件js-cookie
  • 下载
    npm install --save js-cookie
  • 使用
    import Cookies from 'js-cookie'
    存储cookie
    Cookies.set(name, value)
Cookies.set(name, value, { expires: 7, path:'' })
    获取cookie
    //  获取带有指定name的cookie
Cookies.get(name) 

// 获取所有cookie
Cookies.get()
    删除cookie
    // 删除指定名称的cookie
Cookies.remove(name) // value

// 删除带有路径的cookie
Cookies.remove(name, { path: '' })
服务端设置cookie

服务端可以在响应头中通过 set-cookie字段设置cookie。设置格式如下

Set-Cookie: Name=Value

在请求响应后，浏览器会自动检查response中是否存在cookie，若是存在会自动添加在浏览器的application中的cookie中。在发送请求时会自动携带符合条件的cookie!

需要注意的是，在跨域情况下设置的set-cookie默认情况下会被浏览器忽略。

跨域情况下前端获取不到cookie

在这里插入图片描述
如上图，我在响应头中看到后端返回的cookie，但是在浏览器的application中的Cookies里并没有看到此cookie;

原因：因为我是在本地调试，产生了跨域 -> 在跨域情况下set-cookie默认情况下会被浏览器忽略。

解决：

  • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
  • 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名
  • ajax需要指定withCredentials为true
本地调试解决跨域问题导致cookie不能携带的问题

域名映射

跨站与跨域
跨域

先了解一下跨域，简单来说就是协议名、域名、端口号只要有一个不一致则被称为跨域！

跨站

先了解一下域名，只要是顶级域名与一级域名一致就不跨站，若是顶级域名或一级域名不一致则被称为跨站！

提取谷歌游览器Cookie的几种方法
孤寒者的博客
07-31 1万+
提取谷歌游览器Cookie的几种方法
Cookie 与端口问题
liu_moran的博客
06-08 3784
1. 问题描述 同一套前端ERP程序，部署了多个账套。两个账套的协议、ip相同，端口不同。 http://xxx.xx.x.xxx:8080 http://xxx.xx.x.xxx:9201 当同一用户在同一浏览器(Chrome)打开这两个不同端口的程序进行操作时,出现表单提交错误、切换程序操作需重新登录等问题。 2. 排查过程 经排查，发现是出现了Cookie被覆盖的问题。排查过程如下： 登录 8080 后，获取到 Cookie beegosessionID=xxxxx1。此时 8080 标签页可与
cookie中的path与domain属性详解
coding
08-29 1044
1.domain表示的是cookie所在的域，默认为请求的地址，如网址为www.jb51.net/test/test.aspx，那么domain默认为www.jb51.net。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com；如果要在域A生产一个令域A不能访问而域
cookie详解
最新发布
Mrs_Lupin的博客
03-29 954
Domain和Path即允许 Cookie 应该发送给哪些 URL。
设置cookie的domain属性。
hyhyct的专栏
02-21 3621
2010-01-27 15:32 设置cookie的domain属性。 　解决办法： 　　设置cookie的domain属性。 　　详细介绍： 　　把保存用户登陆信息的cookie的域设置成一样即可。usercookie.Domain=".xxx.com"; 要注意，在域名前必须要加一个"."。这个设置在登陆和退出的时候都需要。 　　比较普遍的做法自然是用一个专门负责用户登陆的类来管
cookie的domain属性
热门推荐
longgege001的博客
07-31 9万+
欢迎大家光临我的个人博客，详戳 https://545longgege.top/ 最近在改一个bug单时，有个问题涉及到了cookie的domain属性，大致场景是由于不同的服务页面出现了同名的cookie但是domain域不同，导致出现了不可思议的bug。于是查询与cookie的domain属性相关的资料并记录之。 1、什么是Cookie? Cookie是由W3C组织提出，最...
浅谈cookie跨域的解决方案——document.domain
筱葭的博客
03-10 4万+
cookie的名/值对中的值不允许出现分号、逗号和空白符，因此在设置cookie前要用encodeURIComponent()编码，读取时再用decodeURIComponent()解码。 cookie默认的有效期是浏览器会话期间，作用域是整个浏览器而不仅仅局限于窗口或标签页。若要延长cookie的有效期，可以设置max-age属性。 cookie的domain和path属性： 1.
EditThisCookie.crx cookie编辑导入导出利器
06-29
《EditThisCookie.crx：强大的Cookie管理工具及与curl的集成》 在互联网浏览中，Cookie扮演着重要的角色，它们存储用户信息、保持登录状态、个性化网页内容等。EditThisCookie.crx是一款专为Chrome浏览器设计的强大...
获取cookie非常好用的google插件
06-10
标题中的“获取cookie非常好用的google插件”指的是在Google Chrome浏览器上的一种扩展程序，它允许用户方便地管理和操作浏览器中的Cookie数据。Cookie是网站在用户计算机上存储的小型文本文件，用于跟踪用户偏好、...
java操作cookie示例(删除cookie)
09-04
在Java Web开发中，Cookie是一种常用的技术，用于在客户端存储和传递少量信息。本文将详细介绍如何使用Java操作Cookie，特别是如何设置、读取和删除Cookie。 首先，我们来看如何**设置Cookie**。在Java中，我们通常...
Cookie的Domain
weixin_30378623的博客
04-30 213
每个Cookie都有常用的几个元素:name、value、expires、domain Cookie的Domain 设置cookies时，可以设置cookie的域名参数domain，标识cookie在特定站点的合法性。 大家知道，cookie是与域名绑定的，如果A站点的cookie，B站点是不能访问的，这是浏览器的同源策略限定，主要是出于安全考虑。但是，如果A站点在设置cookie时，设置了...
cookie的domain参数详解
ni_hao_ya的专栏
03-13 9206
1. 在任何域名下，cookie的domain参数都只能指定为当前域名或上级域名（包括上级的上级，等等），此外都是无效的。     如：在t.a.b.com下，指定domain为t.a.b.com、a.b.com、b.com都是可行的。 2. 在domain的参数前，是否存在符号“.”是完全相同的。     如：domain=a.b.com和domain=.a.b.com是完全相
cookie-domain设置
y397126710的专栏
07-08 1471
var WebSiteCookie={     cookieName:"name",     cookieValue:"",     expires:new Date((new Date()).getTime()+1*60*1000),     domain:"",     path:"/",     set:function(){        //设置cookie值       
正确使用cookie中的domain
寬真
07-18 3万+
 看规则，尝试使用规则，记录问题，多次使用使之熟练。今天发现vue中的this.$router.push()不熟悉了。做记录并不代表不会忘，只是为了能够理清逻辑，加深印象。 本文内容有复制粘贴其他博主的内容，在此谢过了。 问题： 今天遇到一个不新但是不常用的技术：cookie。做统一登录平台，要求实现统一登录平台登录之后，其他平台都可以直接登录进入登录状态，不用再登录了。他们提的技术方案是用...
浅析cookie之domain篇
a7442358的专栏
12-21 3069
浅析cookie之domain篇
Cookie
qq_30436011的博客
12-10 2092
一、 Cookie Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。 Cookie主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） 二、Cookie的一些属性
cookie 的domain属性
zdl8255的专栏
04-17 860
今天看公司的项目，看到登陆那用cookie记录用户登陆信息，就用账号试了一下，账号、密码都没事。但就是写不进cookie中。各种测试。我是菜鸟，就把他的代码都system.out了一下。也没事。让我就我简单的自己new了一个cookie。只加了name和value属性，测试了一下，居然写进去了。省略。。。直接进入主题：最后发现就是domain有问题。因为项目是从配置文件拿到的domain去设置这个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值