cookis各参数详解

本文介绍了Cookie的相关属性,包括名称、值、域名、路径、过期时间、大小等,还说明了HttpOnly和Secure属性的作用。重点阐述了SameSite这一防止跨站点请求伪造的http安全特性,介绍了Strict和Lax两种设置及其对跨域请求的不同影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Name:cookie名

Value:cookie值

Domain:属于哪个域名

Path:属于哪个路径

Expires:过期时间

Size:大小

HTTP:HttpOnly=true的cookie不能被js获取到,无法用document.cookie打出cookie的内容

Secure:只能用https协议发送给服务器

SameSite:

一种新的防止跨站点请求伪造(cross site request forgery)的 http 安全特性。该值可以设置为 Strict 或 Lax

Strict

Strict是最严格的防护,有能力阻止所有CSRF攻击。然而,它的用户友好性太差,因为它可能会将所有GET请求进行CSRF防护处理。

例如:一个用户在reddit.com点击了一个链接(GET请求),这个链接是到facebook.com的,而假如facebook.com使用了Samesite-cookies并且将值设置为了Strict,那么用户将不能登陆Facebook.com,因为在Strict情况下,浏览器不允许将cookie从A域发送到B域。

Lax

Lax(relax的缩写?)属性只会在使用危险HTTP方法发送跨域cookie的时候进行阻止,例如POST方式。

例1:一个用户在reddit.com点击了一个链接(GET请求),这个链接是到facebook.com的,而假如facebook.com使用了Samesite-cookies并且将值设置为了Lax,那么用户可以正常登录facebok.com,因为浏览器允许将cookie从A域发送到B域。

例2:一个用户在reddit.com提交了一个表单(POST请求),这个表单是提交到facebook.com的,而假如facebook.com使用了Samesite-cookies并且将值设置为了Lax,那么用户将不能正常登陆Facebook.com,因为浏览器不允许使用POST方式将cookie从A域发送到B域

 

### 如何在 JavaScript 中读取 Cookie 的值 可以通过多种方式实现前端获取 Cookie 参数的功能。以下是两种常见的方法: #### 方法一:手动解析 `document.cookie` 字符串 可以编写一个自定义函数来解析 `document.cookie` 并提取指定名称的 Cookie 值。 ```javascript function getCookie(cookieName) { const cookies = document.cookie.split(';'); // 将字符串按分号分割成数组 for (let i = 0; i < cookies.length; i++) { let cookiePair = cookies[i].trim().split('='); // 移除多余空格并按等号分割键值对 if (decodeURIComponent(cookiePair[0]) === cookieName) { return decodeURIComponent(cookiePair[1]); // 返回解码后的值 } } return null; // 如果未找到对应的 Cookie,则返回 null } ``` 此代码片段展示了如何通过遍历 `document.cookie` 来定位特定名称的 Cookie,并利用 `decodeURIComponent` 对其进行解码处理[^1]。 #### 方法二:使用第三方库 Js-Cookie 另一种更简洁的方式是借助成熟的第三方库,比如 **Js-Cookie**。它可以简化操作流程,提供更加直观的方法调用来管理 Cookie 数据。 首先需要引入该库到项目中,接着按照下面的例子执行相应的设置与查询动作即可完成目标功能开发工作。 ```javascript import Cookies from "js-cookie"; // 设置名为'name'的Cookie及其对应的数据内容'value' Cookies.set('name', 'value'); // 查询已存在的某个具体名字叫'name'的Cookie所存储的信息 const nameValue = Cookies.get('name'); console.log(nameValue); // 输出结果应为'value' // 当尝试访问不存在的关键字时会得到undefined作为回应 console.log(Cookies.get('nothing')); // 显示undefined // 若要一次性取得当前页面上所有的可用cookies列表可采用这种方式 console.log(Cookies.get()); // 清理掉制定条目的记录数据 Cookies.remove('name'); ``` 这里介绍了基于流行插件的操作模式[^2],使得开发者能够快速高效地达成预期效果而无需过多关注底层细节逻辑编码过程中的复杂度问题。 --- #### 注意事项 尽管可以直接从浏览器环境中直接抓取公开暴露出来的HTTP-only类型的标记属性之外的一般性的客户端侧设定好的常规形式下的小型文本信息单元即通常所说的COOKIES但是需要注意的是对于那些特别指定了HttpOnly标志位被激活状态之下的安全防护机制作用范围内的这类特殊种类别的网络请求关联型附加携带项则无法单纯依靠上述介绍的技术手段轻易突破限制去强行获取它们的实际内部承载的具体数值含义因为这属于现代Web应用架构设计原则里头非常重要的组成部分之一旨在保护用户的隐私信息安全免受恶意脚本攻击威胁风险影响从而保障整个在线交互体验过程中各个环节层面都能够维持在一个相对较为稳定可靠的运行状况之下长期健康发展下去[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值