Web上でパスワード不要のE2E暗号化してセキュアにファイル転送をしたい

## なにを目指しているか？

多くのクラウドストレージやメールを使ったファイル転送ではクライアントとサーバー間の暗号化はされています。ですが、その多くの場合サーバー内では生のデータもしくは暗号化されていてもサーバー内で復号可能の場合が多いと思います。
そこで送受信を行う**端末間でエンドツーエンド暗号化(E2E暗号化)してサーバー側にも分からない形してサーバーを信じなくても良い、より高度なセキュリティ**を目指したいです。

それと同時に**安全性かつ手軽にファイルを転送**を重視したいです。
一般にセキュリティを強めると不便になったりして、安全性と利便性にトレードオフがあると思います。このトレードオフをなるべく解決して、安全性と利便性の両立して安全性と手軽さを両立することを考えました。ユーザーのパスワードの入力不要で、手軽にセキュアに転送するために使った技術に関して後述します。

### アプリケーション

![piping-ui-passwordless.mp4.opt.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/732aa6af-e067-73d2-346b-4e047bce53ae.gif)

Piping UIと呼んでいて以下のURLでスマホやPCなどブラウザが使えるデバイスで利用できます。
<https://piping-ui.org>  

GitHub: <https://github.com/nwtgck/piping-ui-web>  

以下に暗号化以外の話があります。
<https://qiita.com/nwtgck/items/2dd47031ba729256f5eb>  

