LoginSignup
22
18

More than 1 year has passed since last update.

crypto-jsを使って簡単に暗号化・ハッシュ化する方法

Last updated at Posted at 2020-04-15

はじめに

今回、JavaScriptの暗号化用ライブラリ、「crypto-js」を使う機会があったので、

その際に得た知見をメモ、共有するために記事を執筆します!

それでは行きましょう!

crypto-jsとは何か

crypto-jsのGitHubリポジトリはこちらです。

用途としては、パスワードや何かしらの値を暗号化、ハッシュ化したいときに使用します。

READMEに書いてあるとおり、非常にシンプルに使用することができます。

。。が、ここで落とし穴が!

ドキュメントの通り、AESで暗号化しようとしたところ、いくつかハマりどころがあったので以下で解説します。

これからcrypto-jsを使おうとしている方、それから未来の自分に対してメモを残します笑

AESで簡単に暗号化する

AESで暗号化するためには、まずcrypto-jsのパッケージをインストールしましょう。

npm i crypto-js

package.jsonにcrypto-jsが追加されていることを確認したら、

任意のファイルでインポートします。

import crypto from 'crypto-js'

インポートできたら、あとは暗号化したい値にcryptoの暗号化メソッドを使うだけです。

const encrypted = crypto.AES.encrypt('hogehoge', 'key')
console.log(encrypted.toString())

上記のコードでhogehogeという文字列を暗号化でき、最終的にtoString()で文字列として出力しています。

toString()しないとオブジェクトで出力されるので注意してください。

AESを使用した暗号化でハマるポイントとしては、

  • 公式ドキュメントに書いてあるメソッドの使い方だと暗号化できない
  • 暗号化したモノは、toString()してやらないと暗号化した値を表示できない

などがありました。

また、encryptメソッドの引数は、第一引数に暗号化したい文字列、第二引数に鍵にする文字列を渡します。

keyに渡す値はdot.envなどで保持して使用する。。などの使用法が考えられますね!

ちなみに、復号化は下記のようなコードになります。

const decrypted = crypto.AES.decrypt(encrypted, 'key')
console.log(decrypted.toString())

decryptメソッドで復号できます。

decryptメソッドの引数は、第一引数に暗号化した値(オブジェクトでも文字列でも良い)、第二引数に暗号化の際に使用したのと同じ鍵(文字列)です。

(余談)暗号化とハッシュ化の違いとは?

今回は、AESで暗号化してみましたが、SHAを使えばハッシュ化も同じ要領で行うことができます。

では、暗号化とハッシュ化の違いとはなんなのでしょうか?

一言で言うと、

暗号化 → 復号する必要がある

ハッシュ化 → 復号する必要がない

と言うことです。

今回僕は暗号化した値を後々復号化する必要があったのでAESを使用して暗号化しましたが、

ユーザー登録に使うパスワードなどに関しては、ハッシュ化してDBに保存するのが一般的かと思います。

(パスワードはハッシュとして保存しておき、ログインする際などは入力した値を同じようにハッシュ化して、ハッシュ化した値同士で照合を行うため)

あとがき

暗号化に関しては初めて触れました。

かなり難しい内容が盛り沢山な分野な気がするので、少しずつ勉強していきたいなあ。。

22
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
18