关键词搜索

源码搜索 ×
×

JavaScript笔记-前端AES加密

发布2022-04-08浏览5990次

详情内容

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

提供两种方式：

  1.             console.log("方式一");
  2.             var userName = document.getElementById("userName").value;
  3.             var password = document.getElementById("password").value;
  4.             var offset = document.getElementById("offset").value;
  5.             var salt = document.getElementById("salt").value;
  6.  
  7.  
  8.             var encrypted = CryptoJS.AES.encrypt(password, salt, {
  9.                 mode: CryptoJS.mode.ECB,
  10.                 padding: CryptoJS.pad.Pkcs7
  11.             });
  12.  
  13.             console.log("原始数据 : ", password);
  14.             console.log("vi : ", offset);
  15.             console.log("salt : ", salt);
  16.  
  17.             document.getElementById("password").value = encrypted;
  18.             console.log("ase加密 : ", encrypted);
  19.             console.log("解密");
  20.  
  21.             let decrypted = CryptoJS.AES.decrypt(encrypted, salt, {
  22.                 mode: CryptoJS.mode.ECB,
  23.                 padding: CryptoJS.pad.Pkcs7
  24.             });
  25.  
  26.             console.log("ase 解码 : " , decrypted.toString(CryptoJS.enc.Utf8));
  27.  
  28.  
  29.             console.log("方式二");
  30.             salt = CryptoJS.enc.Utf8.parse(salt);
  31.             password = CryptoJS.enc.Utf8.parse(password);
  32.             encrypted = CryptoJS.AES.encrypt(password, salt, {
  33.                 mode: CryptoJS.mode.ECB,
  34.                 padding: CryptoJS.pad.Pkcs7
  35.             });
  36.             console.log("密文 : ", encrypted.toString());
  37.             console.log("解密");
  38.  
  39.             decrypted = CryptoJS.AES.decrypt(encrypted.toString(), salt, {
  40.                 mode: CryptoJS.mode.ECB,
  41.                 padding: CryptoJS.pad.Pkcs7
  42.             });
  43.  
  44.  
  45.             console.log("明文 : ", CryptoJS.enc.Utf8.stringify(decrypted).toString());

运行截图如下：

 完整代码如下：

  1. <!DOCTYPE html>
  2. <html  xmlns="http://www.w3.org/1999/xhtml"
  3.        xmlns:th="https://www.thymeleaf.org"
  4.        xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
  5. <head>
  6.     <!-- Standard Meta -->
  7.     <meta charset="utf-8" />
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  10.  
  11.     <!-- Site Properties -->
  12.     <title>Login Example - Semantic</title>
  13.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/reset.css">
  14.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/site.css">
  15.  
  16.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/container.css">
  17.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/grid.css">
  18.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/header.css">
  19.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/image.css">
  20.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/menu.css">
  21.  
  22.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/divider.css">
  23.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/segment.css">
  24.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/form.css">
  25.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/input.css">
  26.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/button.css">
  27.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/list.css">
  28.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/message.css">
  29.     <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/components/icon.css">
  30.  
  31.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  32.  
  33.     <!-- 引入 CDN Crypto.js 开始 AES加密 注意引入顺序 -->
  34.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
  35.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-base64.min.js"></script>
  36.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/md5.min.js"></script>
  37.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/evpkdf.min.js"></script>
  38.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/cipher-core.min.js"></script>
  39.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/aes.min.js"></script>
  40.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/pad-pkcs7.min.js"></script>
  41.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/mode-ecb.min.js"></script>
  42.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-utf8.min.js"></script>
  43.     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-hex.min.js"></script>
  44.     <!-- 引入 CDN Crypto.js 结束 -->
  45.  
  46.     <style type="text/css">
  47.         body {
  48.             background-color: #DADADA;
  49.         }
  50.         body > .grid {
  51.             height: 100%;
  52.         }
  53.         .image {
  54.             margin-top: -100px;
  55.         }
  56.         .column {
  57.             max-width: 450px;
  58.         }
  59.     </style>
  60.     <script language="JavaScript">
  61.  
  62.         function login(){
  63.  
  64.             console.log("方式一");
  65.             var userName = document.getElementById("userName").value;
  66.             var password = document.getElementById("password").value;
  67.             var offset = document.getElementById("offset").value;
  68.             var salt = document.getElementById("salt").value;
  69.  
  70.  
  71.             var encrypted = CryptoJS.AES.encrypt(password, salt, {
  72.                 mode: CryptoJS.mode.ECB,
  73.                 padding: CryptoJS.pad.Pkcs7
  74.             });
  75.  
  76.             console.log("原始数据 : ", password);
  77.             console.log("vi : ", offset);
  78.             console.log("salt : ", salt);
  79.  
  80.             document.getElementById("password").value = encrypted;
  81.             console.log("ase加密 : ", encrypted);
  82.             console.log("解密");
  83.  
  84.             let decrypted = CryptoJS.AES.decrypt(encrypted, salt, {
  85.                 mode: CryptoJS.mode.ECB,
  86.                 padding: CryptoJS.pad.Pkcs7
  87.             });
  88.  
  89.             console.log("ase 解码 : " , decrypted.toString(CryptoJS.enc.Utf8));
  90.  
  91.  
  92.             console.log("方式二");
  93.             salt = CryptoJS.enc.Utf8.parse(salt);
  94.             password = CryptoJS.enc.Utf8.parse(password);
  95.             encrypted = CryptoJS.AES.encrypt(password, salt, {
  96.                 mode: CryptoJS.mode.ECB,
  97.                 padding: CryptoJS.pad.Pkcs7
  98.             });
  99.             console.log("密文 : ", encrypted.toString());
  100.             console.log("解密");
  101.  
  102.             decrypted = CryptoJS.AES.decrypt(encrypted.toString(), salt, {
  103.                 mode: CryptoJS.mode.ECB,
  104.                 padding: CryptoJS.pad.Pkcs7
  105.             });
  106.  
  107.  
  108.             console.log("明文 : ", CryptoJS.enc.Utf8.stringify(decrypted).toString());
  109.  
  110.         }
  111.     </script>
  112. </head>
  113. <body>
  114.  
  115. <div class="ui middle aligned center aligned grid">
  116.     <div class="column">
  117.         <h2 class="ui teal image header">
  118.             <div class="content">
  119.                 Log-in to your account
  120.             </div>
  121.         </h2>
  122.         <form action="" method="post" class="ui large form" onsubmit="login()">
  123.             <div class="ui stacked segment">
  124.                 <div class="field">
  125.                     <div class="ui left icon input">
  126.                         <i class="user icon"></i>
  127.                         <input type="text" id="userName" name="userName" placeholder="userName">
  128.                     </div>
  129.                 </div>
  130.                 <div class="field">
  131.                     <div class="ui left icon input">
  132.                         <i class="lock icon"></i>
  133.                         <input type="password" id="password" name="password" placeholder="password">
  134.                     </div>
  135.                 </div>
  136.                 <button class="ui fluid large teal button submit">Login</button>
  137.             </div>
  138.  
  139.             <input name="salt" id="salt" type="hidden" value="abc123abc123abc1">
  140.             <input name="offset" id="offset" type="hidden" value="abcabcabcabcabca">
  141.  
  142.             <div class="ui error message"></div>
  143.  
  144.         </form>
  145.  
  146.     </div>
  147. </div>
  148.  
  149. </body>
  150.  
  151. </html>

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载