#### 埋め込みアプリ
<p class="codepen" data-height="700" data-theme-id="default" data-default-tab="result" data-user="nwtgck" data-slug-hash="gOpaGvz" style="height: 100px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Piping UI Embed">
  <span>See the Pen <a href="https://codepen.io/nwtgck/pen/gOpaGvz">
  Piping UI Embed</a> by Ryo Ota (<a href="https://codepen.io/nwtgck">@nwtgck</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Piping UIにおけるパスワードなしのE2E暗号化

パスワード不要というのはファイルを暗号化するパスワードが一切不要ということです。よく話題になるパスワード付きZIPのパスワードのようなものが一切不要で、転送ごとに暗号化用の鍵がランダムに変わります。その鍵は256ビットなので$2^{256} = 115792089237316195423570985008687907853269984665640564039457584007913129639936$の組みわせがあります。

つまり通信ごとに変わる一度しか使われない鍵に**115792892無量大数3731不可思議6195那由他4235阿僧祇7098恒河沙5008極6879載785正3269澗9846溝6564穣564𥝱394垓5758京4007兆9131億2963万9936**の膨大な鍵の組み合わせが考えられます。ユーザーが記憶できるパスワードの数や長さの限界を超えたセキュリティが実現できるのではと思います。

そのため、例え暗号データを傍受した悪い人にパスワードを言うように脅されたとしても、**原理的に
誰もその鍵を教えることはできなく安心**です(脅されるとか多分ないけど)。

この鍵を使ってブラウザ側で暗号化を施すためサーバー側を信用できなくても安心して転送が可能です。速度の心配もあるかもしれないので、ブラウザ側での暗号化周りの速度に関して後述します。

## パスワード不要でE2E暗号化する技術

### 楕円曲線ディフィー・ヘルマン鍵共有 (ECDH)
ユーザーのパスワード入力不要で信頼できない通信路で暗号化する方法は様々あり、その中でも[楕円曲線ディフィー・ヘルマン鍵共有 (ECDH)](https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86%E6%9B%B2%E7%B7%9A%E3%83%87%E3%82%A3%E3%83%95%E3%82%A3%E3%83%BC%E3%83%BB%E3%83%98%E3%83%AB%E3%83%9E%E3%83%B3%E9%8D%B5%E5%85%B1%E6%9C%89)を利用しています。

ECDHでは、送信者と受信者が互いに公開鍵と秘密鍵を作って、そのうちの公開鍵同士を交換します。互いに公開鍵とそれぞれ持っている別々の秘密鍵から送信者と受信者で同じ乱数値が生成できるようになります。その送信者と受信者で同じ値になる乱数値を共有鍵として利用できます。楕円曲線を使わない素数とmod演算を使ったディフィー・ヘルマン鍵共有に関しての数学的説明は「[ディフィー・ヘルマン鍵共有の仕組み - 小人さんの妄想](https://rikunora.hatenablog.com/entry/20120514/p1)」が分かりやすかったです。

楕円曲線における足し算のざっくりとした数学的なイメージを掴むには「[仮想通貨ファンなら楕円曲線暗号も好きになろう | ALIS](https://alis.to/yoshihiro/articles/KmQYMwQbNPOZ)」が分かりやすかったです。


### Web Crypto API

どのように楕円曲線ディフィー・ヘルマン鍵共有 (ECDH)をブラウザ上で実現するかに関してです。
Web標準で[Web Crypto API](https://developer.mozilla.org/ja/docs/Web/API/Web_Crypto_API)が用意されていて多くのブラウザ上で利用可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/51c86416-3ac6-3e87-0d20-821135a2e2ed.png)


ECDHのキーペアは以下のようにシンプルに生成可能です。

```js
const keyPair = await window.crypto.subtle.generateKey(
  { name: 'ECDH', namedCurve: 'P-256'},
  false,
  ['deriveKey', 'deriveBits']
);
```
また`crypto.subtle.exportKey()`を使えばJSON Web Key (JWK)として取得可能で、通信の時も扱いやすいJSONが手に入ります。Web Crypto APIを使った暗号化の流れのサンプルは「[WebCrypto APIでECDH鍵交換を用いた暗号化を使ってみる - Qiita](https://qiita.com/tomoyukilabs/items/eac94fdb2d0ca92f443a)」などにあります。鍵生成などの速度に関して後述していて、その中のCodepenもサンプルコードになるかもしれません。

### OpenPGP.js
ECDHで送信者と受信者で共通鍵の共有ができた後、OpenPGPの形式で共通鍵での暗号化をしています。その際に[OpenPGP.js](https://github.com/openpgpjs/openpgpjs)を利用しています。パスワード付きで暗号化する機能を`gpg`コマンドと`curl`コマンドでCLIからでもブラウザからでも扱いやす
くするためにOpenPGPを使っています。
詳しくは「[Piping UI: セキュアにOpenPGPで暗号化してファイル転送する技術周り - nwtgck / Ryo Ota](https://scrapbox.io/nwtgck/Piping_UI:_%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%ABOpenPGP%E3%81%A7%E6%9A%97%E5%8F%B7%E5%8C%96%E3%81%97%E3%81%A6%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%BB%A2%E9%80%81%E3%81%99%E3%82%8B%E6%8A%80%E8%A1%93%E5%91%A8%E3%82%8A)」にまとめています。


## どれぐらいブラウザでの暗号化などは速いのか？

最初、ブラウザで鍵生成したり暗号化・復号って時間かかりそうと思っていましたが、**実際のところかなり速い**です。

僕の環境では、Web Cryptoで以下の一連の処理を**100回**しても**220ミリ秒**ぐらいです。
iPad miniでも624ミリ秒でした。

 - ECDHのキーペアの生成 x 2
 - 公開鍵をJSONにエクスポート x 2
 - ランダムな初期化ベクトル(IV)の生成
 - ECDHによる共通鍵の導出 x 2
 - AES-GCMでの暗号化
 - 復号
 - 生データと復号後のデータの一致の比較
   - `JSON.stringify()`を使った遅そうな比較処理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/402edfe2-e92d-299b-a6a0-7cf40b742113.png)
お試し用Codepen: <https://codepen.io/nwtgck/pen/NWWeLQg?editors=0011>
上記のCodepenのJavaScript欄はWeb CryptoでのECDHの鍵生成やJSONへのエクスポートなど方法の参考にもなると思います。
「[WebCrypto APIでECDH鍵交換を用いた暗号化を使ってみる - Qiita](https://qiita.com/tomoyukilabs/items/eac94fdb2d0ca92f443a)」を参考にしています。

この速度ならWebフロントエンドで暗号化/復号しても良さそうだと思いました。OpenPGP.jsだと`ReadableStream`を暗号化/復号可能で、たとえばダウンロードと復号を同時に行うことが可能です。

## Piping UIにおける鍵共有と暗号化の流れ

1. ECDHの公開鍵を送信者と受信者間で交換する。
1. 送信者と受信者がそれぞれ公開鍵から共有鍵を算出する。
1. 送信するユーザーが受信者の確認コードを確認する。
1. 送信するユーザーの確認して送信を開始する。

以下が鍵共有に対応するコードです。
<https://github.com/nwtgck/piping-ui-web/blob/37e302e031ec11582401684194419268fd5adabc/src/piping-ui-utils.ts#L96-L149>

確認コードがある理由は中間者攻撃が防ぐためです。たとえ暗号化していても悪意のある中間者に向かって暗号化して送信する可能性があるため、送信者が想定している受信者なのかを確認できるようにしています。一番防ぎたいのはデータが想定してない受信者に漏れることなので送信者が受信者を確認するようになっています。

ただクライアントとサーバー間はHTTPSで通信路は守られていて、中間者攻撃するためにはサーバーをクラックするか、もともと悪意のあるサーバーでないといけないなど中間者攻撃の可能性は低いかもしれません。

確認コードは送信者と受信者のJWKの公開鍵のthumbprintをハッシュ化して合わせたものです (<https://github.com/nwtgck/piping-ui-web/blob/37e302e031ec11582401684194419268fd5adabc/src/piping-ui-utils.ts#L151-L159>)。

Piping UIの転送は、自分の他のデバイスや物理的に近くの人や電話越しの相手など想定しているため、その時に確認コードを伝えること想定しています。その場で転送をするという点でAirDropのマルチデバイス間で使える版に近いかもしれません。

## Piping Server
Piping UIの転送の基盤に[Piping Server](https://github.com/nwtgck/piping-server)を使っています。詳しい説明やセルフホストして自前でサーバーを立てて更にセキュアにしたい場合は「[ネットワーク越しでパイプしたり、あらゆるデバイス間でデータ転送したい！ - Qiita](https://qiita.com/nwtgck/items/78309fc529da7776cba0)」が参考になると思います。Herokuや`docker run`ですぐに立てる方法を紹介しています。

## 最後に

パスワードを決めたり覚えたりする必要がなく安全に便利にPiping UIで転送できるようになりました。
ですが、パスワードなしでE2E暗号化するということは特に新しくなく枯れた技術なのではないかと思います。よく広まっているHTTPSも、当たり前ですがデータを暗号化するためにユーザーのパスワードはなく、クライアントとサーバー間で暗号化していて同じことなのではと思います。

<!--
論点が逸れるので見送り。

## HTTPの可能性

Piping UIの基盤になっているPiping ServerがHTTPを使っています。そこで疑問になるのがHTTPでの巨大なデータを長時間のストリーミングに関してです。
「[ネットワーク越しでパイプしたり、あらゆるデバイス間でデータ転送したい！ - Qiita](https://qiita.com/nwtgck/items/78309fc529da7776cba0#http%E3%81%A7%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E8%BB%A2%E9%80%81%E3%81%AE%E5%8F%AF%E8%83%BD%E6%80%A7)」ではローカルで立てたサーバーに関して触れましたが、今回はリモートでの実験に関して触れたいと思います。

リモートのPiping Serverへ**1811時間連続(約75日)で35テラバイト**のデータが転送されていて現在も進行中です。
この結果からHTTPで長時間大量のデータを通信し続けられる可能性があることを示しているのではないかと思っています。
![piping-server-remote-long.mp4.opt.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84451/bd74fed1-b8f2-f0d9-8b2f-405f3b508885.gif)

ストリーミングに関しても強くなったHTTP/2や今後UDPなので更なる高速化が期待できるHTTP/3など、
WebページやREST APIだけではないHTTPの可能性も信じています。

-->