前端如何安全地保存token

创作时间:

作者:

@小白创作中心

前端如何安全地保存token

引用

来源

https://docs.pingcode.com/baike/2233054

前端如何安全地保存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));