JavaScript笔记-前端AES加密

IT1995

2024-04-24 帮助1人

这里用最传统的方式进行AES加密。

提供两种方式：

console.log("方式一");
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
var offset = document.getElementById("offset").value;
var salt = document.getElementById("salt").value;
var encrypted = CryptoJS.AES.encrypt(password, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("原始数据 : ", password);
console.log("vi : ", offset);
console.log("salt : ", salt);
document.getElementById("password").value = encrypted;
console.log("ase加密 : ", encrypted);
console.log("解密");
let decrypted = CryptoJS.AES.decrypt(encrypted, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("ase 解码 : " , decrypted.toString(CryptoJS.enc.Utf8));
console.log("方式二");
salt = CryptoJS.enc.Utf8.parse(salt);
password = CryptoJS.enc.Utf8.parse(password);
encrypted = CryptoJS.AES.encrypt(password, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("密文 : ", encrypted.toString());
console.log("解密");
decrypted = CryptoJS.AES.decrypt(encrypted.toString(), salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("明文 : ", CryptoJS.enc.Utf8.stringify(decrypted).toString());

运行截图如下：

学新通

完整代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Login Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/site.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/container.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/header.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/image.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/form.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/input.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/button.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/list.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/message.css">
<link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/icon.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<style type="text/css">
body {
background-color: #DADADA;
}
body > .grid {
height: 100%;
}
.image {
margin-top: -100px;
}
.column {
max-width: 450px;
}
</style>
<script language="JavaScript">
function login(){
console.log("方式一");
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
var offset = document.getElementById("offset").value;
var salt = document.getElementById("salt").value;
var encrypted = CryptoJS.AES.encrypt(password, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("原始数据 : ", password);
console.log("vi : ", offset);
console.log("salt : ", salt);
document.getElementById("password").value = encrypted;
console.log("ase加密 : ", encrypted);
console.log("解密");
let decrypted = CryptoJS.AES.decrypt(encrypted, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("ase 解码 : " , decrypted.toString(CryptoJS.enc.Utf8));
console.log("方式二");
salt = CryptoJS.enc.Utf8.parse(salt);
password = CryptoJS.enc.Utf8.parse(password);
encrypted = CryptoJS.AES.encrypt(password, salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("密文 : ", encrypted.toString());
console.log("解密");
decrypted = CryptoJS.AES.decrypt(encrypted.toString(), salt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
console.log("明文 : ", CryptoJS.enc.Utf8.stringify(decrypted).toString());
}
</script>
</head>
<body>
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Log-in to your account
</div>
</h2>
<form action="" method="post" class="ui large form" onsubmit="login()">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" id="userName" name="userName" placeholder="userName">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" id="password" name="password" placeholder="password">
</div>
</div>
<button class="ui fluid large teal button submit">Login</button>
</div>
<input name="salt" id="salt" type="hidden" value="abc123abc123abc1">
<input name="offset" id="offset" type="hidden" value="abcabcabcabcabca">
<div class="ui error message"></div>
</form>
</div>
</div>
</body>
</html>

这篇好文章是转载于：学新通技术网

JavaScript笔记-前端AES加密

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