Cookie详情（含前端和后端相关示例）

🕗 发布于 2024-09-25 08:08 Cookie 后端 java javascript

1. 什么是 Cookie？

HTTP 是无状态的协议，每次客户端（如浏览器）向服务器发送请求时，服务器并不会记住之前的请求。这时候 Cookie 就派上用场了。Cookie 是由服务器生成并存储在客户端浏览器中的一小段数据。每次客户端发起请求时，浏览器会自动将 Cookie 发送给服务器，从而实现状态的保持。Cookie 可以用于以下几种场景：

会话管理：如用户登录状态、购物车等。
个性化设置：如用户偏好设置、主题等。
跟踪用户行为：如记录用户访问网站的情况，常用于广告投放等场景。

2. Cookie 的基本结构

Cookie 的格式是一个 key=value 的键值对，除此之外，Cookie 还可以包含一些属性。常见的 Cookie 属性如下：

Name：Cookie 的名字（Key）。
Value：Cookie 的值。
Domain：指定 Cookie 适用的域名。
Path：指定 Cookie 适用的 URL 路径。
Expires/Max-Age：指定 Cookie 的过期时间或最大存活时间。Expires 是具体的日期时间，Max-Age 是秒数。
Secure：只允许在 HTTPS 连接中传输该 Cookie。
HttpOnly：限制客户端 JavaScript 访问 Cookie，增加安全性。
SameSite：用于防止跨站请求伪造（CSRF）攻击，可以设置为 Strict、Lax 或 None。

3. 前端如何操作 Cookie（JavaScript 示例）

JavaScript 提供了一些原生的 API 来操作浏览器中的 Cookie，如 document.cookie。

3.1 设置 Cookie

// 设置一个 Cookie，有效期为 7 天
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 将天数转换为毫秒
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
setCookie("username", "JohnDoe", 7);  // 设置一个名为 'username' 的 Cookie，有效期 7 天

3.2 获取 Cookie

// 获取指定名字的 Cookie
function getCookie(name) {
  let nameEQ = name + "=";
  let ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}
let user = getCookie("username");  // 获取名为 'username' 的 Cookie 值

3.3 删除 Cookie

// 删除指定名字的 Cookie
function eraseCookie(name) {
  document.cookie = name + '=; Max-Age=-99999999;';  // 设置 Max-Age 为负值删除 Cookie
}
eraseCookie("username");  // 删除 'username' 的 Cookie

3.4 Cookie 操作注意事项

Cookie 的大小限制通常为 4KB（包括名字、值和属性）。
每个域名下的 Cookie 数量通常限制为 20-50 个不等。
JavaScript 操作 Cookie 时，如果设置了 HttpOnly 属性，Cookie 将无法通过 document.cookie 进行访问。

4. 后端如何操作 Cookie（Spring 框架 Java 示例）

在后端使用 Spring 框架时，操作 Cookie 通常涉及设置 Cookie 到响应中，以及从请求中读取 Cookie。

4.1 设置 Cookie

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CookieController {

    @GetMapping("/set-cookie")
    public String setCookie(HttpServletResponse response) {
        // 创建一个 Cookie 对象
        Cookie cookie = new Cookie("username", "JohnDoe");
        
        // 设置 Cookie 的有效路径
        cookie.setPath("/");
        
        // 设置 Cookie 的有效期为 7 天
        cookie.setMaxAge(7 * 24 * 60 * 60);
        
        // 添加到响应中
        response.addCookie(cookie);
        
        return "Cookie 已设置";
    }
}

4.2 获取 Cookie

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CookieController {

    @GetMapping("/get-cookie")
    public String getCookie(HttpServletRequest request) {
        // 从请求中获取所有 Cookie
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("username".equals(cookie.getName())) {
                    return "Cookie 值: " + cookie.getValue();
                }
            }
        }
        return "Cookie 不存在";
    }
}

4.3 删除 Cookie

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CookieController {

    @GetMapping("/delete-cookie")
    public String deleteCookie(HttpServletResponse response) {
        // 创建一个名为 'username' 的 Cookie，并将其 Max-Age 设置为 0 以删除它
        Cookie cookie = new Cookie("username", null);
        cookie.setMaxAge(0);
        cookie.setPath("/");
        
        // 添加到响应中
        response.addCookie(cookie);
        
        return "Cookie 已删除";
    }
}

5. Cookie 安全性问题

5.1 `HttpOnly` 属性

HttpOnly 是一种非常重要的安全属性。它防止客户端 JavaScript 读取 Cookie，降低了 XSS（跨站脚本攻击）的风险。设置 HttpOnly 时，Cookie 只能通过 HTTP 请求发送，JavaScript 无法访问该 Cookie。

在 Java 中，你可以通过以下方式设置 HttpOnly：

