前端如何安全地保存token

前端如何安全地保存token：利用HTTP-only cookies、保存在内存中、不将token暴露在URL中。其中，利用HTTP-only cookies是最安全的方法，因为它能够有效防止XSS攻击。HTTP-only cookies 是一种只能通过HTTP请求发送到服务器的cookie，无法通过JavaScript读取，因此大大减少了因跨站脚本攻击（XSS）而导致的token泄露风险。

一、利用HTTP-only cookies

HTTP-only cookies 是指设置了HttpOnly属性的cookies。这种cookies不能被JavaScript通过document.cookie访问，只能由服务器通过HTTP请求和响应来读取和写入。这种方式可以有效防止XSS攻击，因为即使攻击者在页面中插入了恶意的JavaScript代码，也无法读取到这些cookies。以下是具体的实现方法：

1、设置HTTP-only cookies

在后端服务器中设置HTTP-only cookies。以Node.js和Express为例：

const express = require('express');
const app = express();
app.post('/login', (req, res) => {
  const token = generateToken(req.body.username); // 生成token的逻辑
  res.cookie('token', token, { httpOnly: true, secure: true }); // 设置HTTP-only cookies
  res.send('Login successful');
});
function generateToken(username) {
  // 生成token的逻辑
  return 'some-token';
}
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

2、读取HTTP-only cookies

由于HTTP-only cookies无法被JavaScript读取，因此需要在每次HTTP请求中将cookies自动发送到服务器。浏览器会自动将这些cookies附加到每个请求的HTTP头部。

fetch('/some-protected-endpoint', {
  method: 'GET',
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

二、保存在内存中

保存在内存中 是指将token存储在JavaScript变量中，而不是持久化到本地存储或cookies中。这种方法的优点是token只存在于页面生命周期中，当用户刷新或关闭页面时，token会自动丢失，从而减少了被恶意获取的风险。

1、存储token

在用户登录成功后，将token保存在内存中：

let token;
function login(username, password) {
  fetch('/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    token = data.token;
  })
  .catch(error => console.error('Error:', error));
}

2、使用token

在后续的请求中使用内存中的token：

function fetchProtectedData() {
  fetch('/some-protected-endpoint', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`
    }
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}

三、不将token暴露在URL中

不将token暴露在URL中 是指在进行HTTP请求时，不要将token作为查询参数或路径参数放在URL中。因为URL可能会被浏览器历史记录、日志、代理服务器等记录下来，存在泄露风险。正确的做法是将token放在HTTP请求头部的Authorization字段中。

1、正确的请求方式

在请求头部中添加token：

fetch('/some-protected-endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2、避免错误的请求方式

不要将token放在URL中：

// 不推荐的做法
fetch(`/some-protected-endpoint?token=${token}`, {
  method: 'GET'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

四、总结

前端安全地保存token的方法有多种，其中最安全的方法是利用HTTP-only cookies，因为它能够有效防止XSS攻击。同时，可以将token保存在内存中，减少持久化存储带来的风险，并且在HTTP请求中避免将token暴露在URL中。综合运用这些方法，可以大大提高前端应用的安全性。

1、结合多种方法

在实际应用中，可以结合多种方法来提高安全性。例如，利用HTTP-only cookies来存储token，同时在内存中缓存token，在每次请求时优先使用内存中的token，只有在内存中的token失效时才从HTTP-only cookies中读取。

2、定期更新token

为了进一步提高安全性，可以定期更新token。例如，每隔一段时间（如1小时）重新生成一个新的token，并将旧的token作废。这样即使旧的token被泄露，也只能在短时间内被利用。

3、使用项目团队管理系统

在开发和管理前端应用时，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这些系统可以帮助团队更高效地管理项目，提高开发效率，同时也可以更好地保障项目的安全性。

研发项目管理系统PingCode 提供了丰富的项目管理功能，包括任务分配、进度跟踪、代码审核等，可以帮助开发团队更好地协作和管理项目。通用项目协作软件Worktile 则提供了更加灵活的协作功能，包括团队聊天、文件共享、任务管理等，可以帮助团队更好地沟通和协作。