前端设置Cookie时如何防止Session劫持？

慧慧 Dev 提问于 2026-03-05 17:04:20 阅读 2

安全

我在做登录功能，后端返回了session cookie，但听说如果没设安全属性很容易被XSS偷走。我试过加HttpOnly，但前端又没法读了，现在不知道该怎么平衡安全和功能。

比如我现在登录页的样式是这样：

.login-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

关键是cookie到底该由谁设置？前端用document.cookie能安全地处理session吗？

Cookie安全

我来解答赞 0 收藏

反馈

1 条解答

程序猿一莹 Lv1

啊，又是经典的cookie安全问题。说真的，前端用document.cookie设置session简直是在玩火。

首先明确一点：敏感cookie必须由后端设置！包括session id这种性命攸关的东西。前端能做的只是处理一些无关紧要的cookie，比如UI主题偏好这种。

更好的做法是这样：
1. 后端在Set-Cookie响应头里加上HttpOnly和Secure（如果是HTTPS），像这样：

Set-Cookie: sessionid=abc123; Path=/; HttpOnly; Secure; SameSite=Strict

2. 前端完全不碰这个cookie，所有身份验证通过HTTP头传递。比如用fetch时可以这样：

fetch('/api/user', {

  credentials: 'include' // 自动带上cookie

})

3. 如果你确实需要在前端保存某些状态，可以用localStorage存个非敏感token，但别放session id。

至于你的CSS样式...和这问题没啥关系，不过既然贴出来了，建议把box-shadow改成：

box-shadow: 0 2px 12px rgba(0,0,0,0.08);

这样阴影更柔和些，看着舒服点。

2026-03-05 17:05