JavaScript笔记-前端AES加密

转x33g5p2x  于2022-04-08 转载在 Java  
字(7.9k)|赞(0)|评价(0)|浏览(374)

这里用最传统的方式进行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>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://it1995.blog.csdn.net/article/details/124032448

内容来源于网络，如有侵权，请联系作者删除！

HtmlJsweb前端

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com