CryptoJS AES + PBKDF2

原由

在 Browser 沒有讓人心安的密碼存放庫。理想上 Browser 不可存放任何金鑰 Key。但又必需加密，加密需要金錀，在此限制條件下，那金錀就用算的吧。

相應的演算法名為 PBKDF2。

參考文章

如何安全的加密使用者的密碼 使用 PBKDF2 以及破解的可能性 - HackMDHackMD

關於 PBKDF2

PBKDF2（Password-Based Key Derivation Function 2）遵循的是 RFC 8018 標準。這個標準最初是以 RFC 2898 的形式發布，隨後被 RFC 8018 取代並成為目前的正式標準。

RFC 8018 的正式名稱是 "PKCS #5: Password-Based Cryptography Specification Version 2.1"。其中詳細描述了 PBKDF2 的工作原理和應用方式。

CryptoJS 的 PBKDF2 實現主要遵循的是 RFC 2898（即 PBKDF2 的初版標準）。RFC 8018 是 RFC 2898 的更新和取代版本，兩者在 PBKDF2 的使用上基本保持一致。

在使用 CryptoJS 的 PBKDF2 時，你可以指定一些參數，如迭代次數、哈希算法等，但無法直接選擇特定的 RFC 標準。不過，只要按照 RFC 2898 的設計來使用 PBKDF2，它就應該符合 RFC 8018 的要求。

開發平台與相關套件

使用 CryptoJS 套件版本 "crypto-js": "^4.2.0"

平台：Angular 18。在 React 也有效。

原碼紀錄一 - 加解密試作

import { Component, OnInit, signal } from '@angular/core';
import { PBKDF2, AES, enc, mode, pad } from 'crypto-js'
import { random } from 'crypto-js/lib-typedarrays'
import { environment } from '../../../environments/environment.development';

@Component({
  selector: 'app-demo009',
  templateUrl: './demo009.component.html',
  styleUrl: './demo009.component.css'
})
export class Demo009Component implements OnInit {
  debugMessage = signal('')

  ngOnInit(): void {
    const iterations = 10000;
    const salt = '這是鹽巴';
    const iv = random(128 / 8).toString(enc.Hex);

    //--- 加密。金鑰經由計算得到。
    const key = PBKDF2(environment.authSeed, salt, { keySize: 256 / 32, iterations });
    const cyphertext = AES.encrypt('我是明文', key, {
      mode: mode.CBC,
      padding: pad.Pkcs7,
      iv: enc.Hex.parse(iv)
    }).toString();

    //--- 解密。金鑰經由計算得到。
    const key2 = PBKDF2(environment.authSeed, salt, { keySize: 256 / 32, iterations });

    const decryptedBlob = AES.decrypt(cyphertext, key2, {
      mode: mode.CBC,
      padding: pad.Pkcs7,
      iv: enc.Hex.parse(iv)
    })
    const decryptedText = enc.Utf8.stringify(decryptedBlob)

    const json = JSON.stringify({ iterations, salt, iv, key: key.toString(), key2: key2.toString(), decryptedText }, null, ' ');
    this.debugMessage.set(json);
  }
}

