🐶

Web Crypto API を使用して公開鍵方式の暗号化・復号を行う

wado63

2023/01/30 に公開

こんにちは。株式会社スペースマーケットのwado63です。
サーバーを通さずブラウザ間のデータ連携安全にを行うために、Web Crypto APIについて調べたので、記事にまとめたいと思います。

MDNの内容が元になっておりますmm
<a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Crypto_API" style="" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/Web_Crypto_API</a> <a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8" aria-hidden="true"/> この記事で書くこと</h2> <li>Web Crypto APIを使った暗号化・復号の実装について</li> <a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E6%9B%B8%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"/> この記事で書かないこと</h2> <li>暗号化の仕組みについて</li> <li>ブラウザ間のデータ連携について</li> <li>公開鍵・秘密鍵を作成する</li> <li>公開鍵を受け渡しできるようにbase64でencodeする</li> <li>公開鍵を受け取った側で暗号化を行う</li> <li>暗号化をした内容を秘密鍵で復号する</li> <a class="header-anchor-link" href="#1.%E5%85%AC%E9%96%8B%E9%8D%B5%E3%83%BB%E7%A7%98%E5%AF%86%E9%8D%B5%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"/> 1.公開鍵・秘密鍵を作成する</h2> <code>generateKey()</code>で行います。（<a href="https://developer.mozilla.org/ja/docs/Web/API/SubtleCrypto/generateKey#%E5%BC%95%E6%95%B0" target="_blank" rel="nofollow noopener noreferrer">MDN</a>） 第一引数には使用したい暗号化のアルゴリズムに応じたパラメーターを渡します。 今回は公開鍵暗号方式の1つである、RSA暗号を使用するので<code>RsaHashedKeyGenParams</code>を渡します。 第二引数は<code>exportKey()</code>などで鍵を取り出せるようにするかどうかのBoolean、 第三引数で生成した鍵を用いて何ができるかを決めます。 * RSA方式の公開・秘密鍵を生成する const generateKey: Promise&lt;CryptoKeyPair&gt; = () =&gt; window.crypto.subtle.generateKey( name: 'RSA-OAEP', modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]), hash: 'SHA-256', true, ['encrypt', 'decrypt'], (async () =&gt; { const keyPair: CryptoKeyPair = await generateKey() // 鍵の生成 const publicKey: CryptoKey = keyPair.publicKey; // 公開鍵 const privateKey: CryptoKey = keyPair.privateKey; // 秘密鍵 })(); <a class="header-anchor-link" href="#rsahashedkeygenparams%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"/> RsaHashedKeyGenParamsについて</h3> RSAの暗号方式についての理解が必要となります。 僕はこちらの記事で勉強させていただきました。 <iframe id="zenn-embedded__d24348e09918e" src="https://embed.zenn.studio/card#zenn-embedded__d24348e09918e" data-content="https%3A%2F%2Fzenn.dev%2Flilac%2Farticles%2Fbad1900aa8f0c0" frameborder="0" scrolling="no" loading="lazy"/><a href="https://zenn.dev/lilac/articles/bad1900aa8f0c0" style="" target="_blank">https://zenn.dev/lilac/articles/bad1900aa8f0c0</a> 理解しておいた方がもちろん良いですが、初めのうちはこのような定数が入るんだなというぐらいの理解でもいいと思います。 ①: name アルゴリズムの方式で、<code>RsaHashedKeyGenParams</code> のパラメーターを渡す今回の例では <code>RSASSA-PKCS1-v1_5</code>, <code>RSA-PSS</code>, <code>RSA-OAEP</code> が選べます。 ②: modulusLength RSAの法の長さ (bit数）を指定します。 最低2048bitが推奨されており、今回のサンプルは鍵を長期的に保存しないので最低の2048bitです。 ③: publicExponent 公開指数です。他の値を用いるいい理由がない限り65,537 ([0x01, 0x00, 0x01]) を使用します。 bit表記だと65,537が"10000000000000001"となるので推奨されているんですね。 ④： hash 用いるダイジェスト関数の名前を表す文字列です。<code>SHA-256</code>, <code>SHA-384</code>, <code>SHA-512</code> のうちのいずれかを指定できます。　<code>SHA-256</code>で256bitのダイジェスト値を出力します。 <code>SHA-1</code>も選べるようですが脆弱なため、<code>SHA-256</code>より上のものを選んでおくと良いです。 <a class="header-anchor-link" href="#%E5%85%AC%E9%96%8B%E9%8D%B5%E3%82%92%E5%8F%97%E3%81%91%E6%B8%A1%E3%81%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%ABbase64%E3%81%A7encode%E3%81%99%E3%82%8B" aria-hidden="true"/> 公開鍵を受け渡しできるようにbase64でencodeする</h2> 公開鍵を作りましたが、次は<code>exportKey()</code>を使って別の場所で使えるようにします。（<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/exportKey" target="_blank" rel="nofollow noopener noreferrer">MDN</a>） <code>exportKey()</code>の第一引数には、exportする鍵のformatを指定します。 今回は公開鍵をexportするので<code>spki</code>(SubjectPublicKeyInfo)を指定します。 第二引数には先ほど作った公開鍵を指定します。 返り値はArrayBufferとなっているので、textとして受け渡しできるようにstringに変換してからさらにbase64でencodeします。 ArrayBufferとstringの変換についてはMDNでも使用していた、 以下の記事の内容を参考に実装しています。 <iframe id="zenn-embedded__ccd2f80f93c" src="https://embed.zenn.studio/card#zenn-embedded__ccd2f80f93c" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fhow-to-convert-arraybuffer-to-and-from-string%2F" frameborder="0" scrolling="no" loading="lazy"/><a href="https://developer.chrome.com/blog/how-to-convert-arraybuffer-to-and-from-string/" style="" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/how-to-convert-arraybuffer-to-and-from-string/</a> * ArrayBufferをbase64にencodeする const arrayBufferToBase64: (buffer: ArrayBuffer) =&gt; string = ( buffer, ) =&gt; { const str = String.fromCharCode.apply( null, new Uint8Array(buffer) as unknown as number[], return window.btoa(str) * 公開鍵をbase64にencodeする const publicKeyToBase64: ( publicKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (publicKey) =&gt; { const key = await window.crypto.subtle.exportKey('spki', publicKey) return arrayBufferToBase64(key) (async () =&gt; { const keyPair: CryptoKeyPair = await generateKey() // 鍵を生成 const base64PublicKey: string = publicKeyToBase64(keyPair.publicKey) // 公開鍵をbase64にencode })(); <a class="header-anchor-link" href="#%E5%85%AC%E9%96%8B%E9%8D%B5%E3%82%92%E5%8F%97%E3%81%91%E5%8F%96%E3%81%A3%E3%81%9F%E5%81%B4%E3%81%A7%E6%9A%97%E5%8F%B7%E5%8C%96%E3%82%92%E8%A1%8C%E3%81%86" aria-hidden="true"/> 公開鍵を受け取った側で暗号化を行う</h2> 次はbase64でencodeされた公開鍵を使用し、任意の文字列を暗号化します。 外部から受け取った暗号鍵を使用するためには<code>importKey()</code>を使用します。（<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/importKey" target="_blank" rel="nofollow noopener noreferrer">MDN</a>) <code>importKey()</code>の第一引数はexportした際のformatなので<code>spki</code>を指定。 第二引数は公開鍵のArrayBufferを指定する必要があるので、base64を元のArrayBufferに変換しています。 第三引数には鍵生成の時のアルゴリズムに応じたパラメーターを指定します。今回はRSA暗号を使用しているので<code>RsaHashedImportParams</code>です。鍵生成時に指定した<code>RsaHashedKeyGenParams</code>と似た内容なので分かりやすいですね。 第四引数、第五引数は、generateKey()と同じようにexportできるかどうかと、利用用途を指定します。 * base64をArrayBufferに変換する const base64ToArrayBuffer: (base64: string) =&gt; ArrayBuffer = ( base64, ) =&gt; { const str = window.atob(base64) const buf = new ArrayBuffer(str.length) const bufView = new Uint8Array(buf) for (let i = 0, strLen = str.length; i &lt; strLen; i++) { bufView[i] = str.charCodeAt(i) return buf * base64でencodeされた公開鍵をimportする const importBase64PublicKey: ( base64PublicKey: string, ) =&gt; Promise&lt;CryptoKey&gt; = async (base64PublicKey) =&gt; { const key = await window.crypto.subtle.importKey( 'spki', base64ToArrayBuffer(base64PublicKey), name: 'RSA-OAEP', hash: 'SHA-256', false, ['encrypt'], return key </code></pre></div>次に<code>encrypt()</code>を用いて暗号化を行います。(<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt" target="_blank" rel="nofollow noopener noreferrer">MDN</a>) encrypt()の第一引数はアルゴリズムを指定します。RSA暗号を使用しているので、<code>RsaOaepParams</code>を指定します。 第二引数は公開鍵、第三引数には<code>BufferSource</code>が入ります。 今回はテキストを暗号化したいので、TextEncoderでencodeして作ったUint8Arrayを渡しています encryptの返り値はArrayBufferなので、これをstringとして渡しやすいbase64に変換しておきます。 * 暗号化を行う const encryptText: ( text: string, publicKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (text, publicKey) =&gt; { const encoded = new TextEncoder().encode(text) const encryptedBuffer = await window.crypto.subtle.encrypt( name: 'RSA-OAEP', publicKey, encoded, return arrayBufferToBase64(encryptedBuffer) (async() =&gt; { const base64PublicKey = "MIIBIjANBgkqhkiG9w0BAQEF..." // 外部からもらったと仮定 const publicKey = await importBase64PublicKey(base64PublicKey) const encryptedBase64Text = await encryptText("メッセージ", publicKey) })() <a class="header-anchor-link" href="#%E6%9A%97%E5%8F%B7%E5%8C%96%E3%82%92%E3%81%97%E3%81%9F%E5%86%85%E5%AE%B9%E3%82%92%E7%A7%98%E5%AF%86%E9%8D%B5%E3%81%A7%E5%BE%A9%E5%8F%B7%E3%81%99%E3%82%8B" aria-hidden="true"/> 暗号化をした内容を秘密鍵で復号する</h2> 最後に暗号化した内容を復号します。 復号には<code>decrypt()</code>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt" target="_blank" rel="nofollow noopener noreferrer">MDN</a>)を使用します。 先ほどの暗号化した値を複合してみます。 <code>decrypt()</code>の第一引数はアルゴリズム、RSA暗号なので今回は<code>RsaOaepParams</code>を指定します。 第二引数は秘密鍵、第三匹数は復号する<code>BufferSource</code>です。 * 復号を行う const decryptText: ( encryptedBase64Text: string, privateKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (encryptedBase64Text, privateKey) =&gt; { const decryptedBuffer = await window.crypto.subtle.decrypt( name: 'RSA-OAEP', privateKey, base64ToArrayBuffer(encryptedBase64Text), return new TextDecoder().decode(decryptedBuffer) (async() =&gt; { const keyPair = await generateKey() // 公開鍵を外部に渡して、暗号化したテキストを受け取る const encryptedBase64Text = "wz5dKcjoCui20Bl/Z..." // 外部からもらったと仮定 const decryptedText = await decryptText(encryptedBase64Text, keyPair.privateKey) })() これで鍵の生成、暗号化、復号の一連の処理ができました。 慣れない用語やBufferの変換などで最初は戸惑うと思いますが、理解してしまうと意外シンプルな処理でした。 あとは公開鍵の受け渡しや、暗号化したテキストの受け渡しの仕組みを用意すればブラウザ間の通信を安全に行うことができますね。 最後に一連の処理をまとめたものを置いておきます。 鍵の生成、export、import、暗号化、復号を行っています。 * RSA方式の公開・秘密鍵を生成する const generateKey: () =&gt; Promise&lt;CryptoKeyPair&gt; = () =&gt; window.crypto.subtle.generateKey( name: 'RSA-OAEP', modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]), hash: 'SHA-256', true, ['encrypt', 'decrypt'], * ArrayBufferをbase64にencodeする const arrayBufferToBase64: (buffer: ArrayBuffer) =&gt; string = ( buffer, ) =&gt; { const str = String.fromCharCode.apply( null, new Uint8Array(buffer) as unknown as number[], return window.btoa(str) * base64をArrayBufferに変換する const base64ToArrayBuffer: (base64: string) =&gt; ArrayBuffer = ( base64, ) =&gt; { const str = window.atob(base64) const buf = new ArrayBuffer(str.length) const bufView = new Uint8Array(buf) // eslint-disable-next-line no-plusplus for (let i = 0, strLen = str.length; i &lt; strLen; i++) { bufView[i] = str.charCodeAt(i) return buf * 公開鍵をbase64にencodeする const publicKeyToBase64: ( publicKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (publicKey) =&gt; { const key = await window.crypto.subtle.exportKey('spki', publicKey) return arrayBufferToBase64(key) * base64でencodeされた公開鍵をimportする const importBase64PublicKey: ( base64PublicKey: string, ) =&gt; Promise&lt;CryptoKey&gt; = async (base64PublicKey) =&gt; { const key = await window.crypto.subtle.importKey( 'spki', base64ToArrayBuffer(base64PublicKey), name: 'RSA-OAEP', hash: 'SHA-256', false, ['encrypt'], return key * 暗号化を行う const encryptText: ( text: string, publicKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (text, publicKey) =&gt; { const encoded = new TextEncoder().encode(text) const encryptedBuffer = await window.crypto.subtle.encrypt( name: 'RSA-OAEP', publicKey, encoded, return arrayBufferToBase64(encryptedBuffer) * 復号を行う const decryptText: ( encryptedBase64Text: string, privateKey: CryptoKey, ) =&gt; Promise&lt;string&gt; = async (encryptedBase64Text, privateKey) =&gt; { const decryptedBuffer = await window.crypto.subtle.decrypt( name: 'RSA-OAEP', privateKey, base64ToArrayBuffer(encryptedBase64Text), return new TextDecoder().decode(decryptedBuffer) (async () =&gt; { const keyPair = await generateKey(); const publicKeyText = await publicKeyToBase64(keyPair.publicKey); const publicKey = await importBase64PublicKey(publicKeyText); const message = "あいうえお"; const encryptedText = await encryptText( message, publicKey const decryptedText = await decryptText( encryptedText, keyPair.privateKey console.log(decryptedText); // "あいうえお" })(); 今回の処理をテストに乗せたかったですが、Web Crypto APIはNode v19からfull supportとなるので今回は諦めました🫠　Node v19であれば今回のコードがNode.js上でも動かせます。 スペースマーケットでは、一緒にサービスを成長させていくメンバーを募集中です。 開発者だけでなくビジネスサイドとも距離感が近くて、風通しがとてもよい会社ですのでとても仕事がしやすいです。 とりあえずどんなことしているのか聞いてみたいという方も大歓迎です！ ご興味ありましたら是非ご覧ください！ <iframe id="zenn-embedded__f07fe9dddcac9" src="https://embed.zenn.studio/card#zenn-embedded__f07fe9dddcac9" data-content="https%3A%2F%2Fwww.wantedly.com%2Fprojects%2F1113570" frameborder="0" scrolling="no" loading="lazy"/><a href="https://www.wantedly.com/projects/1113570" style="" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/projects/1113570</a> <iframe id="zenn-embedded__408b6af84cca8" src="https://embed.zenn.studio/card#zenn-embedded__408b6af84cca8" data-content="https%3A%2F%2Fwww.wantedly.com%2Fprojects%2F1113544" frameborder="0" scrolling="no" loading="lazy"/><a href="https://www.wantedly.com/projects/1113544" style="" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/projects/1113544</a> <iframe id="zenn-embedded__c7af96eeb69b4" src="https://embed.zenn.studio/card#zenn-embedded__c7af96eeb69b4" data-content="https%3A%2F%2Fwww.wantedly.com%2Fprojects%2F1061116" frameborder="0" scrolling="no" loading="lazy"/><a href="https://www.wantedly.com/projects/1061116" style="" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/projects/1061116</a> <iframe id="zenn-embedded__ea5c08daf16ed" src="https://embed.zenn.studio/card#zenn-embedded__ea5c08daf16ed" data-content="https%3A%2F%2Fspacemarket.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"/><a href="https://spacemarket.co.jp/recruit/engineer/" style="" target="_blank" rel="nofollow noopener noreferrer">https://spacemarket.co.jp/recruit/engineer/</a>