cookie的一些疑问

motuoka in Shanghai

2024-05-18

🖐🏻 免责声明

本教程仅供学习交流使用，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，请各读者自觉遵守相关法律法规。

# 后台设置cookie

# 后台代码

# 渲染静态HTML页面
@app.route('/')
def serve_static_html():
    response = make_response(render_template('index.html'))
    response.set_cookie('a', '123')
    # 设置一个名为 'c'，值为 '666' 的HTTP-only Cookie
    response.set_cookie('c', '666', httponly=True)
    response.set_cookie('d', 'hello')
    response.set_cookie('e','world',httponly=True)
    return response

这里给了a,c,d,e四个cookie，其中c和e为httponly的

# 前端表现

# 网络标签

1716172253119

网络请求响应标头里有Set-Cookie

# 应用标签

1716172332607

这里可以看到后台给的所有cookie

# 控制台打印

1716172488175

这里可以看到httponly的c和e，是无法被document.cookie访问到的（我们这里可以推测下，c和e是否也不能被前端修改及删除）

# 前端增删改cookie

删的逻辑就是让cookie过期

# 前端代码

// 添加一个新的Cookie或者修改已存在的Cookie的值
    function setCookie(name, value, daysToExpire) {
      var expires = "";
      if (daysToExpire) {
        var date = new Date();
        date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }
    // 删除一个Cookie,通过让其过期达到删除的目的
    function deleteCookie(name) {
      document.cookie =
        name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }

    document.getElementById("btn").onclick = function () {
      setCookie("b", "456", 7);
      setCookie("a", "789", 7);
      setCookie("c", "777", 7);
      deleteCookie("d");
      deleteCookie("e");
    };

这里

新增b
修改a，c
删除d，e

# 前端表现

# 应用标签

1716172647581

可以看到b被新增成功，a被修改成功，d被删除成功，c和e（httponly）无法被修改及删除

# 控制台打印

1716172745524

b被新增，a被修改，d被删除，其余httponly的看不到

# 前端发起请求-观察cookie自动携带情况

# 前端代码

document.getElementById("btn2").onclick = function () {
      fetch("/verify_cookie", {
        headers: {
            cookie:'a=aaa; b=bbb; c=ccc; d=ddd; e=eee; f=fff'
        },
      }).then((res) => console.log(res));
    };

# 验证结果

header里指定cookie毫无意义
观察网络的请求头

不管前台新增的cookie，还是后台给的cookie（不区分httponly），只要没被删除掉，都会在请求中自动被携带

# 后台接口删除cookie（删除逻辑依然是让cookie时间过期，cookie归根到底归客户端浏览器管理，浏览器会自动清除过期cookie）

# 验证cookie
@app.route('/verify_cookie', methods=['GET'])
def verify_cookie():
    # 检查请求中是否存在该Cookie
    cookie_value = request.cookies.get('b')
    if cookie_value:
        # 创建一个响应对象
        response = make_response("Cookie removed.")
        
        # 设置Cookie的过期时间为过去的时间
        expire_date = datetime.utcnow() - timedelta(days=1)
        response.set_cookie('b', "", expires=expire_date)
        
        return response
    cookie_value = request.cookies
    print(cookie_value)
    return cookie_value

# 观看前端接口响应头

1716173202832

# 控制台结果

1716173233338

b已经没了

# 应用标签结果

1716173268806

b也没了

# ☕ 请我喝咖啡

如果本文章对您有所帮助，不妨请作者我喝杯咖啡：）

# ☀️ 广告时间

现承接以下业务，欢迎大家支持：）

Web 2.0 & Web 3.0应用定制

Web 3.0专项脚本定制与优化

数据爬虫需求快速响应

网站/公众号/小程序一站式开发

毕业设计与科研项目支持

企业管理软件定制：ERP, MES, CRM, 进销存系统等

联系方式：

X：@motuoka

V：ck742931485