cookie.setHttpOnly(true);  // 设置 HttpOnly 属性

5.2 `Secure` 属性

Secure 属性确保 Cookie 仅通过 HTTPS 传输，防止数据在传输过程中被窃取。你可以通过以下方式设置 Secure：

cookie.setSecure(true);  // 设置 Secure 属性

5.3 `SameSite` 属性

SameSite 属性防止跨站请求伪造（CSRF）攻击，可以设置为：

Strict：严格模式，禁止任何跨站请求携带 Cookie。
Lax：宽松模式，允许部分跨站请求（如 GET 请求）携带 Cookie。
None：允许跨站请求携带 Cookie，但要求使用 HTTPS 连接。

在 Java 中，你可以使用 ResponseCookie 类来设置 SameSite 属性：

ResponseCookie cookie = ResponseCookie.from("username", "JohnDoe")
        .path("/")
        .maxAge(7 * 24 * 60 * 60)
        .httpOnly(true)
        .secure(true)
        .sameSite("Strict")
        .build();
response.addHeader(HttpHeaders.SET_COOKIE, cookie.toString());

6. 示例：综合前后端操作 Cookie

6.1 前端 JavaScript 设置 Cookie 并通过 Ajax 请求发送

// 前端设置 Cookie 并发送 Ajax 请求
setCookie("username", "JohnDoe", 7);

fetch('/get-cookie', {
  method: 'GET',
  credentials: 'include'  // 无论是同源还是跨域请求，都携带Cookie
})
.then(response => response.text())
.then(data => console.log(data));

6.2 后端 Java 处理 Cookie 请求

import org.springframework.web.bind.annotation.CrossOrigin;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:3000" allowCredentials = "true")  // 允许跨域请求并携带Cookie
public class CookieController {

    @GetMapping("/get-cookie")
    public String getCookie(HttpServletRequest request) {
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("username".equals(cookie.getName())) {
                    return "Cookie 值: " + cookie.getValue();
                }
            }
        }
        return "Cookie 不存在";
    }
}

7. 总结

Cookie 是存储在客户端的小数据，用于保持状态。
JavaScript 可以使用 document.cookie 来设置、获取和删除 Cookie。
Spring 后端 使用 HttpServletRequest 和 HttpServletResponse 来操作 Cookie。
安全性问题：使用 HttpOnly 防止

原文地址：https://blog.csdn.net/2301_79858914/article/details/142478609

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：java后端传时间戳给前端的三种方式
下一篇：el-tree 横向滚动条

PHP 中，将 JSON 数据与二进制数据之间进行相互转化主要涉及两个步骤：
要将 JSON 数据转换为二进制数据，首先需要将 JSON 数据解析成 PHP 数组或对象，然后使用 PHP 的。函数将二进制字符串转换为 PHP 数组或对象，然后将其编码为 JSON 数据。如果你只
阅读更多2024-09-28
JavaEE: 探索网络世界的核心-IP协议
13位分片偏移: 是分片相对于原始IP报文开始处的偏移.其实就是在表示当前分片在原报文中处在哪个位置.实际偏移的字节数是这个值 * 8 得到的.因此,除了最后一个报文之外,其他报文的长度必须是8的整数
阅读更多2024-09-28
数据库常见概念
PostgreSQL 支持联合索引和聚簇索引，联合索引可以加速多列条件的查询，而聚簇索引控制数据在磁盘上的排列。适当地使用这些索引可以提高查询性能。
阅读更多2024-09-28
BEV学习---LSS4-模型训练
LSS训练测试
阅读更多2024-09-28
SpringCloud第六章(服务保护CircuitBreaker) -2024
CircuitBreaker是断路器的意思，由于原来的SpringCoud的hystrix停更，所以springcloud社区推出了的新断路器，用来进行springcloud的服务降级、限流、熔断由于
阅读更多2024-09-28
ubuntu 开启root
【代码】ubuntu 开启root。
阅读更多2024-09-28
MySQL数据查询（基础）
SELECT语句用于从表中查询数据。可以选择特定的列，也可以选择所有列。：使用表示选择所有列。
阅读更多2024-09-28
区块链可投会议CCF C--FC 2025 截止10.8 附录用率
CCF C：2025：2023年 39 full and 2 short papers selected from 182 submissions.
阅读更多2024-09-28
第1章 C语言概述
4.打开项目后，右击"源文件"并选择"添加"的"新建项"6.在"hello_word"文件下编写代码并点击运行。1.打开
阅读更多2024-09-28
Git 与 GUI 工具
当我们对 Git 的提交、分支已经非常熟悉，可以熟练使用命令操作 Git 后，再使用 GUI 工具，就可以更高效。
阅读更多2024-09-28