使用Crypto-Js在前端（浏览器）进行AES的加密/解密

技术交流
1

使用Crypto-Js在前端（浏览器）进行AES的加密/解密

最近业务需求，在web端对数据进行AES解密，于是在网上找到了 Crypto-Js。
学习了一下，觉得简单，又强大。

AES的加密解密

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Crypto-Js</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-base64.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/md5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/evpkdf.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/cipher-core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/aes.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/pad-pkcs7.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/mode-ecb.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-utf8.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-hex.min.js"></script>
	<script type="text/javascript">
	
		/**
		 * 初始化128位的密钥
		 */
		const key = CryptoJS.enc.Utf8.parse("springboot.io...")
		
		/**
		 * 使用密钥，对原文进行加密。返回加密后密文的base64编码
		 */
		const ciphertext = CryptoJS.AES.encrypt('SpringBoot中文社区', key, {
			mode: CryptoJS.mode.ECB,  // ECB模式
	        padding: CryptoJS.pad.Pkcs7 // Pkcs7填充
		}).toString();
		
		console.log("密文：" + ciphertext);

		/**
		 * 使用密钥，对密文进行解码。返回原文
		 */
		const bytes  = CryptoJS.AES.decrypt(ciphertext, key, {
			mode: CryptoJS.mode.ECB,	  // ECB模式
	        padding: CryptoJS.pad.Pkcs7	// Pkcs7填充
		});
		
		const originalText = bytes.toString(CryptoJS.enc.Utf8);
	
		console.log("原文：" + originalText);
	</script>
	</body>
</html>

控制台输出

密文：LcJC/J0rfUeDdyioHA3pjFfg9hzsgxh8Fv0ZN0oNySM=
index.html:45 原文：SpringBoot中文社区

注意

这里加密解密，使用的是Pkcs7填充，java标准api不支持。需要使用额外的库

<!-- https://mvnrepository.com/artifact/org.bouncycastle/bcprov-jdk16 -->
<dependency>
    <groupId>org.bouncycastle</groupId>
    <artifactId>bcprov-jdk16</artifactId>
    <version>1.46</version>
</dependency>
1 个赞