在 JavaScript 中实现数据加密与解密:Web Cryptography API 与 CryptoJS详解

_midnight 2024-07-11 17:03:01 阅读 71

在 JavaScript 中,可以使用 Web Cryptography API 或第三方库如 <code>crypto-js 来实现加密和解密。本文将介绍如何使用这两种方法在客户端进行数据的加密和解密。

在这里插入图片描述

使用 Web Cryptography API

Web Cryptography API 是现代浏览器提供的一个强大、原生的加密 API。它允许在客户端进行加密、解密、签名和验证等操作。

生成密钥对

首先,生成一个 RSA 密钥对:

<code>async function generateKeyPair() {

const keyPair = await window.crypto.subtle.generateKey(

{

name: "RSA-OAEP",

modulusLength: 2048,

publicExponent: new Uint8Array([1, 0, 1]),

hash: "SHA-256"

},

true,

["encrypt", "decrypt"]

);

const publicKey = await window.crypto.subtle.exportKey("spki", keyPair.publicKey);

const privateKey = await window.crypto.subtle.exportKey("pkcs8", keyPair.privateKey);

return {

publicKey: publicKey,

privateKey: privateKey

};

}

generateKeyPair().then(keyPair => {

console.log("Public Key:", arrayBufferToBase64(keyPair.publicKey));

console.log("Private Key:", arrayBufferToBase64(keyPair.privateKey));

});

加密数据

使用公钥加密数据:

async function encryptData(data, publicKey) {

const publicKeyBuffer = base64ToArrayBuffer(publicKey);

const cryptoKey = await window.crypto.subtle.importKey(

"spki",

publicKeyBuffer,

{

name: "RSA-OAEP",

hash: "SHA-256"

},

true,

["encrypt"]

);

const encodedData = new TextEncoder().encode(data);

const encryptedData = await window.crypto.subtle.encrypt(

{

name: "RSA-OAEP"

},

cryptoKey,

encodedData

);

return arrayBufferToBase64(encryptedData);

}

解密数据

使用私钥解密数据:

async function decryptData(encryptedData, privateKey) {

const privateKeyBuffer = base64ToArrayBuffer(privateKey);

const cryptoKey = await window.crypto.subtle.importKey(

"pkcs8",

privateKeyBuffer,

{

name: "RSA-OAEP",

hash: "SHA-256"

},

true,

["decrypt"]

);

const encryptedBuffer = base64ToArrayBuffer(encryptedData);

const decryptedData = await window.crypto.subtle.decrypt(

{

name: "RSA-OAEP"

},

cryptoKey,

encryptedBuffer

);

return new TextDecoder().decode(decryptedData);

}

工具函数

用于在 ArrayBuffer 和 Base64 之间转换的工具函数:

function arrayBufferToBase64(buffer) {

let binary = '';

const bytes = new Uint8Array(buffer);

const len = bytes.byteLength;

for (let i = 0; i < len; i++) {

binary += String.fromCharCode(bytes[i]);

}

return window.btoa(binary);

}

function base64ToArrayBuffer(base64) {

const binaryString = window.atob(base64);

const len = binaryString.length;

const bytes = new Uint8Array(len);

for (let i = 0; i < len; i++) {

bytes[i] = binaryString.charCodeAt(i);

}

return bytes.buffer;

}

使用 CryptoJS

crypto-js 是一个流行的 JavaScript 库,用于实现加密和解密。它支持多种加密算法,如 AES、DES、HMAC、SHA 等。

安装 CryptoJS

首先,安装 crypto-js

npm install crypto-js

使用 AES 加密和解密

const CryptoJS = require('crypto-js');

// 加密数据

function encryptData(data, secretKey) {

return CryptoJS.AES.encrypt(data, secretKey).toString();

}

// 解密数据

function decryptData(encryptedData, secretKey) {

const bytes = CryptoJS.AES.decrypt(encryptedData, secretKey);

return bytes.toString(CryptoJS.enc.Utf8);

}

const secretKey = 'my-secret-key';

const data = 'Hello, World!';

const encryptedData = encryptData(data, secretKey);

console.log('Encrypted Data:', encryptedData);

const decryptedData = decryptData(encryptedData, secretKey);

console.log('Decrypted Data:', decryptedData);

结论

通过本文,你可以了解如何在 JavaScript 中使用 Web Cryptography API 和 crypto-js 库进行数据的加密和解密。Web Cryptography API 提供了现代浏览器中的原生加密功能,而 crypto-js 则是一个功能强大的第三方库,适用于 Node.js 和浏览器环境。如果有任何问题或需要进一步的帮助,请在评论区留言或者联系我。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。