前端 js 操作 Cookie 详细介绍与案例

这篇具有很好参考价值的文章主要介绍了前端 js 操作 Cookie 详细介绍与案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 前言

1.1 详细介绍

  1. 名称和值:Cookie由一个名称和对应的值组成。名称是一个字符串,用于标识Cookie,而值则是与名称相关联的数据。
  2. 域名:每个Cookie都与特定的域名相关联。Cookie只会被发送到与其关联的域名下的请求中。
  3. 路径:Cookie可以与特定的路径相关联。当浏览器向指定路径下的服务器发送请求时,与该路径相关联的Cookie将被附加到请求中。
  4. 过期时间:Cookie可以设置一个过期时间,以指定Cookie的有效期限。一旦超过该时间,浏览器将不再发送该Cookie。
  5. 安全标志:通过设置安全标志,可以将Cookie限制为仅在通过HTTPS(安全的加密协议)进行通信时发送。
  6. HTTP Only标志:设置HTTP Only标志后,Cookie将无法通过客户端的脚本访问,这有助于防止跨站点脚本攻击(XSS)。

1.2 Cookie的工作流程

  1. 服务器发送一个包含Cookie的HTTP响应头给浏览器,响应头中包含了名称、值和其他相关信息。
  2. 浏览器接收到响应后,会将Cookie存储在本地的Cookie存储中。
  3. 当浏览器向同一域名下的服务器发送后续请求时,会自动附加存储在本地的Cookie信息到请求的HTTP头中。
  4. 服务器接收到请求后,可以读取Cookie中的值并根据需要做出相应的处理。

通过使用Cookie,服务器可以在不同的HTTP请求之间保持会话状态、记录用户首选项、实现购物车功能、进行用户跟踪等。然而,Cookie也有一些限制,包括存储容量的限制、跨域访问的限制以及安全性方面的考虑。

值得注意的是,由于隐私和安全的考虑,最近几年来,浏览器对Cookie的限制和隐私保护机制也有所增加,例如同源策略、Cookie的SameSite属性和用户对Cookie的控制选项等

哈喽,大家好,我是[有勇气的牛排](全网同名)🐮🐮🐮

https://www.couragesteak.com/article/439

有问题的小伙伴欢迎在文末[评论,点赞、收藏]是对我最大的支持!!!。

2 如何减小Cookie使用风险

在开发中,减少Cookie的风险是确保用户隐私和提高安全性的重要方面。以下是一些减少Cookie风险的最佳实践:

  1. 最小化Cookie的数据量:只存储必要的信息在Cookie中,避免存储敏感或不必要的数据。仅将标识用户会话或授权令牌等必要的信息存储在Cookie中。
  2. 使用安全标志:对于需要在安全通信(通过HTTPS)中传输的Cookie,设置"Secure"标志,这样可以确保Cookie只在加密的连接中传输。这有助于防止通过网络拦截或窃听攻击获取Cookie的值。
  3. 设置HttpOnly标志:对于存储敏感信息的Cookie,设置"HttpOnly"标志,防止客户端脚本访问Cookie。这可以减少跨站点脚本攻击(XSS)的风险,因为攻击者无法通过脚本访问或窃取Cookie的值。
  4. 使用适当的过期时间:设置适当的过期时间来限制Cookie的有效期。确保Cookie的生命周期仅限于需要的时间范围,避免过长时间的持久性Cookie,以减少风险。
  5. 采用同源策略:浏览器遵循同源策略,限制Cookie只在与其关联的域名下发送。这可以防止恶意网站访问其他域名下的Cookie信息。
  6. 使用SameSite属性:通过将Cookie的SameSite属性设置为Strict或Lax,可以限制Cookie只在同一站点发起的请求中发送,从而减少跨站点请求伪造(CSRF)攻击的风险。
  7. 适当处理敏感信息:对于包含敏感信息的Cookie,需要采取额外的保护措施,例如加密或哈希处理敏感数据,以及在存储和传输过程中使用适当的加密措施。
  8. 定期审查和清理Cookie:定期审查应用程序中使用的Cookie,确保不再需要的Cookie及时删除。及时清理无效或过期的Cookie,减少不必要的风险。

除了上述最佳实践,密切关注最新的Web安全标准和更新,并遵循相关的安全建议和建议也是非常重要的。同时,定期进行安全性评估和漏洞扫描,以确保系统和Cookie的安全性。

3 实战操作

3.1 设置 Cookie

function setCookie(name, value, expires, path, domain, secure) {
    let cookieString = name + "=" + encodeURIComponent(value);

    if (expires) {
        let expirationDate = new Date();
        expirationDate.setTime(expirationDate.getTime() + expires * 24 * 60 * 60 * 1000);
        cookieString += "; expires=" + expirationDate.toUTCString();
    }

    if (path) {
        cookieString += "; path=" + path;
    }

    if (domain) {
        cookieString += "; domain=" + domain;
    }

    if (secure) {
        cookieString += "; secure";
    }

    document.cookie = cookieString;
}

