加密的重要性

localStorage 和 sessionStorage 是浏览器提供的用于在客户端存储数据的 API，它们在 Web 开发中被广泛使用。在某些情况下，对存储在 localStorage 和 sessionStorage 中的数据进行加密是至关重要的。

1. 数据保护与隐私安全 localStorage 和 sessionStorage 通常用于存储敏感信息，如用户凭据、个人配置、购物车数据等。这些数据可能包含用户的个人身份信息、支付信息或其他敏感数据。如果这些数据未经加密存储，那么它们在客户端上容易受到恶意攻击者的窃取或篡改。通过对存储在 localStorage 和 sessionStorage 中的数据进行加密，可以提高数据的保护级别，确保只有授权的实体能够访问和解密这些数据。
2. 防止数据篡改 加密不仅仅可以保护数据的隐私性，还可以确保数据的完整性。通过对存储在 localStorage 和 sessionStorage 中的数据进行加密，可以防止恶意用户篡改数据，确保数据在传输或存储过程中不被修改或污染。这对于关键业务数据、配置信息或会话数据等具有重要意义，以避免可能导致错误或安全漏洞的数据篡改。
3. 法律和合规要求 许多国家和地区制定了数据保护和隐私规定，要求组织对个人数据采取适当的安全措施。对localStorage和sessionStorage中的敏感数据进行加密有助于组织遵守法律和合规要求，保护个人数据的安全和隐私。

封装

实现代码如下，注释已经非常详细：

import type { EncryptionParams } from '@/utils-ts/cipher'; // 导入加密参数类型
import { AesEncryption } from '@/utils-ts/cipher'; // 导入加密类
import { getEnvConfig, isLocalEnv } from '@/utils-ts/env'; // 导入环境配置相关的工具函数
import { isNullOrUnDef } from '@/utils-ts/is'; // 导入判断 null 和 undefined 的工具函数

// 定义构建函数参数类型
interface CreateStorageParams extends EncryptionParams {
  preKey?: string;
  storage?: Storage;
  hasEncrypt?: boolean;
  timeout?: number;
}

// 获取环境配置
const envConfig = getEnvConfig();

export default class {
  private storage: Storage; // 存储类型 localStorage/sessionStorage
  private preKey: string; // 加密 key
  private encryption: AesEncryption; // 加密类实例
  private hasEncrypt: boolean; // 是否需要加密
  private timeout: number | null; // 缓存过期时间

  constructor(opt: CreateStorageParams) {
    const {
      key,
      iv = envConfig.aesIv || '',
      preKey = 'uv-mobile',
      storage = sessionStorage,
      timeout = null,
      hasEncrypt = !isLocalEnv,
    } = opt;
    if (hasEncrypt && [key.length, iv.length].some(item => item !== 16)) {
      throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
    }

    this.storage = storage;
    this.preKey = preKey;
    this.hasEncrypt = hasEncrypt;
    this.timeout = timeout;
    this.encryption = new AesEncryption({ key, iv });
  }
  
  /**
   * 设置缓冲区 Key
   * @param key 键名
   */
  private getKey(key: string) {
    return `${this.preKey}-${key}`.toUpperCase();
  }

  /**
   * 将数据存储在本地缓存中
   * @param key 键名
   * @param value 值
   * @param expire 过期时间（秒），默认为构建函数中设置的 timeout
   */
  set(key: string, value: any, expire: number | null = this.timeout) {
    const stringData = JSON.stringify({
      value,
      time: Date.now(),
      expire: isNullOrUnDef(expire) ? null : Date.now() + expire * 1000,
    });
    const stringifyValue = this.hasEncrypt ? this.encryption.encryptByAES(stringData) : stringData;
    this.storage.setItem(this.getKey(key), stringifyValue);
  }

