これを実装する前に、Scott Arciszewskiの回答を参照してください。
私はセキュリティの知識をほとんどまたはまったく持っていないので、これから共有する内容に細心の注意を払ってください（以下のAPIを誤用している可能性が高いため）、この回答を更新していただければ幸いですコミュニティの助けを借りて。
@richardtallentが彼の回答で述べたように、Web Crypto APIのサポートがあるため、この例では標準を使用しています。これを書いている時点では、95.88％のグローバルブラウザサポートがあります。ます。
Web Crypto APIを使用して例を共有します
続行する前に、注意してください（MDNからの引用）：
このAPIは、多くの低レベルの暗号プリミティブを提供します。それはだ、それらを悪用することは非常に簡単で、そして落とし穴関与をすることができ非常に微妙。
基本的な暗号化機能を正しく使用していると仮定しても、安全なキー管理とセキュリティシステム全体の設計を正しく行うことは非常に難しく、通常はセキュリティの専門家が担当します。
セキュリティシステムの設計と実装のエラーは、システムのセキュリティを完全に無効にする可能性があります。
自分が何をしているかわからない場合は、このAPIを使用しないでください。
私はセキュリティを非常に尊重し、MDNからの追加部分も太字にしてい ます... あなたは警告されまし
た、実際の例に...
JSFiddle：
ここにあります：https : //jsfiddle.net/superjose/rm4e0gqa/5/
注意：
awaitキーワードの使用に注意してください。async関数内で使用するか、.then()およびを使用し.catch()ます。
キーを生成します。
// https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey
// https://developer.mozilla.org/en-US/docs/Web/API/RsaHashedKeyGenParams
// https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
const stringToEncrypt = 'https://localhost:3001';
// https://github.com/diafygi/webcrypto-examples#rsa-oaep---generatekey
// The resultant publicKey will be used to encrypt
// and the privateKey will be used to decrypt.
// Note: This will generate new keys each time, you must store both of them in order for
// you to keep encrypting and decrypting.
//
// I warn you that storing them in the localStorage may be a bad idea, and it gets out of the scope
// of this post.
const key = await crypto.subtle.generateKey({
name: 'RSA-OAEP',
modulusLength: 4096,
publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
hash: {name: 'SHA-512'},
}, true,
// This depends a lot on the algorithm used
// Go to https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto
// and scroll down to see the table. Since we're using RSA-OAEP we have encrypt and decrypt available
['encrypt', 'decrypt']);
// key will yield a key.publicKey and key.privateKey property.
暗号化：
const encryptedUri = await crypto.subtle.encrypt({
name: 'RSA-OAEP'
}, key.publicKey, stringToArrayBuffer(stringToEncrypt))
console.log('The encrypted string is', encryptedUri);
解読する
const msg = await crypto.subtle.decrypt({
name: 'RSA-OAEP',
}, key.privateKey, encryptedUri);
console.log(`Derypted Uri is ${arrayBufferToString(msg)}`)
ArrayBufferを文字列から前後に変換する（TypeScriptでは完了）：
private arrayBufferToString(buff: ArrayBuffer) {
return String.fromCharCode.apply(null, new Uint16Array(buff) as unknown as number[]);
}
private stringToArrayBuffer(str: string) {
const buff = new ArrayBuffer(str.length*2) // Because there are 2 bytes for each char.
const buffView = new Uint16Array(buff);
for(let i = 0, strLen = str.length; i < strLen; i++) {
buffView[i] = str.charCodeAt(i);
}
return buff;
}
あなたはここでより多くの例を見つけることができます（私は所有者ではありません）：// https://github.com/diafygi/webcrypto-examples