Note
この記事は はてなエンジニア Advent Calendar 2024 - Hatena Developer Blog の 37日目（1/6）です。アドベントカレンダーってなんだっけと思ってきますが考えてはいけません。はてなのアドベントカレンダーは1月いっぱいまでやっているのです。
Note
昨日36日目の記事は
id:yunagi_n さんの「Minecraft サーバーの状況を Mackerel で監視する - なつねこメモ」でした。Mackerel のメトリクスでプレイ中のユーザーが分かるのは面白いですね、ここから「〇〇人がログイン中」みたいな表記を作れたりしないだろうか…と思いながら読んでいました！
Web Crypto API は知っているか！
Web Crypto API というものがあります。Web の API ですが、この API を使うことで 乱数生成 や 共有鍵暗号、署名などができます。
ここでは、APIの使い方については解説しないためもし気になるならぜひ調べてみてください！結構前からあるAPIなので主要なブラウザはほぼ対応しているのでもしかすると仕事でも使うことができるかもしれません。
この API で AES という共通鍵暗号アルゴリズムを実装することが可能です。しかし、フロントエンドで暗号化、復号化した際にどれくらい処理に時間がかかるのか気になりませんか？私は気になります。
私の知識では、公開鍵暗号より共通鍵暗号のほうが処理に時間がかからないのでそこまでパフォーマンスは悪く無いと思っています。
レギュレーション
計測のために、専用のリポジトリを作成しました。内部は Vite + React です。使用する暗号化アルゴリズムは AES-GCM で、暗号化と復号化を行いそれぞれの時間を計測します。
| - | - |
|---|---|
| 暗号化アルゴリズム | AES-GCM |
tagLength |
128bit |
| iv長 | 92 |
| 鍵長 | 256bit |
| 鍵導出 | PBKDF2 |
計測するページは、 GitHub Actions でデプロイして様々なデバイスで検証できるようにしています。ご自由にお試しください。
また、暗号化・復号化するデータは文字形式や文字長で複数ケースを用意しました。
さらに、今回計測するのは私の手元にある以下のデバイスで行いたいと思います。
| デバイス名 | OS | ブラウザ | 備考 |
|---|---|---|---|
| デスクトップPC | Windows | Chrome | Intel Core i9-9900k, 32GB RAM, RTX2080 |
| MacBook Air M1 2020 | MacOS Sequoia 15.2 | Chrome | |
| iPhone13 | iOS 18.2 | Safari | |
| iPad Air M2 13inch | iPadOS 18.2 | Safari |
結果
デスクトップPC
| 種類 | エンコード時間 | デコード時間 |
|---|---|---|
| 日本語長文 | 0.100ms | 0.100ms |
| default | 0.100ms | 0.000ms |
| 日本語 | 0.100ms | 0.100ms |
| 1000文字アルファベット | 0.100ms | 0.100ms |
| emoji | 0.100ms | 0.100ms |
| 1000文字日本語 | 0.100ms | 0.100ms |
MacBook Air M1 2020
| 種類 | エンコード時間 | デコード時間 |
|---|---|---|
| 日本語長文 | 0.200ms | 0.100ms |
| default | 0.100ms | 0.200ms |
| 日本語 | 0.100ms | 0.100ms |
| 1000文字アルファベット | 0.200ms | 0.000ms |
| emoji | 0.100ms | 0.100ms |
| 1000文字日本語 | 0.100ms | 0.000ms |
iPhone13
| 種類 | エンコード時間 | デコード時間 |
|---|---|---|
| 日本語長文 | 1.00ms | 0.000ms |
| default | 0.000ms | 0.000ms |
| 日本語 | 0.000ms | 0.000ms |
| 1000文字アルファベット | 0.000ms | 0.000ms |
| emoji | 2.000ms | 0.000ms |
| 1000文字日本語 | 1.000ms | 0.000ms |
iPad Air M2 13inch
| 種類 | エンコード時間 | デコード時間 |
|---|---|---|
| 日本語長文 | 0.000ms | 1.000ms |
| default | 0.000ms | 0.000ms |
| 日本語 | 0.000ms | 0.000ms |
| 1000文字アルファベット | 1.000ms | 0.000ms |
| emoji | 1.000ms | 0.000ms |
| 1000文字日本語 | 0.000ms | 0.000ms |
ほぼほぼ 1ms 以下で暗号化・復号化できますね。本当は複数回やって計測するのがいいのですがまあ、今回はレポートではないので誤差とさせてください。
まとめ
Web Crypto API を使用した AES暗号はどのデバイスでも 1ms 以下で暗号化、復号化できるのであまりパフォーマンスは考えなくてもいいと思います。次回思いついたら公開鍵暗号もパフォーマンス計測したいです。
あと、今回は Android 端末で検証できていないので試したいですね。
余談
今回、GitHub - cateiru/web-crypto-api-measurement を作成するにあたり Chakra UI V3 を使ってみたのですが V2 と使い勝手が大きく変わり、必要なコンポーネントは npx することで components/ui/* にそのコンポーネントが作成されるような仕様でした。RSC 対応の影響かと思うのですが、 V2 からの移行は厳しいなという感想でした。 Perl 5 と 6 や Python 2 と 3 ぐらい違うので皆様お気をつけください。
