142 lines
4.8 KiB
HTML
142 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AES Encryption</title>
|
||
<style>
|
||
input[type="text"] {
|
||
width: 100%;
|
||
height: 30px;
|
||
margin-top: 0px;
|
||
margin-bottom: 20px;
|
||
}
|
||
input {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|
||
<script src="./crypto-js.min.js"></script>
|
||
</head>
|
||
<body>
|
||
信息：<input type="text" id="content" /><br>
|
||
秘钥：<input type="text" id="encryptionKey" /><br>
|
||
是否使用IV向量：<input type="radio" id="useIv" value=0 checked onclick="selectUseIv(this.value)" />否 
|
||
<input type="radio" id="useIv" value=1 onclick="selectUseIv(this.value)" />是<br>
|
||
IV向量：<input type="text" id="iv" /><br>
|
||
NoPadding：<input type="radio" id="useNoPadding" value=0 checked onclick="selectUseNoPadding(this.value)" />否 
|
||
<input type="radio" id="useNoPadding" value=1 onclick="selectUseNoPadding(this.value)" />是<br>
|
||
加密结果：<input type="text" id="value1" /><br>
|
||
解密结果：<input type="text" id="value2" /><br>
|
||
<input type="button" value="提交" onclick="submit()" />
|
||
|
||
<script>
|
||
// 默认信息
|
||
document.getElementById("content").value = '{"endTime": "", "keyword": "", "magnitude": "", "pageNum": 1, "pageSize": 10, "startTime": "", "xzqh": "420"}';
|
||
// 默认aes秘钥
|
||
document.getElementById("encryptionKey").value = "l5gzm2n78wriiqux";
|
||
|
||
// 加密函数
|
||
function encryptAES(text, key, conf) {
|
||
// 使用 CryptoJS.AES 对象进行加密
|
||
var encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(text), CryptoJS.enc.Utf8.parse(key), conf);
|
||
return encrypted.toString();
|
||
}
|
||
|
||
// 解密函数
|
||
function decryptAES(encryptedText, key, conf) {
|
||
// 使用 CryptoJS.AES 对象进行解密
|
||
var decrypted = CryptoJS.AES.decrypt(encryptedText, CryptoJS.enc.Utf8.parse(key), conf);
|
||
return decrypted.toString(CryptoJS.enc.Utf8);
|
||
}
|
||
|
||
// 提交
|
||
function submit() {
|
||
var encryptionKey = document.getElementById("encryptionKey").value;
|
||
// 模式ECB、CBC
|
||
// 补码Pkcs7、NoPadding
|
||
var conf = {
|
||
mode: CryptoJS.mode.ECB,
|
||
padding: CryptoJS.pad.Pkcs7
|
||
}
|
||
// 是否使用NoPadding
|
||
var useNoPadding = false;
|
||
if (document.querySelector('input[id="useNoPadding"]:checked').value == 1) {
|
||
useNoPadding = true;
|
||
}
|
||
// 判断是否使用iv向量
|
||
if (document.querySelector('input[id="useIv"]:checked').value == 1) {
|
||
conf.mode = CryptoJS.mode.CBC;
|
||
if (useNoPadding) {
|
||
conf.padding = CryptoJS.pad.NoPadding;
|
||
}
|
||
var iv = document.getElementById("iv").value;
|
||
if (!iv) {
|
||
selectUseIv(1);
|
||
iv = document.getElementById("iv").value;
|
||
}
|
||
if (iv.length != 16) {
|
||
alert("iv的长度必须是16位");
|
||
return;
|
||
}
|
||
conf.iv = CryptoJS.enc.Utf8.parse(document.getElementById("iv").value);
|
||
}
|
||
// 加密
|
||
var text = document.getElementById("content").value;
|
||
if (useNoPadding) {
|
||
const blockSize = 16; // AES块大小为16字节
|
||
text = padToBlockSize(text, blockSize);
|
||
}
|
||
if (!text) {
|
||
alert("信息不能为空");
|
||
return;
|
||
}
|
||
document.getElementById("value1").value = encryptAES(text, encryptionKey, conf);
|
||
// 解密
|
||
var decryptText = decryptAES(document.getElementById("value1").value, encryptionKey, conf);
|
||
if (useNoPadding) {
|
||
decryptText = removePadding(decryptText);
|
||
}
|
||
document.getElementById("value2").value = decryptText;
|
||
}
|
||
|
||
// 选择是否使用iv向量
|
||
function selectUseIv(value) {
|
||
if (value == 1) {
|
||
document.querySelector('input[id="useIv"][value="0"]').checked = false;
|
||
if (!document.getElementById("iv").value) {
|
||
var randomBytes = CryptoJS.lib.WordArray.random(128 / 8);
|
||
var randomHexString = randomBytes.toString(CryptoJS.enc.Hex);
|
||
document.getElementById("iv").value = randomHexString.substring(0, 16);
|
||
}
|
||
} else {
|
||
document.querySelector('input[id="useIv"][value="1"]').checked = false;
|
||
document.getElementById("iv").value = "";
|
||
}
|
||
}
|
||
|
||
// 选择是否使用NoPadding
|
||
function selectUseNoPadding(value) {
|
||
if (value == 1) {
|
||
document.querySelector('input[id="useNoPadding"][value="0"]').checked = false;
|
||
} else {
|
||
document.querySelector('input[id="useNoPadding"][value="1"]').checked = false;
|
||
}
|
||
}
|
||
|
||
// 确保明文长度是块大小的整数倍
|
||
function padToBlockSize(data, blockSize) {
|
||
const paddingLength = blockSize - (data.length % blockSize);
|
||
const padding = String.fromCharCode(paddingLength).repeat(paddingLength);
|
||
return data + padding;
|
||
}
|
||
|
||
// 去除填充
|
||
function removePadding(plaintext) {
|
||
const paddingLength = plaintext.charCodeAt(plaintext.length - 1);
|
||
return plaintext.slice(0, -paddingLength);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|