LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

freeflydom
2023年12月25日 15:51 本文热度 480

1 前言

1.1 详细介绍

名称和值:Cookie由一个名称和对应的值组成。名称是一个字符串,用于标识Cookie,而值则是与名称相关联的数据。

域名:每个Cookie都与特定的域名相关联。Cookie只会被发送到与其关联的域名下的请求中。

路径:Cookie可以与特定的路径相关联。当浏览器向指定路径下的服务器发送请求时,与该路径相关联的Cookie将被附加到请求中。

过期时间:Cookie可以设置一个过期时间,以指定Cookie的有效期限。一旦超过该时间,浏览器将不再发送该Cookie。

安全标志:通过设置安全标志,可以将Cookie限制为仅在通过HTTPS(安全的加密协议)进行通信时发送。

HTTP Only标志:设置HTTP Only标志后,Cookie将无法通过客户端的脚本访问,这有助于防止跨站点脚本攻击(XSS)。


1.2 Cookie的工作流程

服务器发送一个包含Cookie的HTTP响应头给浏览器,响应头中包含了名称、值和其他相关信息。

浏览器接收到响应后,会将Cookie存储在本地的Cookie存储中。

当浏览器向同一域名下的服务器发送后续请求时,会自动附加存储在本地的Cookie信息到请求的HTTP头中。

服务器接收到请求后,可以读取Cookie中的值并根据需要做出相应的处理。

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


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


2 如何减小Cookie使用风险

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


最小化Cookie的数据量:只存储必要的信息在Cookie中,避免存储敏感或不必要的数据。仅将标识用户会话或授权令牌等必要的信息存储在Cookie中。

使用安全标志:对于需要在安全通信(通过HTTPS)中传输的Cookie,设置"Secure"标志,这样可以确保Cookie只在加密的连接中传输。这有助于防止通过网络拦截或窃听攻击获取Cookie的值。

设置HttpOnly标志:对于存储敏感信息的Cookie,设置"HttpOnly"标志,防止客户端脚本访问Cookie。这可以减少跨站点脚本攻击(XSS)的风险,因为攻击者无法通过脚本访问或窃取Cookie的值。

使用适当的过期时间:设置适当的过期时间来限制Cookie的有效期。确保Cookie的生命周期仅限于需要的时间范围,避免过长时间的持久性Cookie,以减少风险。

采用同源策略:浏览器遵循同源策略,限制Cookie只在与其关联的域名下发送。这可以防止恶意网站访问其他域名下的Cookie信息。

使用SameSite属性:通过将Cookie的SameSite属性设置为Strict或Lax,可以限制Cookie只在同一站点发起的请求中发送,从而减少跨站点请求伪造(CSRF)攻击的风险。

适当处理敏感信息:对于包含敏感信息的Cookie,需要采取额外的保护措施,例如加密或哈希处理敏感数据,以及在存储和传输过程中使用适当的加密措施。

定期审查和清理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");

————————————————

版权声明:本文为CSDN博主「有勇气的牛排」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/zx77588023/article/details/131387450



该文章在 2023/12/25 15:55:40 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved