前端敏感数据安全处理：从存储到传输的全链路防护

1.3 妥协方案：内存存储 + 刷新重签（跨域/非 Cookie 场景）

在部分特殊场景（如跨端应用、跨域且无法配置 Cookie、第三方授权回调），无法使用 HttpOnly Cookie 存储 Token 时，可采用**「内存存储 + 刷新重签」**方案——核心是避免 Token 持久化存储，降低泄露风险。

封装 Token 管理工具（仅内存存储，页面刷新即丢失）：

// src/utils/tokenManager.js
const TokenManager = (() => {
  // 内存变量存储 Token，不涉及任何本地持久化
  let _accessToken = '';
  let _refreshToken = '';

  // 存储 Token（仅内存）
  const setToken = (accessToken, refreshToken) => {
    _accessToken = accessToken || '';
    _refreshToken = refreshToken || '';
  };

  // 获取 Access Token
  const getAccessToken = () => _accessToken;

  // 获取 Refresh Token（用于 Token 过期重签）
  const getRefreshToken = () => _refreshToken;

  // 清空 Token（登出/过期时调用）
  const clearToken = () => {
    _accessToken = '';
    _refreshToken = '';
  };

  // 判断 Token 是否有效（简化版，实际需结合过期时间）
  const isTokenValid = () => !!_accessToken;

  return { setToken, getAccessToken, getRefreshToken, clearToken, isTokenValid };
})();

export default TokenManager;

实战使用示例（登录、请求拦截、登出）：

// src/api/auth.js
import axios from 'axios';
import TokenManager from '../utils/tokenManager';

// 登录接口（登录成功后存储 Token 到内存）
export const login = async (username, password) => {
  const res = await axios.post('/auth/login', { username, password });
  const { accessToken, refreshToken } = res.data;
  TokenManager.setToken(accessToken, refreshToken);
  return res.data;
};

// 登出接口（清空内存 Token）
export const logout = async () => {
  await axios.post('/auth/logout');
  TokenManager.clearToken();
  window.location.href = '/login'; // 跳转到登录页
};

// 请求拦截器（从内存取 Token 携带到请求头）
axios.interceptors.request.use(config => {
  if (TokenManager.isTokenValid()) {
    config.headers.Authorization = `Bearer ${TokenManager.getAccessToken()}`;
  }
  return config;
}, error => Promise.reject(error));

// 响应拦截器（Token 过期自动刷新）
axios.interceptors.response.use(res => res, async error => {
  const originalRequest = error.config;

  // 避免重复刷新 Token
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    try {
      // 用 Refresh Token 刷新 Access Token
      const refreshToken = TokenManager.getRefreshToken();
      const res = await axios.post('/auth/refresh-token', { refreshToken });
      const { accessToken: newAccessToken } = res.data;
      TokenManager.setToken(newAccessToken, refreshToken);

      // 重试原始请求
      originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
      return axios(originalRequest);
    } catch (refreshError) {
      // 刷新 Token 失败，强制登出
      TokenManager.clearToken();
      window.location.href = '/login';
      return Promise.reject(refreshError);
    }
  }
  return Promise.reject(error);
});

1.4 绝对避坑：这些操作禁止做

• ❌ 不要把 Token 存在 localStorage/sessionStorage：XSS 脚本可直接通过 localStorage.getItem('token') 窃取；
• ❌ 不要把 Token 拼在 URL 参数里：会被浏览器历史记录、服务器日志记录，泄露风险极高；
• ❌ 不要在 console.log 中打印 Token/密码：调试时容易遗漏删除，生产环境可能泄露；
• ❌ 不要将 Token 存储在 Vuex/Pinia 且开启持久化：持久化插件本质还是存在 localStorage，同样有 XSS 风险。

二、核心场景 2：敏感数据加密传输（HTTPS 是基础）

敏感数据的传输安全，核心是**「HTTPS 保底 + 前端加密补充」**。HTTPS 是传输层的基础安全保障，可防止中间人攻击和数据裸传；前端加密则是在 HTTPS 基础上进一步加固，满足合规要求或应对特殊场景（如明文密码传输）。

2.1 基础：必须使用 HTTPS（不可替代）

HTTPS 并非简单的**「HTTP + SSL/TLS」，其核心是通过「非对称加密 + 对称加密」**的组合方式，实现数据传输的机密性、完整性和真实性：

1. 握手阶段：客户端与服务端协商加密算法，服务端向客户端发送公钥；
2. 密钥交换：客户端生成随机的**「对称加密密钥」**，用服务端公钥加密后传输给服务端；
3. 数据传输：双方后续所有通信数据，均用**「对称加密密钥」**加密传输（对称加密效率远高于非对称加密）。

✅ 核心作用：即使数据被中间人拦截，拿到的也是密文，无法解密（缺少对称加密密钥）。

⚠️ 前端必须确认：所有接口均使用 HTTPS 协议，禁止 HTTP 混合内容（浏览器会拦截 HTTP 请求，控制台报错）。

2.2 补充：前端对敏感参数二次加密（加固方案）

HTTPS 已能满足大部分场景的安全需求，但在部分高敏感场景（如用户登录密码、支付信息）或合规要求（如等保三级）下，需对核心敏感参数做前端二次加密后再传输——即使 HTTPS 被破解（极端场景），敏感数据仍处于加密状态。

2.2.1 方案 1：非对称加密（RSA）—— 适合密码等单一高敏感参数

RSA 加密的核心优势是**「公钥加密、私钥解密」**，公钥可公开传输，私钥仅服务端持有（即使公钥泄露，黑客也无法解密数据），非常适合登录密码等单一高敏感参数的加密。

实战步骤（基于 jsencrypt 库）：

// 1. 安装依赖
// npm install jsencrypt --save

// 2. 封装 RSA 加密工具
// src/utils/rsaEncrypt.js
import JSEncrypt from 'jsencrypt';

// 从服务端获取公钥（建议动态获取，避免硬编码）
const getPublicKey = async () => {
  const res = await axios.get('/api/public-key');
  return res.data.publicKey; // 服务端返回的公钥字符串
};

// RSA 加密函数
export const rsaEncrypt = async (data) => {
  const publicKey = await getPublicKey();
  const encryptor = new JSEncrypt();
  encryptor.setPublicKey(publicKey); // 设置公钥
  return encryptor.encrypt(data); // 加密数据（返回密文）
};

// 3. 登录密码加密传输示例
// src/api/auth.js
import { rsaEncrypt } from '../utils/rsaEncrypt';

export const login = async (username, password) => {
  // 对密码进行 RSA 加密
  const encryptedPwd = await rsaEncrypt(password);
  
  // 传输密文（username 可根据需求选择是否加密）
  const res = await axios.post('/auth/login', {
    username,
    password: encryptedPwd // 传输加密后的密码
  });
  return res.data;
};

2.2.2 方案 2：对称加密（AES）—— 适合批量敏感参数

AES 加密的优势是**「加密效率高、适合批量数据」，但需要前端与服务端约定「密钥（key）」和「偏移量（iv）」**（密钥需通过 HTTPS 传输，避免裸传），适合用户手机号、身份证号、地址等批量敏感参数的加密。

实战步骤（基于 crypto-js 库）：

// 1. 安装依赖
// npm install crypto-js --save

// 2. 封装 AES 加密工具
// src/utils/aesEncrypt.js
import CryptoJS from 'crypto-js';

// 密钥和偏移量（建议从服务端动态获取，不要硬编码）
let AES_KEY = '';
let AES_IV = '';

// 初始化密钥和偏移量
export const initAesConfig = async () => {
  const res = await axios.get('/api/aes-config');
  AES_KEY = CryptoJS.enc.Utf8.parse(res.data.key); // 16 位密钥（AES-128）
  AES_IV = CryptoJS.enc.Utf8.parse(res.data.iv); // 16 位偏移量
};

