JavaScript JQuery crypto-jsを使って暗号化と復号を行う方法について

2021/12/27

crypto-js を使って文字列（データ）を暗号化、及び復号化を行う方法を記したいと思います。

このモジュールの中の AES(Advanced Encryption Standard) の機能を使って処理を行います。

AES とはなにかと言いますと Advanced Encryption Standard の略で、無線LANなどの通信データの暗号化に用いられるアルゴリズムの様です。
通信の送信側と受信側で、同じ暗号鍵を用いて暗号化と復号を行います。

crypto-js は以下のサイトにありますので、リンクをソースに貼れば参照できます。

⇒https://cdnjs.com/libraries/crypto-js

さて実際に crypto-js を使う例を示します。
暗号化するには CryptoJS.AES.encrypt 、復号化するには CryptoJS.AES.decrypt メソッドを使います。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445

復号化した文字列をよく見ると HEX文字列となっています。
このままでは使えないので crypto-js がもつ uft8 用のエンコーダで文字列にしてやります。
上のソースに1行追加して以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445
utf8     :12345ABCDE

■オブジェクトを暗号化・復号化の処理

上記の例では文字列を暗号化・復号化することは出来ました。そこでこの処理を拡張して、オブジェクトデータについても暗号化・復号化させてみます。

オブジェクトを先ず JSON 文字列として作成し、それを暗号化します。復号の場合には逆の考えですので、復号化された JSON 文字列をオブジェクトとして戻します。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	//オブジェクト宣言
	var obj = {
		data1: "12345ABCDE",
		data2: "あいうえお",
		data3: 12345
	}

	//JSON文字列に変換
    var src = JSON.stringify(obj);
	//暗号化
    var des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('source:' + src);
    console.log('Crypto:' + des);

	//復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
	//UTF-8文字列変換
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
	//オブジェクトに戻す
	var objDes = JSON.parse(decrypt);
	console.log('obj.data1:' + objDes.data1);
	console.log('obj.data2:' + objDes.data2);
	console.log('obj.data3:' + objDes.data3);
}
</script>
</head>
<body>
    <h2>test crypto-js 3</h2>

    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
確かにオブジェクトが暗号化されて、その後復号化しオブジェクトの各項目を参照できることが分かります。

source:{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
Crypto:U2FsdGVkX19pPVoeRzc/ZjN1jKNIzi13I543cTbiNhMQ4Q3Tnn6AD0GILW1a4LCoN3b8Zh5qhbCul1RTymiwPMZFkiIGlweGu0vukHq2YD8=
utf8     :{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
obj.data1:12345ABCDE
obj.data2:あいうえお
obj.data3:12345

VB.NET-TIPS などプログラミングについて

■オブジェクトを暗号化・復号化の処理

関連する記事

コメント