3.2 获取 Cookie

function getCookie(name) {
    let cookieName = name + "=";
    let cookies = document.cookie.split(';');

    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();

        if (cookie.indexOf(cookieName) === 0) {
            return decodeURIComponent(cookie.substring(cookieName.length));
        }
    }
    
    return null;
}

3.3 删除 Cookie

function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    }

    if (path) {
        document.cookie = name + "=; path=" + path;
    }

    if (domain) {
        document.cookie = name + "=; domain=" + domain;
    }
}

3.4 测试

// 设置名为"username"的Cookie,有效期为7天,路径为根路径
setCookie("username", "有勇气的牛排", 7, "/");

// 获取名为"username"的Cookie的值
let username = getCookie("username");
console.log(username); // 输出: "JohnDoe"

// 删除名为"username"的Cookie
deleteCookie("username");

前端把cookie添加到请求,前端,前端,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-697033.html

到了这里,关于前端 js 操作 Cookie 详细介绍与案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium保持用户登陆的方法(获取cookie和添加cookie)

    目录 获得cookie 实现登陆 首先在用户登陆界面手动获取用selenium点击等操作获得cookie,并保存至txt 在新链接添加cookie实现用户保持登陆

    2024年02月11日
    浏览(40)
  • JS如何设置cookie、读取cookie及删除cookie

    转自:微点阅读 https://www.weidianyuedu.com JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变

    2023年04月11日
    浏览(48)
  • postman添加cookie

    点击cookies 添加cooke,直接将所有cookie中的内容复制上去即可 这边就会出现cookie参数 当然可以直接在请求头中添加cookie,同样全部复制上去即可

    2024年02月11日
    浏览(52)
  • Python+Requests模块添加cookie

    对于某些网站,登录然后从浏览器中获取cookies,以后就可以直接拿着cookie登录了,无需输入用户 名密码。 一、在参数中添加cookie 在发送请求时使用cookies 代码示例: 查看执行结果:  二、在头部添加cookie 在发送请求时使用headers 代码示例: 查看执行结果 代码示例: 添加

    2024年02月10日
    浏览(61)
  • Postman使用之添加cookie信息

    Postman是常用的接口测试工具,如果我们后端接口要使用浏览器中存储的Cookie数据,该如何添加呢? 我后端接口采用的是Java,功能是完成用户密码的更改,代码如下: 其中,LoginUserUtil.releaseUserIdFromCookie(request)方法是从浏览器的cookie中读取用户的id,用Poatman测试接口的时候要如

    2024年02月16日
    浏览(44)
  • Selenium添加Cookie来实现自动登录

    最近在学习写python的自动化脚本,但是发现测试工具打开之后的网页是没有用户自己打开浏览器时记录的cookie,简单来说也就是打开的网站不会自己登录,所以想要简单的实现下如何用cookie来登录 总的来说分两步 第一步获取你登录的cookie,以csdn为例 然后在控制台你就可以得到一

    2024年02月11日
    浏览(53)
  • Jmeter添加cookie的两种方式

    jmeter中添加cookie可以通过配置 HTTP Cookie Manager ,也可以通过 HTTP Header Manager ,因为cookie是放在头文件里发送的。 实例:博客园点击添加新随笔 https://i.cnblogs.com/EditPosts.aspx?opt=1 如果未登录,跳转登录页; 如果已登录,会打开添加随笔页面。请求一样,区别只在于是否添加c

    2024年02月13日
    浏览(40)
  • js删除cookie

    要删除一个cookie,你可以使用JavaScript中的 document.cookie 属性。这个属性包含当前页面上所有的cookie。要删除一个cookie,你可以将其设置为已过期,如下所示: 在这个例子中, cookieName 是要删除的cookie的名称。通过将其设置为空字符串并将过期日期设置为过去的某个时间,co

    2024年01月16日
    浏览(44)
  • 前端Cookie基础知识

    一、简介 ​ Cookie (也称为 HTTP Cookie 、 Web Cookie 、浏览器 Cookie 等等)是服务器发送到用户浏览器并保存在本地的一小块数据,该数据通常是用户账号相关的信息,不同浏览器对 Cookie 的数量和大小限制不同,但一般来说,单域名下设置的 cookie 不能超过30个,单条 cookie 的大

    2024年02月12日
    浏览(44)
  • 前端登陆之cookie篇

    上一个文章介绍了实用node写了一个服务,以及调用api去操作数据库的一个前后端分离的demo,这次重点记录一下前后端登陆操作的一个部分。登陆认证是一个项目中比较重要的部分,接下来我将使用cookie的模式来实现登陆认证! cookie是浏览器中特有的一个概念,它就像浏览器

    2023年04月16日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包