Web Crypto 사용

const generateKey = async () => {
  return window.crypto.subtle.generateKey({
    name: 'AES-GCM',
    length: 256,
  }, true, ['encrypt', 'decrypt'])
}

const encode = (data) => {
  const encoder = new TextEncoder()
  return encoder.encode(data)
}

const generateIv = () => {
  return window.crypto.getRandomValues(new Uint8Array(12))
}

const encrypt = async (data, key) => {
  const encoded = encode(data)
  const iv = generateIv()
  const cipher = await window.crypto.subtle.encrypt({
    name: 'AES-GCM',
    iv: iv,
  }, key, encoded)
  return {
    cipher,
    iv,
  }
}

const pack = (buffer) => {
  return window.btoa(
    String.fromCharCode.apply(null, new Uint8Array(buffer))
  )
}

const unpack = (packed) => {
  const string = window.atob(packed)
  const buffer = new ArrayBuffer(string.length)
  const bufferView = new Uint8Array(buffer)
  for (let i = 0; i < string.length; i++) {
    bufferView[i] = string.charCodeAt(i)
  }
  return buffer
}

const decode = (bytestream) => {
  const decoder = new TextDecoder()
  return decoder.decode(bytestream)
}

const decrypt = async (cipher, key, iv) => {
  const encoded = await window.crypto.subtle.decrypt({
    name: 'AES-GCM',
    iv: iv,
  }, key, cipher)
  return decode(encoded)
}

const app = async () => {
  // encrypt message
  const first = 'Hello, World!'
  const key = await generateKey()
  const { cipher, iv } = await encrypt(first, key)
  // pack and transmit
  await fetch('/secure-api', {
    method: 'POST',
    body: JSON.stringify({
      cipher: pack(cipher),
      iv: pack(iv),
    }),
  })
  // retrieve
  const response = await fetch('/secure-api').then(res => res.json())
  // unpack and decrypt message
  const final = await decrypt(unpack(response.cipher), key, unpack(response.iv))
  console.log(final) // logs 'Hello, World!'
}

import Base64Utility from '@utils/base64';
import ObjectUtility from '@utils/object';
import StringUtility from '@utils/string';

const AES_ALGORITHM = 'AES-GCM';
const HASH_ALGORITHM = 'SHA-256';

function isSupported() {
  return (
    typeof window !== 'undefined' &&
    typeof window.crypto != 'undefined' &&
    typeof window.crypto.subtle != 'undefined' &&
    typeof window.crypto.getRandomValues != 'undefined' &&
    typeof window.crypto.subtle.generateKey != 'undefined'
  );
}

// ref : https://github.com/googleapis/google-auth-library-nodejs/blob/9116f247486d6376feca505bbfa42a91d5e579e2/src/crypto/browser/crypto.ts
export class Crypto {
  constructor() {
    if (!isSupported()) {
      throw new Error("SubtleCrypto not found. Make sure it's an https:// website.");
    }
  }

  /*#######################################
   * private method
   *#######################################*/
  private getIvBase64 = (count = 12) => {
    const array = new Uint8Array(count);
    const iv = window.crypto.getRandomValues(array);

    return Base64Utility.encodeFromArrayBuffer(iv);
  };

  private getAesBase64 = async () => {
    const aes = await window.crypto.subtle
      .generateKey(
        {
          name: AES_ALGORITHM,
          length: 256,
        },
        true,
        ['encrypt', 'decrypt']
      )
      .then((key) => {
        return window.crypto.subtle.exportKey('raw', key);
      });

    return Base64Utility.encodeFromArrayBuffer(aes);
  };

  private generateCryptoKey = (
    format: string,
    keyData: string,
    aLog: string | RsaHashedImportParams,
    key: KeyUsage[]
  ) => {
    return window.crypto.subtle.importKey(format, Base64Utility.decodeToArrayBuffer(keyData), aLog, false, key);
  };

  /*#######################################
   * public method
   *#######################################/
  /**
   * @return {Object}
   * example)
   *  - iv: "Hl3d5fD-K6uU2j4S"
   *  - aes: "pm3TPPzGj2wnuMJtpI2UyP6OLY4tnF3wvgbBYtYEIrg"
   */
  encodeAesAndIvKey = async () => {
    const iv = this.getIvBase64();
    const aes = await this.getAesBase64();

    return {
      iv: Base64Utility.urlSafeEncode(iv),
      aes: Base64Utility.trim(Base64Utility.urlSafeEncode(aes)),
    };
  };
  
  decodeAesAndIvKey = async (aesData: { iv: string; aes: string }, ciphertext: string) => {
    if (
      ObjectUtility.isEmpty(aesData) ||
      ObjectUtility.isEmptyString(aesData.aes) ||
      ObjectUtility.isEmptyString(aesData.iv) ||
      ObjectUtility.isEmptyString(ciphertext)
    ) {
      throw new Error('[Error] aesData or ciphertext is null');
    }

    const crytoKey = await this.generateCryptoKey('raw', aesData.aes, AES_ALGORITHM, ['decrypt']);
    const decryptResult = await window.crypto.subtle.decrypt(
      {
        name: AES_ALGORITHM,
        iv: Base64Utility.decodeToArrayBuffer(aesData.iv),
      },
      crytoKey,
      Base64Utility.decodeToArrayBuffer(ciphertext)
    );

    return window.atob(Base64Utility.encodeFromArrayBuffer(decryptResult));
  };
  
  encryptRsaPublicKey = async (plainString: string, key: string) => {
    const algorithm = 'RSA-OAEP';

    const crytoKey = await this.generateCryptoKey(
      'spki',
      key,
      {
        name: algorithm,
        hash: HASH_ALGORITHM,
      },
      ['encrypt']
    );

    // RSA-OAEP 로 encrypt
    const encryptData = await window.crypto.subtle.encrypt(
      {
        name: algorithm,
      },
      crytoKey, // public key
      StringUtility.convertStringToArrayBuffer(plainString) // encoding data
    );
    const encodeString = Base64Utility.urlSafeEncode(Base64Utility.encodeFromArrayBuffer(encryptData));

    return Base64Utility.trim(encodeString);
  };

  isValidRsaPublicKey = async (publicKey: string, signatureKey: string, randomPublicKey: string) => {
    const algorithm = 'RSA-PSS';

    const crytoKey = await this.generateCryptoKey(
      'spki',
      publicKey,
      {
        name: algorithm,
        hash: HASH_ALGORITHM,
      },
      ['verify']
    );

    const result = await window.crypto.subtle.verify(
      {
        name: algorithm,
        saltLength: 32,
      },
      crytoKey,
      Base64Utility.decodeToArrayBuffer(signatureKey),
      Base64Utility.decodeToArrayBuffer(randomPublicKey)
    );

    return result;
  };

  generateDigest = async (message: string) => {
    const msgUint8 = new TextEncoder().encode(message);
    const hashBuffer = await crypto.subtle.digest(HASH_ALGORITHM, msgUint8);
    const hashArray = Array.from(new Uint8Array(hashBuffer));

    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
  };
}