JSFiddle - React, Tailwind, and code Playground

by Mitsuhiro Hibara

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <!--https://code.google.com/archive/p/crypto-js/-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/pbkdf2.js"></script>

<label for="encypt-text">暗号化するテキスト：</label><br />
<input id="encypt-text" class="text-string" type="text" size="80" value="おもしろき　こともなき世を　おもしろく　すみなしものは　心なりけり" /><br />
<label for="encrypt-password">暗号化パスワード：</label><br />
<input id="encrypt-password" class="passphrase" type="text" size="80" value="開け胡麻" /><br />
&nbsp;&nbsp;↓<input id="encrypt" type="button" value="暗号化する" /><br />
<label for="encypted-data">暗号化データ：</label><br />
<textarea id="encypted-data" class="text-string" rows="8" cols="80"></textarea><br />
<label for="decrypt-password">復号パスワード：</label><br />
<input id="decrypt-password" class="passphrase" type="text" size="80" value="開け胡麻" /><br />
&nbsp;&nbsp;↓<input id="decrypt" type="button" value="復号する" /><br />
<label for="decrypt-text">復号されたテキスト：</label><br />
<textarea id="decrypt-text" class="text-string" rows="4" cols="80"></textarea>

CSS

input[type="button"]{
  color: #009d00;
  width: 128px;
}
.passphrase{
  color: #2200cc;
}
.text-string{
  color: #2200cc;
}

JavaScript

$(function() {

  //======================================================================
  // 暗号化ボタン
  //======================================================================
  $('#encrypt').on('click', function () {
    //パスワードはUTF-8エンコーディング
    var secret_passphrase = CryptoJS.enc.Utf8.parse($('#encrypt-password').val());
    //alert(secret_passphrase.toString(CryptoJS.enc.Utf8));
    var salt = CryptoJS.lib.WordArray.random(128 / 8);
    var key128Bits500Iterations =
        CryptoJS.PBKDF2(secret_passphrase, salt, {keySize: 128 / 8, iterations: 500 });
    //初期化ベクトル（ブロック長と同じ）
    var iv = CryptoJS.lib.WordArray.random(128 / 8);
    //暗号化オプション（IV:初期化ベクトル, CBCモード, パディングモード：PKCS7
    var options = {iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7};
    //暗号化内容のエンコーディングは「UTF-8」
    var message_text = CryptoJS.enc.Utf8.parse($('#encypt-text').val());

    //----------------------------------------------------------------------
    //暗号化
    var encrypted = CryptoJS.AES.encrypt(message_text, key128Bits500Iterations, options);
    //----------------------------------------------------------------------

    //暗号結果データをカンマ（","）で結合してまとめる（復号時にわかるように）
    //（salt + iv + ciphertext)
    var binary_data = CryptoJS.enc.Hex.stringify(salt);
    binary_data += (',' + CryptoJS.enc.Hex.stringify(iv));
    binary_data += (',' + encrypted);
    $('#encypted-data').text(binary_data);
  });

  //======================================================================
  // 復号ボタン
  //======================================================================
  $('#decrypt').on('click', function () {
    // あからじめ仕込んでおいた暗号化データのカンマ","を使って文字列をそれぞれに分割
    var array_rawData = $('#encypted-data').text().split(',');

    var salt = CryptoJS.enc.Hex.parse(array_rawData[0]);  // パスワードSalt
    var iv = CryptoJS.enc.Hex.parse(array_rawData[1]);    // 初期化ベクトル（IV）
    var encrypted_data = CryptoJS.enc.Base64.parse(array_rawData[2]); //暗号化データ本体

    //パスワード（鍵空間の定義）
    var secret_passphrase...