[HTML5] LocalStorageで保存するデータを暗号化する

HTML5のLocalStorageとは、ブラウザ内に永続的にデータを保存する事が出来る技術です。
この技術はCookie以外の方法でブラウザ内のデータ永続化出来る点で、大変便利なものですが、 保存するデータは暗号化されません。 そのため、ブラウザのデベロッパコンソールなどで簡単に保存したデータを参照する事が可能です。
今回は、LocalStorageで保存するデータをクライアントで暗号化してみる方法をやってみました。

データ保存時に暗号化する

暗号化方式は色々ありますが、今回は比較的簡単なDESの方式を用いました。
まずは、暗号化する為の秘密鍵をユーザーに入力してもらいます。
そしてその秘密鍵を元に、LocalStorageでデータ保存を行う際に、暗号化を行います。

（データを暗号化した例）

http://www.yoheim.net/labo/html5/localstorage/storeAndEncrpt.html

（暗号化してデータ保存するJavaScript）

// テキストボックスに入力されたキーと値を取得する
var key   = document.getElementById("keyText").value;
var value = document.getElementById("valueText").value;

// des.encriptという暗号化関数を呼び出し、暗号化を行う
// 引数のencKeyは、暗号化を行う為の秘密鍵の値を保持する変数です
var encValue = des.encrypt(value, encKey);

// 暗号化した値をLocalStorageに保存する
window.localStorage.setItem(key,encValue);

データを復号化する

暗号化したデータを複合化する際には、LocalStorageから読み出したデータを暗号化の時に利用した秘密鍵を使って、 複合化します。

（データを複合化した例）

http://www.yoheim.net/labo/html5/localstorage/storeAndEncrpt.html

（データを読み出して復号化を行うJavaScript）

// LocalStorageに保存された件数を取得し、１件ずつ読み込む
var size = window.localStorage.length;
for (var i = 0; i < size; i++) {

	// LocalStorageからデータを読み込む
    var key     = window.localStorage.key(i);
     var value  = window.localStorage.getItem(key);

     // 復号化を行う
     var decValue  = des.decrypt(value, encKey);}

     // 表示領域のテーブルに復号化した値を表示する
     // tbodyという変数にテーブルのtbodyを指す値が格納されている
      var content     = "" + key + "" + value + "";
      tbody.innerHTML = tbody.innerHTML +  content;
    }
}

Special Thanks

今回利用したDES暗号化のJavaScript（des.js）は、以下で公開されている内容を利用しました。ありがとうございます。 http://user1.matsumoto.ne.jp/~goma/js/des.html#ptop

最後に

ブラウザ側にデータを残すという事で、企業向けアプリとかならデータを暗号化する事も必要なのかも。
今回利用した方法は、ユーザーに暗号化キーを入力してもらうパスフレーズ方式ですが、 他にも色々とブラウザ側に保存したデータの暗号化は方法が色々とあると思います。
秘密鍵を置く場所（ユーザーの頭の中、ブラウザの中、サーバーの中など）を考えることは大切そうです。