// AES 加密（CBC 模式，Pkcs7 填充）
export const aesEncrypt = (data) => {
  const jsonStr = JSON.stringify(data);
  const encrypted = CryptoJS.AES.encrypt(jsonStr, AES_KEY, {
    iv: AES_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString(); // 返回密文
};

// AES 解密（服务端加密后返回的密文，前端需解密时使用）
export const aesDecrypt = (encryptedData) => {
  const decrypted = CryptoJS.AES.decrypt(encryptedData, AES_KEY, {
    iv: AES_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypted).toString());
};

// 3. 批量敏感参数加密传输示例
// src/api/user.js
import { initAesConfig, aesEncrypt } from '../utils/aesEncrypt';

// 初始化 AES 配置（页面加载时调用）
initAesConfig();

// 更新用户信息（手机号、身份证号均为敏感数据）
export const updateUserInfo = async (userInfo) => {
  // userInfo: { name: '张三', phone: '13800138000', idCard: '110101199001011234' }
  const encryptedData = aesEncrypt(userInfo);
  const res = await axios.post('/api/user/update', {
    data: encryptedData // 传输加密后的批量数据
  });
  return res.data;
};

2.3 传输层额外加固：请求头/响应头防护

除了数据加密，还可通过配置请求头/响应头，进一步提升传输安全性：

• 禁止在响应头返回敏感数据：如 Token、用户身份证号等，避免泄露；
• 配置 Content-Security-Policy（CSP）响应头：限制外部脚本加载、禁止 inline-script，减少 XSS 风险；
• 配置 X-Content-Type-Options: nosniff：防止浏览器将非预期的文件类型解析为脚本；
• 配置 X-XSS-Protection: 1; mode=block：开启浏览器内置 XSS 防护。

三、前端内存级防护：敏感数据不泄露

即使存储和传输环节安全，前端内存中的敏感数据仍可能通过控制台打印、调试工具、页面卸载残留等方式泄露。需从**「禁止打印、及时清理、规避全局存储」**三个维度做好内存防护。

3.1 禁止打印敏感数据

开发调试时，很多开发者习惯用 console.log 打印数据，若包含 Token、密码等敏感信息，生产环境未删除会导致泄露。建议封装安全日志工具，过滤敏感字段并区分环境：

// src/utils/safeLog.js
/**
 * 安全日志工具：过滤敏感字段，生产环境禁用
 * @param {any} data - 待打印数据
 * @param {string} title - 日志标题（可选）
 */
export const safeLog = (data, title = '日志信息') => {
  // 生产环境直接禁用日志
  if (process.env.NODE_ENV === 'production') return;

  // 深拷贝数据，避免修改原数据
  const filterData = JSON.parse(JSON.stringify(data));

  // 定义需要过滤的敏感字段（可根据业务扩展）
  const sensitiveKeys = ['token', 'accessToken', 'refreshToken', 'password', 'idCard', 'phone', 'bankCard'];

  // 递归过滤敏感字段
  const filterSensitiveData = (obj) => {
    if (typeof obj !== 'object' || obj === null) return obj;
    if (Array.isArray(obj)) {
      return obj.map(item => filterSensitiveData(item));
    }
    for (const key in obj) {
      if (sensitiveKeys.includes(key.toLowerCase())) {
        obj[key] = '******'; // 脱敏替换
      } else {
        obj[key] = filterSensitiveData(obj[key]);
      }
    }
    return obj;
  };

  const logData = filterSensitiveData(filterData);
  console.log(`[${title}]`, logData);
};

// 使用示例
import { safeLog } from '../utils/safeLog';
const userInfo = {
  name: '张三',
  phone: '13800138000',
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
};
safeLog(userInfo, '用户信息'); // 控制台输出：[用户信息] { name: '张三', phone: '******', token: '******' }

3.2 及时清理内存中的敏感数据

敏感数据在内存中停留的时间越长，泄露风险越高。需在**「登出、页面卸载、表单提交后」**及时清理：

// 1. 登出时清理（配合 TokenManager）
const logout = async () => {
  await axios.post('/auth/logout');
  TokenManager.clearToken(); // 清空内存 Token
  
  // 清空密码输入框
  document.querySelector('#password')?.setValue('');
  
  // 清空全局敏感变量（如有）
  window.__sensitiveData = null;
  window.location.href = '/login';
};

// 2. 页面卸载时清理（beforeunload 事件）
window.addEventListener('beforeunload', () => {
  TokenManager.clearToken(); // 其他敏感数据清理
  const sensitiveInputs = document.querySelectorAll('input[type="password"], [data-sensitive]');
  sensitiveInputs.forEach(input => input.value = '');
});

// 3. 表单提交后清理密码
const handleLoginSubmit = async (formData) => {
  const { username, password } = formData;
  try {
    await login(username, password);
    // 提交成功后清空密码
    formData.password = '';
    // 跳转到首页
    window.location.href = '/home';
  } catch (error) {
    console.error('登录失败：', error);
  }
};

3.3 规避全局存储敏感数据

避免用全局变量（如 window、global）存储敏感数据，即使是临时存储，也可能被第三方脚本或调试工具获取：

• ❌ 禁止：window.token = 'xxx';
• ✅ 推荐：用闭包、模块私有变量存储（如前文的 TokenManager）。

四、其他敏感数据处理：展示与输入防护

除了 Token 和传输中的数据，前端展示和输入环节的敏感数据（如手机号、身份证号、密码）也需做防护，避免用户视觉泄露或输入时被窃取。

4.1 敏感数据脱敏展示

前端展示用户手机号、身份证号、银行卡号等数据时，需进行脱敏处理——只显示部分字符，隐藏核心信息：

// src/utils/dataMask.js
/**
 * 手机号脱敏：138****8000
 * @param {string} phone - 手机号（11 位）
 * @returns {string} 脱敏后手机号
 */
export const maskPhone = (phone) => {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

/**
 * 身份证号脱敏：110101********1234
 * @param {string} idCard - 身份证号（18 位）
 * @returns {string} 脱敏后身份证号
 */
export const maskIdCard = (idCard) => {
  if (!idCard) return '';
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2');
};

/**
 * 银行卡号脱敏：6222****8888
 * @param {string} bankCard - 银行卡号（16-19 位）
 * @returns {string} 脱敏后银行卡号
 */
export const maskBankCard = (bankCard) => {
  if (!bankCard) return '';
  return bankCard.replace(/(\d{4})\d+(\d{4})/, '$1****$2');
};

// 使用示例
import { maskPhone, maskIdCard } from '../utils/dataMask';
const userInfo = {
  phone: '13800138000',
  idCard: '110101199001011234'
};
console.log(maskPhone(userInfo.phone)); // 138****8000
console.log(maskIdCard(userInfo.idCard)); // 110101********1234

4.2 密码输入防护

密码输入环节需避免自动填充、复制粘贴等风险，提升输入安全性：

<!-- 密码输入框优化配置 -->
<input type="password" placeholder="请输入密码" autocomplete="new-password"
       oncopy="return false" <!-- 禁止复制 -->
       oncut="return false" <!-- 禁止剪切 -->
       onpaste="return false" <!-- 禁止粘贴 -->
       spellcheck="false" /> <!-- 禁止拼写检查 -->

五、实战总结与合规建议

5.1 核心防护链路总结

前端敏感数据安全处理，需覆盖**「存储 → 传输 → 内存 → 展示」**全链路，核心方案总结如下：

1. 存储：Token 优先用 HttpOnly + Secure + SameSite Cookie；无法用 Cookie 时，用内存存储 + 刷新重签，禁止持久化；
2. 传输：基于 HTTPS，密码用 RSA 加密，批量敏感参数用 AES 加密，避免裸传；
3. 内存：禁止打印敏感数据，登出/页面卸载时及时清理，规避全局存储；
4. 展示：敏感数据脱敏展示，密码输入框禁止自动填充和复制粘贴。

5.2 合规与上线检查建议

项目上线前，建议做以下敏感数据安全检查，确保符合合规要求：

• 检查所有 Token 存储方式，禁止使用 localStorage/sessionStorage；
• 检查所有接口是否使用 HTTPS，敏感参数是否加密传输；
• 检查生产环境是否有敏感数据打印，是否清理了内存敏感数据；
• 检查敏感数据展示是否脱敏，密码输入框是否有防护配置；
• 进行 XSS 漏洞测试，验证 HttpOnly Cookie 是否有效。

5.3 最后提醒

前端敏感数据处理的核心是**「最小暴露」**——能不存储的绝不存储，能加密的绝不裸传，能脱敏的绝不完整展示。没有绝对安全的方案，只有相对更安全的实践，需结合业务场景和合规要求，选择最合适的防护方案，同时持续关注安全漏洞和最新防护技术，不断优化安全体系。