勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

  JavaScript

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存したかった。また、Cookieから取り出して利用する際には復号化させたかった。「crypto-js」ライブラリを利用することで実装できる模様。ついでにハッシュ化もできるようなので、暗号・復号化とあわせてそれぞれ実装方法をメモ。

 

crypto-js

GitHub

https://github.com/brix/crypto-js

CDN

CDNで使う場合は以下を記述する。

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

異なるバージョンを使用したい場合は以下から探す。

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

 

利用方法

変数の暗号化・復号化

const pass = 'testpass';
const key = 'key';

//暗号化
const encrypt = CryptoJS.AES.encrypt(pass, key).toString();
console.log(encrypt); //U2FsdGVkX195kzP1KMjcumMaKUOIWPjpva0nymmb5A8=

//復号化
const decrypt = CryptoJS.AES.decrypt(encrypt, key).toString(CryptoJS.enc.Utf8);
console.log(decrypt); //testpass

オブジェクトの暗号化・復号化

const obj = {name : '鈴木', age : 20};
const key = 'key';

//暗号化
const encrypt = CryptoJS.AES.encrypt(JSON.stringify(obj), key).toString();
console.log(encrypt); //U2FsdGVkX18LG267ajuryepk0ZKmHbbW/s5WAoKzXFRYecrSryj7Re/Sz+LvGLF6

//復号化
const decrypt = JSON.parse(CryptoJS.AES.decrypt(encrypt, key).toString(CryptoJS.enc.Utf8));
console.log(decrypt); //Object { name: "鈴木", age: 20 }

ハッシュ化

const pass = 'testpass';

//ハッシュ化
const hash = CryptoJS.SHA256(pass).toString();
console.log(hash); //13d249f2cb4127b40cfa757866850278793f814ded3c587fe5889e889a7a9f6c

 

実用例

本ライブラリの実用例としてhtpasswd生成ページを作成した。内容としてはSHA-1で暗号化したものをBase64エンコードするというものになる。

 - JavaScript

  関連記事

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...

バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法

あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...

JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法

JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...