  /**
   * 获取存储在本地缓存中的数据
   * @param key 键名
   * @returns 存储的值，如果数据不存在或已过期，则返回 null
   */
  get(key: string) {
    const val = this.storage.getItem(this.getKey(key));
    if (!val) return null;
    try {
      const parseVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
      const { value, time, expire } = JSON.parse(parseVal);
      if (isNullOrUnDef(expire) || expire > Date.now()) return value;
      this.remove(key);
    } catch(e) {
      console.error(e);
      return null;
    }
  }

  /**
   * 从本地缓存中移除指定的数据
   * @param key 键名
   */
  remove(key: string) {
    this.storage.removeItem(this.getKey(key));
  }

  /**
   * 清除全部缓冲区数据
   */
  clear(): void {
    this.storage.clear();
  }
}

加密

加密模块作为一个独立的功能模块提供一些加密相关的功能：

• AesEncryption 类实现了基于 AES 算法的加密和解密功能。构造函数接受一个包含密钥和可选的初始化向量的参数对象。通过调用 encryptByAES 方法可以对文本进行加密，调用 decryptByAES 方法可以对加密文本进行解密。
• encryptByBase64 函数用于对文本进行 Base64 编码加密。
• decodeByBase64 函数用于对经过 Base64 编码的文本进行解码。
• encryptByMd5 函数使用 MD5 算法对文本进行加密。

import { encrypt, decrypt } from 'crypto-js/aes';
import { parse } from 'crypto-js/enc-utf8';
import pkcs7 from 'crypto-js/pad-pkcs7';
import ECB from 'crypto-js/mode-ecb';
import md5 from 'crypto-js/md5';
import UTF8 from 'crypto-js/enc-utf8';
import Base64 from 'crypto-js/enc-base64';

export interface EncryptionParams {
  key: string;
  iv?: string;
}

/**
 * AES加密类
 */
export class AesEncryption {
  private key;
  private iv;

  constructor(opt: EncryptionParams) {
    const { key, iv } = opt;
    this.key = parse(key);
    if (iv) {
      this.iv = parse(iv);
    }
  }

  /**
   * 获取AES加密选项
   */
  get getOptions() {
    return {
      mode: ECB,
      padding: pkcs7,
      iv: this.iv,
    };
  }

  /**
   * 使用AES算法加密文本
   * @param cipherText 待加密的文本
   * @returns 加密后的文本
   */
  encryptByAES(cipherText: string) {
    return encrypt(cipherText, this.key, this.getOptions).toString();
  }

  /**
   * 使用AES算法解密文本
   * @param cipherText 待解密的文本
   * @returns 解密后的文本
   */
  decryptByAES(cipherText: string) {
    return decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
  }
}

/**
 * 使用Base64编码加密文本
 * @param cipherText 待加密的文本
 * @returns 加密后的Base64编码文本
 */
export function encryptByBase64(cipherText: string) {
  return UTF8.parse(cipherText).toString(Base64);
}

/**
 * 使用Base64编码解密文本
 * @param cipherText 待解密的Base64编码文本
 * @returns 解密后的文本
 */
export function decodeByBase64(cipherText: string) {
  return Base64.parse(cipherText).toString(UTF8);
}

/**
 * 使用MD5算法加密文本
 * @param password 待加密的文本
 * @returns 加密后的文本
 */
export function encryptByMd5(password: string) {
  return md5(password).toString();
}

使用

使用示例：

import Storage from '@/utils-ts/cache/storage';
import { getEnvConfig } from '@/utils-ts/env';

const envConfig = getEnvConfig();

const storage = new Storage({
  storage: localStorage,
  key: envConfig.aesKey || '',
});

最后

对存储在 localStorage 和 sessionStorage 中的数据进行加密是一种最佳实践。它提供了额外的数据保护层，确保数据的机密性、完整性和安全性，同时满足法规和合规性要求，并增强用户的信任和忠诚度。通过采取这种最佳实践，可以有效地保护用户的隐私和敏感信息，减少数据泄露和安全风险的可能性。