浏览器前端如何安全储存 Token

2023-11-24 13:52:01

网络安全中的身份验证和授权：Token 机制的兴起

在当今数字时代，网络安全至关重要。无论是个人还是企业，都面临着各种各样的网络威胁。身份验证 和授权是确保网络安全的基础，它们确定了谁能够访问什么。近年来，Token 机制 已成为一种流行的身份验证和授权解决方案，它可以有效地替代传统的基于会话的身份验证机制，例如 Cookie + Session 的方式。

什么是 Token？

Token 是一种用于身份验证和授权的令牌机制，在网络通信中广泛使用。它通常是一个字符串，包含所有验证所需的信息，例如用户 ID、用户名、角色、权限等。Token 可以通过多种方式生成和传递，最常见的是通过 HTTP 头部或 URL 参数。

与传统的基于会话的身份验证机制相比，Token 具有以下优势：

无状态 ：服务器无需在内存中保存用户的会话信息，从而降低了服务器的负担。
可扩展 ：Token 本身包含所有验证所需的信息，因此可以跨服务器共享，提高了可扩展性。
灵活：Token 可以通过多种方式生成和传递，更加灵活。

前端 Token 存储的最佳实践

在前端，可以使用浏览器提供的 Web Storage（如 LocalStorage 或 SessionStorage）或者使用 HTTP Cookie 来存储 Token。

Web Storage ：Web Storage 是 HTML5 提供的一种本地存储机制，包括 LocalStorage 和 SessionStorage。LocalStorage 是持久的，即使关闭浏览器也不会丢失数据，而 SessionStorage 是临时的，关闭浏览器后数据就会丢失。Web Storage 的优点是操作简单，不需要服务器端的支持。
HTTP Cookie ：HTTP Cookie 是一种由服务器发送到浏览器的文件，存储在浏览器端。Cookie 的优点是与服务器端交互更加方便，可以存储更多的数据。

Token 安全存储的注意事项

无论选择哪种方式存储 Token，都需要注意以下几点：

加密 Token ：在存储 Token 之前，一定要对 Token 进行加密，以防止未经授权的访问。
设置 Token 的过期时间 ：Token 应该有一个过期时间，超过过期时间后 Token 将失效。这可以防止 Token 被长时间使用，降低安全风险。
不要在 URL 中传递 Token ：URL 中的 Token 容易被泄露，因此不要在 URL 中传递 Token。
使用 HTTPS ：在传输 Token 时，一定要使用 HTTPS 协议，以确保数据传输的安全性。

代码示例

以下是一个使用 JavaScript 存储和使用 Token 的示例：

// 使用 LocalStorage 存储 Token
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');

// 使用 HTTP Cookie 存储 Token
document.cookie = 'token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

// 使用 Token 访问受保护资源
const token = localStorage.getItem('token') || document.cookie.split('=')[1];

fetch('https://example.com/api/protected-resource', {
  headers: {
    Authorization: `Bearer ${token}`
  }
}).then(res => res.json()).then(data => {
  console.log(data);
});