原碼紀錄二 - 加解密實作

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment'
import { SHA3, PBKDF2, AES, enc, mode, pad } from 'crypto-js'
import { random } from 'crypto-js/lib-typedarrays'

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 登入狀態
  private _loginUserId: string = '';
  private _loginUserName: string = '來賓';
  private _status: AuthStatus = AuthStatus.Guest;
  private _authToken?: string = undefined;
  private _expiredTime?: Date = undefined;

  ...略...  

  /**
   * 把登入狀態加密並存入 localStorage。
   */
  private doStoreAuthState2(): void {
    debugger;
    const authState = {
      loginUserId: this._loginUserId,
      loginUserName: this._loginUserName,
      status: this._status,
      authToken: this._authToken,
      expiredTime: this._expiredTime,
    }

    const authJson = JSON.stringify(authState);

    // meta
    const iterations = 10000;
    const salt = 'this-is-the-salt';
    const iv = random(128 / 8).toString(enc.Hex);

    // 加密
    const key = PBKDF2(environment.authSeed, salt, { keySize: 256 / 32, iterations });
    const cyphertext = AES.encrypt(authJson, key, {
      mode: mode.CBC,
      padding: pad.Pkcs7,
      iv: enc.Hex.parse(iv)
    }).toString();

    const hash = SHA3(cyphertext, { outputLength: 384 }).toString();

    // 保存
    localStorage.setItem(environment.authStateRepo, hash + '.' + cyphertext + '.' + iv);
  }

  /**
   * 自 localStorage 還原登入狀態。
   */  
  private doRestoreAuthState2(): void {
    const authCypher = localStorage.getItem(environment.authStateRepo);
    if (!authCypher) {
      localStorage.removeItem(environment.authStateRepo); // 移除無效登入資訊
      return;
    }

    const [hash, cyphertext, iv] = authCypher.split('.');

    // check hash
    const hash2 = SHA3(cyphertext, { outputLength: 384 }).toString();
    if (hash !== hash2) {
      localStorage.removeItem(environment.authStateRepo); // 移除無效登入資訊
      return;
    }

    // 解密
    const iterations = 10000;
    const salt = 'this-is-the-salt';
    const key2 = PBKDF2(environment.authSeed, salt, { keySize: 256 / 32, iterations });

    const decryptedBlob = AES.decrypt(cyphertext, key2, {
      mode: mode.CBC,
      padding: pad.Pkcs7,
      iv: enc.Hex.parse(iv)
    })
    const authJson = enc.Utf8.stringify(decryptedBlob)
    const authState = JSON.parse(authJson);

    // 檢查時效仍有效否
    if (authState.status !== AuthStatus.Authed) {
      localStorage.removeItem(environment.authStateRepo); // 移除無效登入資訊
      return;
    }

    if (new Date(authState.expiredTime) <= new Date()) {
      localStorage.removeItem(environment.authStateRepo); // 移除無效登入資訊
      return;
    }

    console.debug('AuthService.restoreAuthState2.SUCCESS', authState)

    // 以上步驟全部成功的話
    // setup auth status
    this._loginUserId = authState.loginUserId;
    this._loginUserName = authState.loginUserName;
    this._authToken = authState.authToken;
    this._expiredTime = authState.expiredTime;
    this._status = authState.status; // 狀態最後填入
  }
}

原碼紀錄三 - client 加密, server 解密

Angualr 18 client 加密

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment'
import { PBKDF2, AES, enc, mode, pad, algo } from 'crypto-js'
import { random } from 'crypto-js/lib-typedarrays'

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  async loginAsync(args: ILoginArgs) {
    try {
      this._status = AuthStatus.Authing;

      const iterations = 10036;
      const salt = enc.Hex.parse('dc8383f5cd494aa9aee4288ae3128aeb');
      const seed = enc.Hex.parse(environment.aesSeed)
      const iv = random(128 / 8).toString(enc.Hex);

      // 加密
      const key = PBKDF2(seed, salt, { keySize: 256 / 32, iterations, hasher: algo.SHA256 })
      const cyphertext = AES.encrypt(JSON.stringify(args), key, {
        mode: mode.CBC,
        padding: pad.Pkcs7,
        iv: enc.Hex.parse(iv)
      }).toString();

      const credential = iv + '.' + encodeURIComponent(cyphertext);
      
      ...略...
    }
    catch (err) {
      ...略...
    }
  }
}

NET8 Web API 解密

using System.Security.Cryptography;
using System.Text;

static class CredentialHelper
{
  /// <summary>
  /// AES 256 CBC 加密器
  /// </summary>
  /// <param name="ciphertext">密文</param>
  /// <param name="seed">HEX64數字 金鑰種子</param>
  /// <param name="iv">HEX32數字</param>
  public static string Decrypt(string ciphertext, string seed, string iv)
  {
    byte[] saltBlob = Convert.FromHexString("dc8383f5cd494aa9aee4288ae3128aeb");
    byte[] seedBlob = Convert.FromHexString(seed);

    using var pbkdf2 = new Rfc2898DeriveBytes(seedBlob, saltBlob, 10036, HashAlgorithmName.SHA256);
    var keyBytes = pbkdf2.GetBytes(32);
    byte[] ivBytes = Convert.FromHexString(iv);

    using (Aes aes = Aes.Create())
    {
      aes.Mode = CipherMode.CBC;
      aes.Padding = PaddingMode.PKCS7;
      aes.Key = keyBytes;
      aes.IV = ivBytes;

      byte[] cipherBytes = Convert.FromBase64String(ciphertext);
      using (ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV))
      using (MemoryStream ms = new MemoryStream(cipherBytes))
      using (CryptoStream cs = new CryptoStream(ms, decryptor, CryptoStreamMode.Read))
      using (StreamReader reader = new StreamReader(cs, Encoding.UTF8))
      {
        var decryptedText = reader.ReadToEnd();
        return decryptedText;
      }
    }
  }
}

(EOF)