AES暗号化 (javascript)

プログラミング javascript

はじめに

情報セキュリティを勉強しており、AES暗号化の基礎について書いてみようと思います。
とはいえ、このページにたどり着く人は、とりあえず暗号化できる方法を知りたい人かと思うので、ちゃちゃっとやり方を記載することにします。

本来であれば、暗号化のオプションの指定もありますが、ここでは初級編としてとりあえず、動く最低限だけ記載しておきます。

AESとは

  • Advanced Encryption Standard
  • 現在(2020年)のアメリカで採用・標準化されている暗号化方式
  • 暗号時と復号時に同じ暗号鍵(パスフレーズ)を使う、共通化暗号方式の1つです。

なんてことはないですね。
データをパスフレーズで暗号化/復号化するだけです。
暗号化されたデータが漏れてしまっても、暗号鍵がわからなければただのゴミデータですねぇ。
当然、クラッカーの方々は、暗号鍵を狙ってくるわけですけどね。

サンプル

テスト環境

  • OS: Windows 10 Home
  • ブラウザ: Firefox 75.0 / Chrome81.0.4044.129 (64bit)

使用モジュール

今回は、古くからオープンソースで使われているモジュールを使おうと思います。
cdnjs にもあるので、そのまま参照することにします。

ソースコード

とりあえず、すぐに試せるように、html として記載しておきます。ソースコードエリアを copy して、html ファイルとして保存してもらえれば動作します。

  • 動作確認:2020-05-03
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[プログラム] AES 暗号化</title>
  <style> input { width: 500px; } </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
</head>
<body>
  <p>
    <input type="text" name="data" id="data" placeholder="" value="Hello World!">
    <label for="">データ / Data</label>
  </p>
  <p>
    <input type="text" name="pass_phrase" id="pass_phrase" value="0123456789ABCDEF0123456789ABCDEF">
    <label for="">パスフレーズ / Path Phrase</label>
  </p>
  <p>
    <input type="submit" id="execute" value="実行">
  </p>
  <div id="output"></div>

  <script>
    window.onload = () => {
      let buttonExecute = document.getElementById('execute')
      buttonExecute.addEventListener('click', () => {
        execute()
      });
    }

    function execute () {

      // パスフレーズ(暗号鍵)
      let passPhrase = document.getElementById('pass_phrase').value;
      // 暗号化したい元のデータ
      let data = document.getElementById('data').value;
      let utf8_plain = CryptoJS.enc.Utf8.parse(data);
      // 暗号化
      let encrypted = CryptoJS.AES.encrypt( utf8_plain, passPhrase );
      // 復号化
      let decrypted = CryptoJS.AES.decrypt( encrypted , passPhrase );
      let txt_dexrypted = decrypted.toString(CryptoJS.enc.Utf8);

      // 表示
      document.getElementById("output").innerHTML = 
        "key : " + passPhrase +"<br />" +
        "data : " + data + "<br />" +
        "encrypted : " + encrypted + "<br />" +
        "decrypted : " + txt_dexrypted;
    }
    </script>
</body>
</html>

解説

(8行目)モジュールの読み込み

  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

AES暗号化のための、 javascript モジュールは「crypto-js」を使いました。
CDNから、直接読み込んでます。

(34~35行目)パスフレーズ

      // パスフレーズ(暗号鍵)
      let passPhrase = document.getElementById('pass_phrase').value;

(36~38行目)暗号化したいデータ

      // 暗号化したい元のデータ
      let data = document.getElementById('data').value;
      let utf8_plain = CryptoJS.enc.Utf8.parse(data);

今時は、UFT-8で統一しておいたほうが便利なので UTF-8 に変換しています。

(39~40行目)暗号化

      // 暗号化
      let encrypted = CryptoJS.AES.encrypt( utf8_plain, passPhrase );

実行結果は、base64 でエンコードされた文字列です。

(41~43行目)復号化

      // 復号化
      let decrypted = CryptoJS.AES.decrypt( encrypted , passPhrase );
      let txt_dexrypted = decrypted.toString(CryptoJS.enc.Utf8);

暗号化されたデータを、復号化します。復号化直後のデータはバイナリなので UTF-8 で元の文字列に変更しています。

コメント

タイトルとURLをコピーしました