【改訂】Vueで暗号化・復号化を実装する

  • Updated: 2024.06.25
  • Published: 2024.06.25
  • 742views

概要

Vue.js用の暗号化・復号化のモジュールを作成しました。


ソース

import CryptoJS from "crypto-js";

const env = import.meta.env;

const APP_KEY = 暗号化キー;

export default function Encrypter(){
  const decrypt = (encryptStr)=>{
    let key = APP_KEY.substring(7); // "base64:" を削除
    let encrypted_json = JSON.parse(atob(encryptStr));
    let decrypted = CryptoJS.AES.decrypt(encrypted_json.value, CryptoJS.enc.Base64.parse(key), {
      iv: CryptoJS.enc.Base64.parse(encrypted_json.iv)
    });
    // Decrypt in string format
    decrypted = CryptoJS.enc.Utf8.stringify(decrypted);
    return hashDeserialize(decrypted);
  }
  const encrypt = (data)=>{
    let iv = CryptoJS.lib.WordArray.random(16);
    let key = CryptoJS.enc.Base64.parse(APP_KEY.substring(7));
    let options = {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    };
    let encrypted = CryptoJS.AES.encrypt(data, key, options);
    encrypted = encrypted.toString();
    iv = CryptoJS.enc.Base64.stringify(iv);
    let result = {
      iv: iv,
      value: encrypted,
      mac: CryptoJS.HmacSHA256(iv + encrypted, key).toString()
    }
    result = JSON.stringify(result);
    result = CryptoJS.enc.Utf8.parse(result);
    return CryptoJS.enc.Base64.stringify(result);
  }

  const hashDeserialize = (data)=> {
    let str = String(data);
    if(str.indexOf(':', 2) !== -1){
      return str.substring(str.indexOf(':', 2) + 2, str.lastIndexOf(';') - 1);
    }else{
      return str;
    }
  }

  return {
    decrypt,
    encrypt
  }
}
const APP_KEY = 暗号化キー;

暗号化キーは直接書いても良いですし、.envファイルに設定しても良いと思います。


使用方法

import Encrypter from "@/modules/Encrypter.js";

const encrypter = Encrypter();

暗号化

encrypter.encrypt('暗号化したい文字列');

復号化

encrypter.decrypt('復号化したい文字列');

コメントを投稿する

CAPTCHA


関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