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加密相关推荐

Javascript中的AES加密和Java中的解密
AES代表高级加密系统,它是一种对称加密算法,很多时候我们需要在客户端加密一些纯文本(例如密码)并将其发送到服务器,然后由服务器解密以进行进一步处理.AES加密和解密更加容易在相同的平台(例如Andr ...
前端aes加密_前端安全攻防解析
知识点列表: CSRF 攻击 XSS攻击 HTTPS 程序员必须要了解的web安全 - 掘金若愚:「每日一题」CSRF 是什么? [基本功] 前端安全系列之一:如何防止XSS攻击? [基本功] 前端 ...
nodejs与javascript中的aes加密
简介 1.aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用.高级加密标准已然成为对称密钥加 ...
BASE64加密解密---前端 AES 加密解密
在做项目的时候,要求base64加密传输,和java后端试了很多,就这个比较合适首先先下包 npm i crypto-js --save 封装 import CryptoJS from " ...
Python实现前端AES加密方式分析，***密码学必备！
在前端常见的加密方式中AES很少使用,因为相对于非对称的RSA安全性很低,AES是典型的对称加密,密钥就在前端源码里. 案列网站是ewt360.com,一个并不复杂的网站,首先抓个包看看: 加密字段只 ...
0宽字符加密_前端AES加密方式分析，及其python实现
在前端常见的加密方式中AES很少使用,因为相对于非对称的RSA安全性很低,AES是典型的对称加密,密钥就在前端源码里. 案列网站是http://ewt360.com,一个并不复杂的网站,首先抓个包看看 ...
php aescbc偏移量不对称,关于前端AES加密与后台不同的问题。
后台为php,使用 openssl 用 aes 进行加密,加密结果与 http://tool.chacuo.net/cryptaes 结果是一致的. 现在的问题是前端使用 CryptoJS 怎么弄都不 ...
JavaScript笔记-前端原生态WebSocket的使用
运行截图如下: 输入数据点击发送: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta ...
javascript 解密_Javascript中的AES加密和Java中的解密
javascript 解密 AES代表高级加密系统,它是一种对称加密算法,很多时候我们需要在客户端加密一些纯文本,例如密码,然后将其发送到服务器,然后由服务器解密以进行进一步处理.AES加密和解密更加 ...
前端JavaScript AES解密 AES加密 ECB模式
项目里使用过md5.base64,使用AES的安全系数会高一些. 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法,微信小程序加密传输就是用这个加 ...

JavaScript笔记-前端AES加密

JavaScript笔记-前端AES加密相关推荐

最新文章

热门文章