JavaScript前端的AES加密与解密实现

原创已于 2022-03-07 10:01:57 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-03-07 09:59:17 首次发布

JavaScrip学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用CryptoJS库进行AES加密和解密，包括仅使用密钥的简单加密解密，以及使用密钥和偏移量的CBC模式加密解密。示例代码详细展示了加密和解密的步骤，并提供了一个在线验证网址供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于JavaScript的AES加密与解密实现

一、CDN插件

地址：https://cdnjs.com/libraries/crypto-js
可以直接引用线上CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js" integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
或者保存到本地文件

二、具体实现

1. 字段解释

key：密钥，16/24/32位
iv：偏移量 ，16位，可与key一致
message：需要加密的文本信息
plaintext：明文
ciphertext：密文

2. 只需要密钥的加密与解密

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>基于JavaScript的AES加密与解密实现</title>
</head>

<body>
	<script src="js/crypto-js.min.js"></script>
	<script type="text/javascript">
		var key = "0123456789abcdef";    // 密钥
		var message = '1234567890abcdefghigklmnopqrstuvwxyz!@#$%^&*(){}:"<>?|';    // 需要加密的信息
		// 加密实现
		function encrypt(plaintext) {
			var encrypted = CryptoJS.AES.encrypt(plaintext, key);
			var ciphertext = encrypted.toString();
			return ciphertext;
		}
		// 解密实现
		function decrypt(ciphertext) {
			var plaintext = CryptoJS.AES.decrypt(ciphertext, key).toString(CryptoJS.enc.Utf8);
			return plaintext;
		}
		var ciphertext = encrypt(message);
		var plaintext = decrypt(ciphertext);
		console.log("密文：", ciphertext);    // 密文：U2FsdGVkX18GahFCkjnFSAJ0QJuM4dh5sB35cQAsVApQ1zf6AcM2w2jnlenIoaax5VCV390+i1+ZWvrsulYhvPeI+YWl294/SY6D5Os0zvA=
		console.log("明文：", plaintext);    // 明文：1234567890abcdefghigklmnopqrstuvwxyz!@#$%^&*(){}:"<>?|
	</script>
</body>

</html>

3.需要密钥和偏移量的加密与解密

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>基于JavaScript的AES加密与解密实现</title>
</head>

<body>
	<script src="js/crypto-js.min.js"></script>
	<script>
		var key = CryptoJS.enc.Utf8.parse("0123456789abcdef");    // 密钥
		var iv = CryptoJS.enc.Utf8.parse("0123456789abcdef");	// 偏移量
		var message = '1234567890abcdefghigklmnopqrstuvwxyz!@#$%^&*(){}:"<>?|';    // 需要加密的信息
		// 加密实现
		function encrypt(plaintext) {
			var encrypted = CryptoJS.AES.encrypt(plaintext, key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.Pkcs7
			});
			var ciphertext = encrypted.toString();
			return ciphertext;
		}
		// 解密实现
		function decrypt(ciphertext) {
			var decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.Pkcs7
			});
			var plaintext = decrypted.toString(CryptoJS.enc.Utf8);
			return plaintext;
		}
		var ciphertext = encrypt(message);
		var plaintext = decrypt(ciphertext);
		console.log("密文：", ciphertext);    // 密文：dbPloHkdKgBH2huMBKZlMkbHSdp4fgoTouVu6ZAHMV1A9Vg+n7VkzwryY6ASpsHuA1sHWQwvJr0mala0L2WAVA==
		console.log("明文：", plaintext);    // 明文：1234567890abcdefghigklmnopqrstuvwxyz!@#$%^&*(){}:"<>?|
	</script>
</body>

</html>

4.验证

在线验证网址：https://www.ssleye.com/ssltool/aes_cipher.html

在这里插入图片描述