Vue项目中如何防止Cookie被劫持导致会话劫持？

Code°兴娜提问于 2026-02-17 23:49:24 阅读 6

安全

我在用Vue做登录功能时发现，用js-cookie保存token的Cookie没设置HttpOnly，这样会不会容易被XSS攻击导致Session劫持？


// 登录成功后设置Cookie的代码
methods: {
  login() {
    axios.post('/api/login', this.form)
      .then(resp => {
        Cookies.set('user_token', resp.data.token, { expires: 7 })
        this.$router.push('/')
      })
}

尝试过在服务端设置HttpOnly标志，但测试时发现前端无法用js读取Cookie了，这样SPA应用怎么获取token发请求呢？有没有更好的实现方式？

我来解答赞 2 收藏

反馈

1 条解答

a'ゞ秀丽 Lv1

你这个问题其实挺常见的，核心矛盾在于安全性和前端可用性之间的权衡。HttpOnly确实能有效防止XSS攻击读取Cookie，但它同时也让前端无法通过JavaScript访问Cookie，这对于SPA应用来说确实是个问题。

我的建议是这样：把token分成两部分处理，一部分存储在HttpOnly的Cookie中，用于后端验证用户身份；另一部分存储在内存或本地变量中，用于前端请求时附加到Header里。具体实现如下：

服务端在登录成功后，同时返回两个东西：
1. 一个HttpOnly的Cookie，比如叫session_id，用来标识用户会话
2. 一个普通的token，放在响应体里，前端可以读取并存储在内存中

// 后端伪代码示例

app.post('/api/login', (req, res) => {

  const sessionId = generateSecureToken()

  const userToken = generateUserToken()



  // 设置HttpOnly Cookie

  res.cookie('session_id', sessionId, { 

    httpOnly: true,

    secure: true,

    sameSite: 'strict'

  })



  // 返回普通token给前端

  res.json({ token: userToken })

})

前端这边改一下：

methods: {

  login() {

    axios.post('/api/login', this.form)

      .then(resp => {

        // 把token缓存在内存里

        this.$store.commit('setToken', resp.data.token)

        this.$router.push('/')

      })

  }

}

然后在发请求时，手动把token加到Header里：

// 请求拦截器

axios.interceptors.request.use(config => {

  const token = store.state.token

  if (token) {

    config.headers.Authorization = Bearer ${token}

  }

  return config

})

这种方式的好处是：
- HttpOnly的Cookie保证了会话安全性，即使有XSS漏洞也无法窃取
- 前端仍然可以通过内存中的token正常发请求
- 即使token被窃取，攻击者也无法直接利用，因为缺少HttpOnly的Cookie

最后提醒一下，记得开启HTTPS，不然这些防护措施都白搭。另外sameSite属性也要设置，能防很多CSRF攻击。

2026-02-18 00:00