Avant de mettre en œuvre tout ceci, veuillez consulter La réponse de Scott Arciszewski .
Je veux que tu sois très prudent avec ce que je suis sur le point de partager, car je n'ai que peu ou pas de connaissances en matière de sécurité (il y a de fortes chances que j'utilise mal l'API ci-dessous). mettre à jour cette réponse avec l'aide de la communauté .
Comme @richardtallent l'a mentionné dans son respuesta Dans le cadre de l'utilisation de l'API Web Crypto, il existe un support pour l'API Web Crypto, cet exemple utilise donc la norme. Au moment où nous écrivons ces lignes, il existe une 95,88% des navigateurs mondiaux sont supportés .
Je vais vous présenter un exemple utilisant l'API Crypto Web.
Avant de poursuivre, veuillez noter ( Citation de MDN ):
Cette API fournit un certain nombre de primitives cryptographiques de bas niveau. Elle est il est très facile de les utiliser à mauvais escient et le pièges impliqués peuvent être très subtile .
Même en supposant que vous utilisiez correctement les fonctions cryptographiques de base, la gestion sécurisée des clés et la conception globale du système de sécurité sont des éléments essentiels. extrêmement difficile à obtenir et sont généralement le domaine des experts en sécurité.
Des erreurs dans la conception et la mise en œuvre du système de sécurité peuvent rendre la sécurité du système totalement inefficace.
Si vous n'êtes pas sûr de savoir ce que vous faites, vous ne devriez probablement pas utiliser cette API. .
Je respecte beaucoup la sécurité, et j'ai même mis en gras des parties supplémentaires de MDN... Vous avez été prévenu
Maintenant, l'exemple concret...
JSFiddle :
Trouvé ici : https://jsfiddle.net/superjose/rm4e0gqa/5/
Note :
Notez l'utilisation de await
mots-clés. Utilisez-le à l'intérieur d'un async
ou utiliser .then()
y .catch()
.
Générer la clé :
// 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.
Cryptage :
const encryptedUri = await crypto.subtle.encrypt({
name: 'RSA-OAEP'
}, key.publicKey, stringToArrayBuffer(stringToEncrypt))
console.log('The encrypted string is', encryptedUri);
Décryptage
const msg = await crypto.subtle.decrypt({
name: 'RSA-OAEP',
}, key.privateKey, encryptedUri);
console.log(`Derypted Uri is ${arrayBufferToString(msg)}`)
Convertir ArrayBuffer en String (fait en 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;
}
Vous pouvez trouver d'autres exemples ici (je ne suis pas le propriétaire) : // https://github.com/diafygi/webcrypto-examples