JavaScript 使用 CryptoJS 插件实现数据加密解密

作者:霁月时间:2026-10-22 03:57:31浏览:138

本文介绍了如何在 JavaScript 中使用 CryptoJS 插件进行数据的加密与解密操作。通过具体的 HTML 和 JS 代码示例,展示了基于 ECB 模式的 DES 加密实现过程,包括密钥定义、加密函数编写及页面交互逻辑,帮助开发者掌握前端数据加密的基本方法。

JavaScript 使用 CryptoJS 进行 DES 加密解密实战

本文通过具体实例,演示了在 JavaScript 中利用 CryptoJS 插件完成数据加密与解密的全过程。内容旨在为相关开发者提供可参考的实现方案。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Testing websockets</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script src="tripledes.js"></script>
<script src="mode-ecb-min.js"></script>
<script type="text/javascript">
var key = 'BOTWAVEE';
//CBC模式加密
function encryptByDESModeCBC(message) {
var keyHex = CryptoJS.enc.Utf8.parse(key);
    var ivHex = CryptoJS.enc.Utf8.parse(key);
    encrypted = CryptoJS.DES.encrypt(message, keyHex, {
    iv:ivHex,
    mode: CryptoJS.mode.CBC,
    padding:CryptoJS.pad.Pkcs7
    }
    );
return encrypted.ciphertext.toString();
}
//CBC模式解密
function decryptByDESModeCBC(ciphertext2) {
var keyHex = CryptoJS.enc.Utf8.parse(key);
    var ivHex = CryptoJS.enc.Utf8.parse(key);
// direct decrypt ciphertext
var decrypted = CryptoJS.DES.decrypt({
ciphertext: CryptoJS.enc.Hex.parse(ciphertext2)
}, keyHex, {
iv:ivHex,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
//DES ECB模式加密
function encryptByDESModeEBC(message){
var keyHex = CryptoJS.enc.Utf8.parse(key);
var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString();
}
//DES ECB模式解密
function decryptByDESModeEBC(ciphertext){
var keyHex = CryptoJS.enc.Utf8.parse(key);
var decrypted = CryptoJS.DES.decrypt({
ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
}, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
var result_value = decrypted.toString(CryptoJS.enc.Utf8);
return result_value;
}
function test(){
var source = $("#source").val();
var cc = encryptByDESModeEBC(CryptoJS.enc.Utf8.parse(source));
$("#target").val(cc);
}
function test1(){
var source = $("#sourceS").val();
var dd = decryptByDESModeEBC(source);
$("#jiemi").val(dd);
}
</script>
</head>
<body>
 <div>
加密前:<textarea id="source" value="" style="width:500px;height:90px;" /></textarea>
<hr>
加密后:<textarea id="target" value="" style="width:500px;height:90px;" ></textarea>
<hr>
<input type="button" onclick="test();" name="" value="加密" />
<hr>
密文:<textarea id="sourceS" value="" width="400px" style="width:500px;height:90px;" ></textarea>
<hr>
解密后:<textarea id="jiemi" value="" style="width:500px;height:90px;" ></textarea>
<hr>
<input type="button" onclick="test1();" name="" value="解密"/>
 </div>
</body>
</html>

此外,建议对加密解密技术感兴趣的读者参考本站提供的其他在线辅助工具。

BASE64 编码解码工具: http://tools.jb51.net/transcoding/base64

密码安全性在线检测: http://tools.jb51.net/password/my_password_safe

高强度密码生成器: http://tools.jb51.net/password/CreateStrongPassword

MD5 在线加密工具: http://tools.jb51.net/password/CreateMD5Password

在线散列/哈希算法加密工具: http://tools.jb51.net/password/hash_encrypt

在线 MD5/hash/SHA-1/SHA-2/SHA-256/SHA-512/SHA-3/RIPEMD-160 加密工具: http://tools.jb51.net/password/hash_md5_sha

在线sha1/sha224/sha256/sha384/sha512加密工具: http://tools.jb51.net/password/sha_encode

如需了解更多 JavaScript 相关内容,可查阅本站系列专题,包括《JavaScript 加密解密技巧汇总》、《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》以及《JavaScript 数学运算用法总结》。

希望上述内容能对您的 JavaScript 编程实践有所帮助。

作者最新文章