如何通过JavaScript将Cookie的Secure和HttpOnly属性设为true？

核心问题点 #

• 重复设置Cookie导致覆盖：你三次调用document.cookie设置同一个Cookie，每次都会覆盖前一次的配置，最终只有最后一次的设置生效，但最后一次的HttpOnly是无效的。
• HttpOnly无法通过前端JS设置：HttpOnly是Cookie的安全属性，设计目的就是禁止前端JavaScript访问或设置该Cookie，只能由后端服务（比如Node.js、PHP、Java等）在响应头中设置。
• Secure属性仅在HTTPS环境生效：如果你的网站是HTTP协议，即使设置了secure属性，浏览器也会忽略这个配置，只有在HTTPS加密连接下，Secure才会被启用。

正确的前端+后端配置方案 #

1. 前端代码修正（仅处理非HttpOnly的Cookie属性） #

前端只能设置Secure（需HTTPS）、过期时间、路径等属性，合并成一次设置避免覆盖：

document.getElementById("acceptButton").addEventListener("click", function() {
    var now = new Date();
    now.setMonth(now.getMonth() + 3); 
    var ID = document.getElementById("acceptButton").getAttribute("data-ID");
    
    // 合并所有有效属性到一次Cookie设置中
    document.cookie = `cookie_${ID}=true; path=/; expires=${now.toUTCString()}; secure`;
    document.getElementById("cookieAlert").style.display = "none";
});

2. 后端设置HttpOnly属性示例 #

如果需要开启HttpOnly，必须在后端响应中设置Cookie。以下是几种常见后端语言的示例：

Node.js/Express

res.cookie(`cookie_${ID}`, 'true', {
    path: '/',
    expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000), // 3个月
    secure: true, // 仅HTTPS环境启用
    httpOnly: true
});

PHP

$expire = time() + 90 * 24 * 60 * 60; // 3个月
setcookie("cookie_$ID", "true", $expire, "/", "", true, true);
// 最后两个参数分别对应secure和httponly

Java(Spring Boot)

Cookie cookie = new Cookie("cookie_" + ID, "true");
cookie.setPath("/");
cookie.setMaxAge(90 * 24 * 60 * 60); // 3个月
cookie.setSecure(true);
cookie.setHttpOnly(true);
response.addCookie(cookie);

验证方法 #

• 打开浏览器开发者工具（F12），进入Application标签（Chrome）或Storage标签（Firefox），查看Cookie列表，确认Secure和HttpOnly属性是否生效。
• 注意：本地开发如果用localhost，部分浏览器会允许Secure生效，但如果是http://127.0.0.1则不会，建议用HTTPS环境测试。

内容的提问来源于stack exchange，提问作者Lucas Blankenship