596 lines
19 KiB
Markdown
596 lines
19 KiB
Markdown
# 🔐 Luồng Hoạt Động - Hệ Thống Lưu Mật Khẩu AES-256
|
|
|
|
**Version:** 2.0 (AES-256 Encryption)
|
|
**File:** `src/utils/rememberMe.ts`
|
|
**Loại Bảo Mật:** AES-256 (Advanced Encryption Standard)
|
|
|
|
---
|
|
|
|
## 📋 Mục Lục
|
|
|
|
1. [Tổng Quan](#tổng-quan)
|
|
2. [Kiến Thức Nền Tảng](#kiến-thức-nền-tảng)
|
|
3. [Luồng Lưu Thông Tin](#luồng-lưu-thông-tin)
|
|
4. [Luồng Tải Thông Tin](#luồng-tải-thông-tin)
|
|
5. [Chi Tiết Mã Hóa AES-256](#chi-tiết-mã-hóa-aes-256)
|
|
6. [Ví Dụ Cụ Thể](#ví-dụ-cụ-thể)
|
|
7. [Xử Lý Lỗi](#xử-lý-lỗi)
|
|
8. [So Sánh Bảo Mật](#so-sánh-bảo-mật)
|
|
|
|
---
|
|
|
|
## 🎯 Tổng Quan
|
|
|
|
Hệ thống lưu mật khẩu "Remember Me" sử dụng **AES-256 encryption** để bảo vệ thông tin đăng nhập người dùng khi lưu vào `localStorage`.
|
|
|
|
### Các Bước Chính:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────┐
|
|
│ 1. Nhập Email + Password từ form đăng nhập │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ 2. Tạo Object: { email, password } │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ 3. Chuyển thành JSON string │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ 4. Mã hóa AES-256 (với SECRET_KEY) │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ 5. Lưu ciphertext vào localStorage │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ 6. Khi cần: Giải mã và lấy lại thông tin │
|
|
└─────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🏫 Kiến Thức Nền Tảng
|
|
|
|
### AES-256 là gì?
|
|
|
|
**AES** = Advanced Encryption Standard (chuẩn mã hóa quốc tế)
|
|
**256** = Khóa bí mật dài 256 bit (32 bytes)
|
|
|
|
### Tại sao dùng AES-256?
|
|
|
|
| Tiêu Chí | Chi Tiết |
|
|
| --- | --- |
|
|
| **Độ An Toàn** | ✅ Hầu như không thể bẻ khóa (2^256 khả năng) |
|
|
| **Tốc Độ** | ✅ Nhanh (xử lý được tỷ tấn dữ liệu/giây) |
|
|
| **Tiêu Chuẩn** | ✅ Được chính phủ Mỹ & thế giới sử dụng |
|
|
| **IV (Initialization Vector)** | ✅ Tự động tạo ngẫu nhiên mỗi lần |
|
|
| **Pattern Hiding** | ✅ Cùng plaintext → khác ciphertext |
|
|
|
|
### IV (Initialization Vector) là gì?
|
|
|
|
- **Định nghĩa:** Một chuỗi bit ngẫu nhiên 128-bit (16 bytes)
|
|
- **Chức năng:** Đảm bảo cùng plaintext lại được mã hóa khác
|
|
- **Ví dụ:**
|
|
|
|
```
|
|
Plaintext: "password"
|
|
|
|
Lần 1: IV = random_1 → Ciphertext = "aB3dE7..."
|
|
Lần 2: IV = random_2 → Ciphertext = "xY9pQ2..." (khác!)
|
|
Lần 3: IV = random_3 → Ciphertext = "kL5mR8..." (khác!)
|
|
|
|
Cả 3 lần đếu giải mã lại thành "password"
|
|
```
|
|
|
|
---
|
|
|
|
## 💾 Luồng Lưu Thông Tin
|
|
|
|
### Hàm: `saveCredentials(email, password)`
|
|
|
|
```
|
|
Đầu Vào:
|
|
email = "user@gmail.com"
|
|
password = "MyPassword123"
|
|
↓
|
|
┌────────────────────────────────┐
|
|
│ Bước 1: Tạo Object Credentials │
|
|
└────────────────────────────────┘
|
|
credentials = {
|
|
email: "user@gmail.com",
|
|
password: "MyPassword123"
|
|
}
|
|
↓
|
|
┌─────────────────────────────────┐
|
|
│ Bước 2: Chuyển Object → JSON │
|
|
└─────────────────────────────────┘
|
|
json = '{"email":"user@gmail.com","password":"MyPassword123"}'
|
|
↓
|
|
↓
|
|
┌───────────────────────────────────────────┐
|
|
│ Bước 3: Mã Hóa (AES-256) │
|
|
│ │
|
|
│ Hàm: encrypt(json) │
|
|
│ CryptoJS.AES.encrypt(json, SECRET_KEY) │
|
|
└───────────────────────────────────────────┘
|
|
↓
|
|
↓
|
|
encrypted = "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
(output = Salt + IV + Ciphertext, tất cả dạng Base64)
|
|
↓
|
|
┌─────────────────────────────────────────┐
|
|
│ Bước 4: Lưu vào localStorage │
|
|
│ localStorage.setItem(REMEMBER_ME_KEY, │
|
|
│ encrypted) │
|
|
└─────────────────────────────────────────┘
|
|
↓
|
|
localStorage['smatec_remember_login'] = "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
|
|
Đầu Ra: ✅ Mật khẩu được mã hóa & lưu an toàn
|
|
```
|
|
|
|
### Code Chi Tiết:
|
|
|
|
```typescript
|
|
export function saveCredentials(email: string, password: string): void {
|
|
try {
|
|
// Bước 1: Tạo object
|
|
const credentials: RememberedCredentials = { email, password };
|
|
|
|
// Bước 2: JSON stringify
|
|
const json = JSON.stringify(credentials);
|
|
// Kết quả: '{"email":"user@gmail.com","password":"MyPassword123"}'
|
|
|
|
// Bước 3: Mã hóa AES-256
|
|
const encrypted = encrypt(json);
|
|
// Kết quả: "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
|
|
// Bước 4: Lưu vào localStorage
|
|
localStorage.setItem(REMEMBER_ME_KEY, encrypted);
|
|
// Lưu thành công ✅
|
|
} catch (error) {
|
|
console.error('Error saving credentials:', error);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📂 Luồng Tải Thông Tin
|
|
|
|
### Hàm: `loadCredentials()`
|
|
|
|
```
|
|
Đầu Vào: (Không có tham số - tự động từ localStorage)
|
|
↓
|
|
┌────────────────────────────────────────┐
|
|
│ Bước 1: Lấy Dữ Liệu Từ localStorage │
|
|
└────────────────────────────────────────┘
|
|
encrypted = localStorage.getItem(REMEMBER_ME_KEY)
|
|
// Kết quả: "U2FsdGVkX1+ZzO2jNxNKbvH..." hoặc null
|
|
↓
|
|
┌────────────────────────────────┐
|
|
│ Bước 2: Kiểm Tra Null │
|
|
└────────────────────────────────┘
|
|
if (!encrypted) {
|
|
return null ❌ (Không có dữ liệu lưu)
|
|
}
|
|
↓
|
|
┌───────────────────────────────────────────┐
|
|
│ Bước 3: Giải Mã (AES-256) │
|
|
│ │
|
|
│ Hàm: decrypt(encrypted) │
|
|
│ CryptoJS.AES.decrypt(encrypted, │
|
|
│ SECRET_KEY) │
|
|
└───────────────────────────────────────────┘
|
|
↓
|
|
↓
|
|
decrypted_text = '{"email":"user@gmail.com","password":"MyPassword123"}'
|
|
↓
|
|
┌──────────────────────────────────┐
|
|
│ Bước 4: Kiểm Tra Decode Hợp Lệ │
|
|
└──────────────────────────────────┘
|
|
if (!decrypted_text) {
|
|
clearCredentials() // Xóa dữ liệu lỗi
|
|
return null ❌
|
|
}
|
|
↓
|
|
┌──────────────────────────────┐
|
|
│ Bước 5: Parse JSON │
|
|
└──────────────────────────────┘
|
|
credentials = JSON.parse(decrypted_text)
|
|
// Kết quả:
|
|
// {
|
|
// email: "user@gmail.com",
|
|
// password: "MyPassword123"
|
|
// }
|
|
↓
|
|
return credentials ✅
|
|
|
|
Đầu Ra: RememberedCredentials object hoặc null
|
|
```
|
|
|
|
### Code Chi Tiết:
|
|
|
|
```typescript
|
|
export function loadCredentials(): RememberedCredentials | null {
|
|
try {
|
|
// Bước 1: Lấy từ localStorage
|
|
const encrypted = localStorage.getItem(REMEMBER_ME_KEY);
|
|
|
|
// Bước 2: Kiểm tra null
|
|
if (!encrypted) {
|
|
return null;
|
|
}
|
|
|
|
// Bước 3: Giải mã AES-256
|
|
const decrypted = decrypt(encrypted);
|
|
// Kết quả: '{"email":"user@gmail.com","password":"MyPassword123"}'
|
|
|
|
// Bước 4: Kiểm tra giải mã hợp lệ
|
|
if (!decrypted) {
|
|
clearCredentials();
|
|
return null;
|
|
}
|
|
|
|
// Bước 5: Parse JSON
|
|
const credentials: RememberedCredentials = JSON.parse(decrypted);
|
|
|
|
// Trả về object credentials ✅
|
|
return credentials;
|
|
} catch (error) {
|
|
console.error('Error loading credentials:', error);
|
|
clearCredentials();
|
|
return null;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔐 Chi Tiết Mã Hóa AES-256
|
|
|
|
### Hàm Encrypt
|
|
|
|
```typescript
|
|
function encrypt(data: string): string {
|
|
try {
|
|
// CryptoJS.AES.encrypt() tự động:
|
|
// 1. Tạo salt ngẫu nhiên (8 bytes)
|
|
// 2. Từ salt + SECRET_KEY → tạo key & IV (PBKDF2)
|
|
// 3. Mã hóa data bằng AES-256-CBC
|
|
// 4. Trả về: Salt + IV + Ciphertext (tất cả Base64)
|
|
|
|
const encrypted = CryptoJS.AES.encrypt(data, SECRET_KEY).toString();
|
|
return encrypted;
|
|
} catch (error) {
|
|
console.error('Encryption error:', error);
|
|
return '';
|
|
}
|
|
}
|
|
```
|
|
|
|
**Cấu Trúc Output:**
|
|
|
|
```
|
|
Ciphertext cuối cùng = "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
↓
|
|
Được chia thành 3 phần:
|
|
│ Part 1 │ Part 2 │ Part 3 │
|
|
│ Magic String │ Salt (8) │ IV + Ciphertext │
|
|
│ "Salted__" │ random │ │
|
|
└──────────────┴───────────┴─────────────────┘
|
|
↓
|
|
Tất cả encode Base64
|
|
```
|
|
|
|
### Hàm Decrypt
|
|
|
|
```typescript
|
|
function decrypt(encrypted: string): string {
|
|
try {
|
|
// CryptoJS.AES.decrypt() tự động:
|
|
// 1. Decode Base64 ciphertext
|
|
// 2. Trích xuất Salt từ đầu
|
|
// 3. Từ salt + SECRET_KEY → tạo key & IV (PBKDF2)
|
|
// 4. Giải mã dữ liệu bằng AES-256-CBC
|
|
// 5. Trả về plaintext
|
|
|
|
const decrypted = CryptoJS.AES.decrypt(encrypted, SECRET_KEY);
|
|
|
|
// Chuyển từ WordArray sang UTF8 string
|
|
const result = decrypted.toString(CryptoJS.enc.Utf8);
|
|
return result;
|
|
} catch (error) {
|
|
console.error('Decryption error:', error);
|
|
return '';
|
|
}
|
|
}
|
|
```
|
|
|
|
### Biểu Đồ Quy Trình AES-256
|
|
|
|
```
|
|
ENCRYPTION SIDE (Lưu Mật Khẩu)
|
|
═══════════════════════════════════════════════════════
|
|
|
|
Plaintext: "password"
|
|
│
|
|
├─→ [PBKDF2 + Salt] ──→ Key (256-bit) + IV (128-bit)
|
|
│ │
|
|
│ ↓
|
|
└──────────────────→ [AES-256-CBC Engine]
|
|
│
|
|
↓
|
|
Ciphertext
|
|
│
|
|
↓
|
|
[Base64 Encode]
|
|
│
|
|
↓
|
|
"U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
|
|
|
|
DECRYPTION SIDE (Tải Mật Khẩu)
|
|
═══════════════════════════════════════════════════════
|
|
|
|
Ciphertext: "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
│
|
|
├─→ [Base64 Decode]
|
|
│
|
|
├─→ Extract Salt (8 bytes)
|
|
│ │
|
|
│ └──→ [PBKDF2] ──→ Key (256-bit) + IV (128-bit)
|
|
│
|
|
├─→ Extract Ciphertext
|
|
│ │
|
|
│ └──→ [AES-256-CBC Engine]
|
|
│ │
|
|
│ ↓
|
|
└──────────→ Plaintext: "password"
|
|
```
|
|
|
|
---
|
|
|
|
## 💡 Ví Dụ Cụ Thể
|
|
|
|
### Ví Dụ 1: Lưu Email & Mật Khẩu
|
|
|
|
**Input:**
|
|
|
|
```javascript
|
|
saveCredentials('john@example.com', 'SecurePass2024!');
|
|
```
|
|
|
|
**Bước Bước:**
|
|
|
|
| Bước | Dữ Liệu | Mô Tả |
|
|
| --- | --- | --- |
|
|
| 1 | `{ email: "john@example.com", password: "SecurePass2024!" }` | Object credentials |
|
|
| 2 | `'{"email":"john@example.com","password":"SecurePass2024!"}'` | JSON stringify |
|
|
| 3 | `U2FsdGVkX1...abc123...` | AES-256 encrypt + Base64 |
|
|
| 4 | localStorage | Lưu thành công ✅ |
|
|
|
|
**Trong localStorage:**
|
|
|
|
```javascript
|
|
localStorage = {
|
|
smatec_remember_login: 'U2FsdGVkX1+ZzO2jNxNKbvHJmVaFptBWc0p...',
|
|
};
|
|
```
|
|
|
|
### Ví Dụ 2: Tải Email & Mật Khẩu
|
|
|
|
**Input:**
|
|
|
|
```javascript
|
|
loadCredentials();
|
|
```
|
|
|
|
**Bước Bước:**
|
|
|
|
| Bước | Dữ Liệu | Mô Tả |
|
|
| --- | --- | --- |
|
|
| 1 | `"U2FsdGVkX1+ZzO2jNxNKbvHJmVaFptBWc0p..."` | Lấy từ localStorage |
|
|
| 2 | ✅ Tồn tại | Kiểm tra có dữ liệu |
|
|
| 3 | `'{"email":"john@example.com","password":"SecurePass2024!"}'` | AES-256 decrypt |
|
|
| 4 | ✅ Valid JSON | Kiểm tra hợp lệ |
|
|
| 5 | `{ email: "john@example.com", password: "SecurePass2024!" }` | JSON parse |
|
|
| 6 | Trả về object | ✅ |
|
|
|
|
**Output:**
|
|
|
|
```javascript
|
|
{
|
|
email: "john@example.com",
|
|
password: "SecurePass2024!"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## ⚠️ Xử Lý Lỗi
|
|
|
|
### Trường Hợp 1: Không Có Dữ Liệu Lưu
|
|
|
|
```
|
|
loadCredentials()
|
|
↓
|
|
Kiểm tra localStorage
|
|
↓
|
|
encrypted === null
|
|
↓
|
|
return null ← Không có gì để tải
|
|
```
|
|
|
|
### Trường Hợp 2: Dữ Liệu Bị Hỏng
|
|
|
|
```
|
|
loadCredentials()
|
|
↓
|
|
Lấy được dữ liệu
|
|
↓
|
|
Giải mã thất bại (decrypt() trả về '')
|
|
↓
|
|
clearCredentials() ← Xóa dữ liệu lỗi
|
|
↓
|
|
return null ← Không thể tải
|
|
```
|
|
|
|
### Trường Hợp 3: JSON Parse Lỗi
|
|
|
|
```
|
|
loadCredentials()
|
|
↓
|
|
Giải mã thành công
|
|
↓
|
|
JSON.parse() thất bại (dữ liệu không phải JSON)
|
|
↓
|
|
catch block → clearCredentials()
|
|
↓
|
|
return null ← Lỗi JSON
|
|
```
|
|
|
|
### Trường Hợp 4: LocalStorage Không Khả Dụng
|
|
|
|
```
|
|
Các hàm try-catch sẽ bắt lỗi
|
|
↓
|
|
Trả về false / null / log error
|
|
↓
|
|
Ứng dụng vẫn hoạt động bình thường (graceful degradation)
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 So Sánh Bảo Mật
|
|
|
|
### XOR Cipher (Cũ) vs AES-256 (Mới)
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════════════╗
|
|
║ XOR CIPHER (CŨ) │ AES-256 (MỚI) ║
|
|
╠════════════════════════════════════════════════════════════════╣
|
|
║ Mã Hóa Kiểu │ XOR từng ký tự │ Mã hóa khối ║
|
|
║ Độ An Toàn │ ⚠️ Rất Thấp │ ✅ Cực Cao ║
|
|
║ Key Length │ Xoay vòng bằng khóa │ 256-bit (32 bytes) ║
|
|
║ IV │ ❌ Không có │ ✅ Ngẫu nhiên ║
|
|
║ Brute Force │ ⚠️ Dễ (2^key_length) │ ✅ Không Thể ║
|
|
║ Pattern │ ⚠️ Có pattern │ ✅ Ẩn pattern ║
|
|
║ │ (cùng text → lại) │ (random IV) ║
|
|
║ Block Mode │ N/A │ ✅ CBC Mode ║
|
|
║ Salt │ ❌ Không │ ✅ Có PBKDF2 ║
|
|
║ Performance │ ✅ Cực Nhanh │ ✅ Nhanh (HW opt) ║
|
|
║ Standard │ ❌ Custom/Weak │ ✅ NIST/Military ║
|
|
╚════════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
### Ví Dụ Tấn Công:
|
|
|
|
**XOR Cipher:**
|
|
|
|
```
|
|
Nếu biết:
|
|
- Ciphertext = "abc123"
|
|
- Plaintext đối với ciphertext khác = "password"
|
|
|
|
Có thể dễ dàng suy ra SECRET_KEY bằng XOR:
|
|
plaintext XOR ciphertext = key
|
|
```
|
|
|
|
**AES-256:**
|
|
|
|
```
|
|
Ngay cả biết:
|
|
- Ciphertext = "U2FsdGVkX1+ZzO2jNxNKbvH..."
|
|
- Plaintext = "password"
|
|
- IV được sử dụng
|
|
|
|
Vẫn không thể suy ra SECRET_KEY (cần brute force 2^256 khả năng)
|
|
≈ 10^77 năm với máy tính hiện đại
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Các Hàm Hỗ Trợ
|
|
|
|
### 1. `clearCredentials()`
|
|
|
|
```typescript
|
|
export function clearCredentials(): void {
|
|
localStorage.removeItem(REMEMBER_ME_KEY);
|
|
// Xóa hoàn toàn dữ liệu khỏi localStorage
|
|
// Dùng khi: Người dùng logout hoặc "Forget Me"
|
|
}
|
|
```
|
|
|
|
### 2. `hasSavedCredentials()`
|
|
|
|
```typescript
|
|
export function hasSavedCredentials(): boolean {
|
|
try {
|
|
const encrypted = localStorage.getItem(REMEMBER_ME_KEY);
|
|
return encrypted !== null;
|
|
// Kiểm tra xem có dữ liệu lưu hay không
|
|
// Dùng khi: Hiển thị checkbox "Remember Me"
|
|
} catch (error) {
|
|
return false;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Luồng Sử Dụng Trong Ứng Dụng
|
|
|
|
### Sơ Đồ Hoàn Chỉnh:
|
|
|
|
```
|
|
LOGIN PAGE
|
|
│
|
|
├─→ User nhập email + password
|
|
│
|
|
├─→ Tick checkbox "Remember Me"?
|
|
│ │
|
|
│ ├─→ YES: saveCredentials(email, pwd)
|
|
│ │ └─→ Mã hóa + Lưu localStorage ✅
|
|
│ │
|
|
│ └─→ NO: Không lưu gì
|
|
│
|
|
├─→ Gửi login request lên server
|
|
│
|
|
└─→ Server xác thực OK ✅
|
|
│
|
|
└─→ Redirect tới Dashboard
|
|
|
|
|
|
SUBSEQUENT LOGIN (Lần Đăng Nhập Tiếp Theo)
|
|
│
|
|
├─→ Check: hasSavedCredentials()?
|
|
│ │
|
|
│ ├─→ YES: loadCredentials()
|
|
│ │ └─→ Giải mã + Parse ✅
|
|
│ │ └─→ Auto-fill form
|
|
│ │
|
|
│ └─→ NO: Form trống (User nhập thủ công)
|
|
│
|
|
└─→ User xác nhận + submit
|
|
│
|
|
└─→ Login
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Tóm Tắt
|
|
|
|
| Chức Năng | Hàm | Mô Tả |
|
|
| --- | --- | --- |
|
|
| Lưu | `saveCredentials(email, pwd)` | Mã hóa AES-256 + lưu localStorage |
|
|
| Tải | `loadCredentials()` | Lấy từ localStorage + giải mã |
|
|
| Xóa | `clearCredentials()` | Xóa hoàn toàn từ localStorage |
|
|
| Kiểm Tra | `hasSavedCredentials()` | Kiểm tra có dữ liệu hay không |
|
|
|
|
## 🛡️ Kết Luận
|
|
|
|
✅ **AES-256** được sử dụng để mã hóa thông tin sensitive
|
|
✅ **Random IV** đảm bảo mã hóa khác lần nữa
|
|
✅ **PBKDF2** làm việc với SECRET_KEY để tạo key mạnh
|
|
✅ **Try-Catch** xử lý tất cả lỗi gracefully
|
|
✅ **localStorage** là vị trí lưu phù hợp (with encrypted data)
|
|
|
|
**Bảo mật hiện tại:** ⭐⭐⭐⭐⭐ (Military Grade)
|