crypto基于crypto.js的web前端加解密系统实现
Posted 微雨停了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了crypto基于crypto.js的web前端加解密系统实现相关的知识，希望对你有一定的参考价值。
文章目录
一、概念介绍
1.1 crypto.js介绍
crypto-js是谷歌开发的一个纯javascript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引用总文件，也可以单独引用某一文件。
开源地址：
1、github：https://github.com/brix/crypto-js
2、gitee： https://gitee.com/mirrors/crypto-js
1.2 加密 / 哈希 / 编码
1.2.1 加密/解密
加密是为了保证数据安全传输，使得其他人不能获取的具体信息内容。以某种特殊的算法，将原本信息数据进行改变，使得即使没有权限的人看到消息也不能从中得到任何有用信息，但是加密的信息是保证可逆的，即可加密必可解密（其长度与目标文本成正比）。
1.2.2 散列/哈希
摘要的目的是为了校验信息的完整性，保证信息在传输过程中不被篡改。哈希算法将目标文本转换成为具有相同长度，不可逆的杂凑字符串。
1.2.3 BASE64编解码
Base64编码是网络上常见的用于传输8bit字节数据的一种编码方式之一，由于某些系统中只能使用ASCII字符，此编码方式可以让中文字或者图片也能在网络上顺利传输。
二、加解密思想（以md5为例）
1、引入md5.js
<script src="/static/js/encryption/md5.js"></script>
2、id="source"的文本框将框内内容传值
<textarea class="form-control" rows="5" id="source" name="source"></textarea>
3、MD5加密——将id="source"的块中内容经加密后传值到id="source"的块中
<script>
case "MD5":
hide_pwd();
$("#result").val(CryptoJS.MD5($("#source").val()));
break;
</script>
4、id="source"的文本框中填充加密后的内容
<textarea class="form-control" rows="5" id="result" name="result"></textarea>
三、前端加密系统实现代码
3.1 加解密
% block all %
<div class="container mt-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">加密/解密</a>
</li>
<li class="nav-item">
<a class="nav-link" href="% url 'decode_hash' %">散列/哈希</a>
</li>
<li class="nav-item">
<a class="nav-link" href="% url 'decode_base64' %">BASE64</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">图片/BASE64转换</a>
</li>
</ul>
</div>
<div class="container mt-3">
<div class="row row-cards">
<div class="col-lg-5">
<div class="form-floating mb-3 mt-3">
<textarea style="max-height:500px;min-height:500px;"
class="form-control" id="source" name="text" placeholder="Comment goes here"></textarea>
<label for="source">明文</label>
</div>
</div>
<div class="col-lg-2">
<div class="form-floating mb-3 mt-3">
<div class="row justify-content-between">
<select class="form-select" id="crypto" name="crypto">
<option selected disabled>加解密算法</option>
<option>AES</option>
<option>DES</option>
<option>RC4</option>
<option>Rabbit</option>
<option>TripleDES</option>
</select>
</div>
<br><br><br><br>
<div class="row justify-content-between">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary" onclick="encode()">加密→</button>
<button type="button" class="btn btn-primary" onclick="decode()">←解密</button>
</div>
</div>
<br><br><br>
<div class="row justify-content-between">
<div class="form-floating mb-3 mt-3">
<textarea style="max-height:200px;min-height:200px;" class="form-control" id="pwd"
name="text" placeholder="Comment goes here"></textarea>
<label for="pwd">密钥</label>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-5">
<div class="form-floating mb-3 mt-3">
<textarea style="max-height:500px;min-height:500px;"
class="form-control" id="result" name="text" placeholder="Comment goes here"></textarea>
<label for="result">密文</label>
</div>
</div>
</div>
</div>
<div class="container mt-3">
<div class="card border-dark mb-3">
<div class="card-header"><h5>模块介绍</h5></div>
<div class="card-body">
<p class="card-text" style="text-indent: 2em">
Crypto-JS是一个使用JS实现的加密库，提供AES、DES、PBKDF2、SHA、MD5、RC4等多种算法。本加解密系统依赖这个库实现。</p>
<p class="card-text" style="text-align: right"><small class="text-muted">By WeiYuting</small></p>
</div>
</div>
</div>
% endblock %
% block js %
<script src="/static/js/encryption/aes.js"></script>
<script src="/static/js/encryption/pbkdf2.js"></script>
<script src="/static/js/encryption/rabbit.js"></script>
<script src="/static/js/encryption/rabbit-legacy.js"></script>
<script src="/static/js/encryption/rc4.js"></script>
<script src="/static/js/encryption/tripledes.js"></script>
<script type="text/javascript">
// 加密
function encode()
var crypto = document.getElementById('crypto');
try
switch (crypto.value)
case "AES":
$("#result").val(CryptoJS.AES.encrypt($("#source").val(), $("#pwd").val()));
break;
case "DES":
$("#result").val(CryptoJS.DES.encrypt($("#source").val(), $("#pwd").val()));
break;
case "RC4":
$("#result").val(CryptoJS.RC4.encrypt($("#source").val(), $("#pwd").val()));
break;
case "Rabbit":
$("#result").val(CryptoJS.Rabbit.encrypt($("#source").val(), $("#pwd").val()));
break;
case "TripleDES":
$("#result").val(CryptoJS.TripleDES.encrypt($("#source").val(), $("#pwd").val()));
break;
catch (err)
alert(err);
$("#result").val("");
// 解密
function decode()
var crypto = document.getElementById('crypto');
try
switch (crypto.value)
case "AES":
$("#source").val(CryptoJS.AES.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
break;
case "DES":
$("#source").val(CryptoJS.DES.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
break;
case "RC4":
$("#source").val(CryptoJS.RC4.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
break;
case "Rabbit":
$("#source").val(CryptoJS.Rabbit.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
break;
case "TripleDES":
$("#source").val(CryptoJS.TripleDES.decrypt($("#result").val(), $以上是关于crypto基于crypto.js的web前端加解密系统实现的主要内容，如果未能解决你的问题，请参考以下文章