JavaScript笔记-前端AES加密
Posted IT1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript笔记-前端AES加密相关的知识，希望对你有一定的参考价值。
这里用最传统的方式进行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>
<!-- Standard Meta -->
<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">
<!-- Site Properties -->
<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>
<!-- 引入 CDN Crypto.js 开始 AES加密 注意引入顺序 -->
<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>
<!-- 引入 CDN Crypto.js 结束 -->
<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加密的主要内容，如果未能解决你的问题，请参考以下文章