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

2 years ago

source link: https://blog.51cto.com/u_14522578/6010478
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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>

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

Recommend

微信 mp.weixin.qq.com 6 years ago
Cache

AES加密的安全问题

www.zhyea.com 4 years ago
Cache

Java AES加密

做360广告的对接需要对密码进行AES加密，下面是点睛平台文档的描述：（AES模式为CBC，加密算法MCRYPT_RIJNDAEL_128）对MD5加密后的密码实现对称加密。秘钥是apiSecret 的前16位，向量是后16位，加密结果为64位数字和小写字母。

segmentfault.com 3 years ago
Cache

Java 中的加密算法： AES

Java 中的加密算法： AES加密算法通常分为对称加密算法和非对称加密算法：对称加密算法（symmetric-key cryptography）：加密和解密时使用相同的密钥。常用的对称加密算法有 D...

www.jdon.com 3 years ago
Cache

逆向工程加密函数：AES

逆向工程加密函数：AES 高级加密标准 (AES) 算法是数据加密标准 (DES) 的继承者。随着技术的进步，DES 的密钥长度和较小的块大小使其安全性降低。1997 年，NI...

studygolang.com 3 years ago
Cache

前后端交互，密码加密，RSA 实现前端 js 加密，后端 go 解密

前后端交互，密码加密，RSA 实现前端 js 加密，后端 go 解密 Grassto · 3天之前 · 177 次点击 · 预...

blog.darkthread.net 3 years ago
Cache

使用 Bouncy Castle DES/AES 加解密

使用 Bouncy Castle DES/AES 加解密-黑暗執行緒在 .NET 要執行 DES/AES/RSA 加解密不是難事，遠從 .NET 3.5 時代，System.Security.Cryptography 命名空間都已內建相關 API 提供完整支援。不過這些安全相關 API 高度依賴作業系統的原生程式庫，從 .NET...