【文字列を暗号化】JavaScriptを使ってエンコード、デコードする方法

JavaScriptを使って文字列を暗号化する方法

webアプリや、webサービスを制作している時に特定の文字列を暗号化したい時があると思います。

例えば、会員制のサイトなど構築している際に、URLに会員IDが自動的に振られてしまっている時にURLのID部分の暗号化して別の文字列に置き換えたり、

また暗号化した文字列を再び復元（デコード）させたりする必要もあると思います。

今回はJavaScriptを使ってその方法をご紹介します。

使い方さえわかれば使用できる場面はいくつもあると思うので、ぜひ試してみてください。

JavaScriptのエンコードにも色々種類があるのですが、今回はbase64というものを使う方法をご紹介します。

かなりシンプルで使いやすいので、オススメです。

Base64とは、については説明すると少し複雑になるので、興味のある人はぜひ調べてみてください。バイナリなどと少し関連があります。。。

それではご紹介していきます。

JavaScriptでエンコード（暗号化）する方法

atob()

btoa()

base64を使ったエンコード、デコードの方法には、atob()、btoa()という二つの関数を使います。

エンコードには、btoa()　を使います。

var text =  "hello";

var encodetext = btoa(text);

これでデコードが完了です。非常にシンプルですね。

上のencodetextをconsoleで出力してみると

console.log(encodetext);

aGVsbG8=

となります。helloという文字列が’aGVsbG8=’に変換されました。

これであれば、デコードの方法を知っている人ではない限り何を表しているか全くわりませんよね。

それでは続いて、デコード（復元）の方法をみていきましょう。

JavaScriptでデコード（復元）する方法

それでは、デコードの方法ですが、方法はほとんど上と同じです。

今回は、atob()関数を使用します。

var text =  "hello";

var encodetext = btoa(text);

これがさっき上で行った現在エンコードされた状態ですね。

この状態から１行足して、

var text =  "hello";

var encodetext = btoa(text);


var decodetext = atob(encodetext);

これで完了です。decodetextに、エンコード（暗号化）された”hello”がさらにデコード（復元）されて入っている状態になります。

var decodetext = atob(encodetext);


console.log(decodetext);

"hello"

 デコードした、エンコード済みのhelloが入ったdecodetextを出力すると、元のが無事に出力されます。

まとめ

JavaScriptを使用して、base64でエンコード、デコードする方法について、ご紹介しました。いかがでしたでしょうか。

使い方もかなりシンプルで、それなりに複雑なもし列を生成してくれるので、つかい勝手も良いと思います。

もし必要がある方はこちらの記事を参考にして頂ければと思います。

この記事もおすすめ