程序员经验分享-hwhale

【crypto】基于crypto.js的web前端加解密系统实现

2023-11-01

一、概念介绍

1.1 crypto.js介绍

crypto-js是谷歌开发的一个纯JavaScript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、AES、RSA、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引用总文件，也可以单独引用某一文件。

开源地址：
1、github：https://github.com/brix/crypto-js
2、gitee： https://gitee.com/mirrors/crypto-js

1.2 加密 / 哈希 / 编码

1.2.1 加密/解密

加密是为了保证数据安全传输，使得其他人不能获取的具体信息内容。以某种特殊的算法，将原本信息数据进行改变，使得即使没有权限的人看到消息也不能从中得到任何有用信息，但是加密的信息是保证可逆的，即可加密必可解密（其长度与目标文本成正比）。

1.2.2 散列/哈希

摘要的目的是为了校验信息的完整性，保证信息在传输过程中不被篡改。哈希算法将目标文本转换成为具有相同长度，不可逆的杂凑字符串。

1.2.3 BASE64编解码

Base64编码是网络上常见的用于传输8bit字节数据的一种编码方式之一，由于某些系统中只能使用ASCII字符，此编码方式可以让中文字或者图片也能在网络上顺利传输。

二、加解密思想（以md5为例）

1、引入md5.js

<script src="/static/js/encryption/md5.js"></script>

2、id="source"的文本框将框内内容传值

<textarea class="form-control" rows="5" id="source" name="source"></textarea>

3、MD5加密——将id="source"的块中内容经加密后传值到id="source"的块中

<script>
case "MD5":
           hide_pwd();
           $("#result").val(CryptoJS.MD5($("#source").val()));
           break;
</script>

4、id="source"的文本框中填充加密后的内容

<textarea class="form-control" rows="5" id="result" name="result"></textarea>

三、前端加密系统实现代码

3.1 加解密

{% block all %}
    <div class="container mt-3">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">加密/解密</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_hash' %}">散列/哈希</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_base64' %}">BASE64</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">图片/BASE64转换</a>
            </li>
        </ul>
    </div>
    <div class="container mt-3">
        <div class="row row-cards">
            <div class="col-lg-5">
                <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:500px;min-height:500px;"
                          class="form-control" id="source" name="text" placeholder="Comment goes here"></textarea>
                    <label for="source">明文</label>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-floating mb-3 mt-3">
                    <div class="row justify-content-between">

                        <select class="form-select" id="crypto" name="crypto">
                            <option selected disabled>加解密算法</option>
                            <option>AES</option>
                            <option>DES</option>
                            <option>RC4</option>
                            <option>Rabbit</option>
                            <option>TripleDES</option>
                        </select>
                    </div>

                    <br><br><br><br>

                    <div class="row justify-content-between">
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-primary" onclick="encode()">加密→</button>
                            <button type="button" class="btn btn-primary" onclick="decode()">←解密</button>
                        </div>
                    </div>
                    <br><br><br>
                    <div class="row justify-content-between">
                        <div class="form-floating mb-3 mt-3">
                            <textarea style="max-height:200px;min-height:200px;" class="form-control" id="pwd"
                                      name="text" placeholder="Comment goes here"></textarea>
                            <label for="pwd">密钥</label>
                        </div>
                    </div>

                </div>
            </div>
            <br>

            <div class="col-lg-5">
                <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:500px;min-height:500px;"
                          class="form-control" id="result" name="text" placeholder="Comment goes here"></textarea>
                    <label for="result">密文</label>
                </div>
            </div>
        </div>
    </div>

   <div class="container mt-3">
        <div class="card border-dark mb-3">
            <div class="card-header"><h5>模块介绍</h5></div>
            <div class="card-body">
                <p class="card-text" style="text-indent: 2em">
                    Crypto-JS是一个使用JS实现的加密库，提供AES、DES、PBKDF2、SHA、MD5、RC4等多种算法。本加解密系统依赖这个库实现。</p>
                <p class="card-text" style="text-align: right"><small class="text-muted">By WeiYuting</small></p>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
 <script src="/static/js/encryption/aes.js"></script>
 <script src="/static/js/encryption/pbkdf2.js"></script>
 <script src="/static/js/encryption/rabbit.js"></script>
 <script src="/static/js/encryption/rabbit-legacy.js"></script>
 <script src="/static/js/encryption/rc4.js"></script>
 <script src="/static/js/encryption/tripledes.js"></script>
 
    <script type="text/javascript">
        // 加密
        function encode() {
            var crypto = document.getElementById('crypto');
            try {
                switch (crypto.value) {
                    case "AES":
                        $("#result").val(CryptoJS.AES.encrypt($("#source").val(), $("#pwd").val()));
                        break;
                    case "DES":
                        $("#result").val(CryptoJS.DES.encrypt($("#source").val(), $("#pwd").val()));
                        break;
                    case "RC4":
                        $("#result").val(CryptoJS.RC4.encrypt($("#source").val(), $("#pwd").val()));
                        break;
                    case "Rabbit":
                        $("#result").val(CryptoJS.Rabbit.encrypt($("#source").val(), $("#pwd").val()));
                        break;
                    case "TripleDES":
                        $("#result").val(CryptoJS.TripleDES.encrypt($("#source").val(), $("#pwd").val()));
                        break;
                }
            } catch (err) {
                alert(err);
                $("#result").val("");
            }
        }

        // 解密
        function decode() {
            var crypto = document.getElementById('crypto');
            try {
                switch (crypto.value) {
                    case "AES":
                        $("#source").val(CryptoJS.AES.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
                        break;
                    case "DES":
                        $("#source").val(CryptoJS.DES.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
                        break;
                    case "RC4":
                        $("#source").val(CryptoJS.RC4.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
                        break;
                    case "Rabbit":
                        $("#source").val(CryptoJS.Rabbit.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
                        break;
                    case "TripleDES":
                        $("#source").val(CryptoJS.TripleDES.decrypt($("#result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
                        break;
                }
            } catch (err) {
                alert(err);
                $("#result").val("");
            }
        }

    </script>
{% endblock %}

3.2 哈希

{% block all %}
    <div class="container mt-3">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_view' %}">加密/解密</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#">散列/哈希</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_base64' %}">BASE64</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">图片/BASE64转换</a>
            </li>
        </ul>
    </div>
    <div class="container mt-3">
        <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:200px;min-height:200px;"
                          class="form-control" id="source" name="text" placeholder="Comment goes here"></textarea>
            <label for="source">明文</label>
        </div>

        <div class="group" id="p_div" style="display: none;">
                        <input type="text" class="form-control" id="pwd" placeholder="秘钥">
        </div>

        <div class="row justify-content-between">
            <div class="btn-group  btn-group-justified">
                <button type="button" class="btn btn-outline-primary">SHA1</button>
                <button type="button" class="btn btn-outline-primary">SHA224</button>
                <button type="button" class="btn btn-outline-primary">SHA256</button>
                <button type="button" class="btn btn-outline-primary">SHA384</button>
                <button type="button" class="btn btn-outline-primary">SHA512</button>
                <button type="button" class="btn btn-outline-primary">MD5</button>
                <button type="button" class="btn btn-outline-primary">HmacSHA1</button>
                <button type="button" class="btn btn-outline-primary">HmacSHA224</button>
                <button type="button" class="btn btn-outline-primary">HmacSHA256</button>
                <button type="button" class="btn btn-outline-primary">HmacSHA384</button>
                <button type="button" class="btn btn-outline-primary">HmacSHA512</button>
                <button type="button" class="btn btn-outline-primary">HmacMD5</button>
            </div>
        </div>
    <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:200px;min-height:200px;"
                          class="form-control" id="result" name="text" placeholder="Comment goes here"></textarea>
            <label for="result">哈希值</label>
        </div>

    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/encryption/hmac-md5.js"></script>
    <script src="/static/js/encryption/hmac-sha1.js"></script>
    <script src="/static/js/encryption/hmac-sha3.js"></script>
    <script src="/static/js/encryption/hmac-sha224.js"></script>
    <script src="/static/js/encryption/hmac-sha256.js"></script>
    <script src="/static/js/encryption/hmac-sha384.js"></script>
    <script src="/static/js/encryption/hmac-sha512.js"></script>
    <script src="/static/js/encryption/md5.js"></script>
    <script src="/static/js/encryption/sha1.js"></script>
    <script src="/static/js/encryption/sha3.js"></script>
    <script src="/static/js/encryption/sha224.js"></script>
    <script src="/static/js/encryption/sha256.js"></script>
    <script src="/static/js/encryption/sha384.js"></script>
    <script src="/static/js/encryption/sha512.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".btn").click(function () {
                eval("hash('" + $(this).html() + "')");
            });
        });

        function hide_pwd() {
            $("#p_div").hide();
        }

        function show_pwd() {
            $("#p_div").show();
        }

        function hash(type) {
            try {
                switch (type) {
                    case "SHA1":
                        hide_pwd();
                        $("#result").val(CryptoJS.SHA1($("#source").val()));
                        break;
                    case "SHA224":
                        hide_pwd();
                        $("#result").val(CryptoJS.SHA224($("#source").val()));
                        break;
                    case "SHA256":
                        hide_pwd();
                        $("#result").val(CryptoJS.SHA256($("#source").val()));
                        break;
                    case "SHA384":
                        hide_pwd();
                        $("#result").val(CryptoJS.SHA384($("#source").val()));
                        break;
                    case "SHA512":
                        hide_pwd();
                        $("#result").val(CryptoJS.SHA512($("#source").val()));
                        break;
                    case "MD5":
                        hide_pwd();
                        $("#result").val(CryptoJS.MD5($("#source").val()));
                        break;
                    case "HmacSHA1":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacSHA1($("#source").val(), $("#pwd").val()));
                        break;
                    case "HmacSHA224":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacSHA224($("#source").val(), $("#pwd").val()));
                        break;
                    case "HmacSHA256":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacSHA256($("#source").val(), $("#pwd").val()));
                        break;
                    case "HmacSHA384":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacSHA384($("#source").val(), $("#pwd").val()));
                        break;
                    case "HmacSHA512":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacSHA512($("#source").val(), $("#pwd").val()));
                        break;
                    case "HmacMD5":
                        show_pwd();
                        $("#result").val(CryptoJS.HmacMD5($("#source").val(), $("#pwd").val()));
                        break;
                }
            } catch (err) {
                alert(err);
                $("#result").val("");
            }
        }
    </script>
{% endblock %}

3.4 BASE64

{% block all %}
    <div class="container mt-3">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_view' %}">加密/解密</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'decode_hash' %}">散列/哈希</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#">BASE64</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">图片/BASE64转换</a>
            </li>
        </ul>
    </div>
    <div class="container mt-3">
        <div class="row row-cards">
            <div class="col-lg-5">
                <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:500px;min-height:500px;"
                          class="form-control" id="source" name="text" placeholder="Comment goes here"></textarea>
                    <label for="source">明文</label>
                </div>
            </div>
            <div class="col-lg-2">
                <br><br>
                <br><br>
                <br><br>
                <br><br>
                <div class="form-floating mb-3 mt-3">
                    <div class="row justify-content-between">

                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-primary" onclick="encode()">Base64编码→</button>
                            <button type="button" class="btn btn-primary" onclick="decode()">←Base64解码</button>
                        </div>
                    </div>
                </div>
            </div>
            <br>

            <div class="col-lg-5">
                <div class="form-floating mb-3 mt-3">
                <textarea style="max-height:500px;min-height:500px;"
                          class="form-control" id="result" name="text" placeholder="Comment goes here"></textarea>
                    <label for="result">Base64密文</label>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="/static/js/encryption/sha512.js"></script>
    <script src="/static/js/encryption/enc-base64-min.js"></script> <!--只引入一个会报错-->


    <script type="text/javascript">
        // 加密
        function encode() {
            var crypto = document.getElementById('crypto');
            try {
                var str = CryptoJS.enc.Utf8.parse($("#source").val());
                var base64 = CryptoJS.enc.Base64.stringify(str);
                $("#result").val(base64);

            } catch (err) {
                alert(err);
                $("#result").val("");
            }
        }

        // 解密
        function decode() {
            var crypto = document.getElementById('crypto');
            try {
                $("#source").val(CryptoJS.enc.Base64.parse($("#result").val()).toString(CryptoJS.enc.Utf8));

            } catch (err) {
                alert(err);
                $("#source").val("");
            }
        }
    </script>
{% endblock %}

四、验证

4.1 页面验证

4.1.1 加解密

在这里插入图片描述

4.1.2 哈希

在这里插入图片描述

4.1.3 BASE64

在这里插入图片描述

4.2 逻辑验证

4.2.1 加解密逻辑

将明文字符串“weiyuting”在密钥字符串“wl1803”作用下用DES进行加密得密文字符串“U2FsdGVkX18wkXAU8j9bEUyTVHDqib2QIy18EY+ZQgs=”：
在这里插入图片描述
将密文字符串“U2FsdGVkX18wkXAU8j9bEUyTVHDqib2QIy18EY+ZQgs=”在密钥字符串“wl1803”作用下用DES进行解密得明文字符串“weiyuting”：
在这里插入图片描述
证明：DES加解密的可逆性，DES为对称加密算法。

4.2.2 哈希逻辑

对明文字符串“weiyuting”进行MD5哈希作用，得密文字符串“f1a231a1661ec25bd0ee9f4b1a3f7412”：
在这里插入图片描述
证明：哈希不可逆，不可解密。

4.2.3 BASE64逻辑

将明文字符串“weiyuting”进行BASE64编码得密文字符串“d2VpeXV0aW5n”：
在这里插入图片描述
对密文字符串“d2VpeXV0aW5n”进行BASE64解码得明文字符串“weiyuting”：
在这里插入图片描述
证明：编解码过程可逆。

五、Rerefence

在线加密解密(采用Crypto-JS实现)：https://tool.oschina.net/encrypt

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

漏扫工具开发

前端

javascript

web安全

crypto

【crypto】基于crypto.js的web前端加解密系统实现 的相关文章

随机推荐

  • 如何优雅的部署一个SpringBoot+Vue2的个人博客项目到服务器(全栈项目部署)

    在前端时间花了大概三个星期时间纯手写了一个个人博客系统 是基于SpringBoot Vue MySQL的 下面是主页界面和后台管理界面 感兴趣的新手小伙伴可以加我哦 后期还会找一些项目 可以一起做 本文主要讲一下如何部署对应的项目到服务器

  • 区块链100篇之第九篇--默克尔树（Merkle Tree）

    中本聪在他的创世论文中一个概念 就是SPV 中文意思是简单支付验证 从这里我们可以看出SPV指的是 支付验证 而不是 交易验证 那这两者有什么区别吗 简单的说就是支付验证只需验证该笔交易是否被确认过了 而交易验证是需要验证该笔交易是否满足一

  • 权健系统服务器放在那里,《灵魂筹码》服务器版本初次亮相 测试情况符合预期...

    从测试的情况来看 服务器状况良好 带宽使用符合要求 匹配功能使用正常 微博截图 测试游戏截图 1月11日晚7点 期待已久的 灵魂筹码 服务器版本终于开始了第一次发号测试 首度与玩家见面了 这款中式恐怖风格的非对称对抗逃生游戏 在6月末登录s

  • Deeplearning4j 实战（8） : Keras为媒介导入Tensorflow/Theano等其他深度学习库的模型

    Eclipse Deeplearning4j GitChat课程 https gitbook cn gitchat column 5bfb6741ae0e5f436e35cd9fEclipse Deeplearning4j 系列博客 htt

  • 产品管理学习笔记【1】-B端产品总体流程

    Author skatexg Time 2020 11 09 end

  • 收藏！关于数据科学中数学和统计学的完全指南

    全文共6409字 预计学习时长19分钟 图源 Unsplash 数据科学家是程序员中最擅长统计学 统计学家中最擅长编程的人 乔什 威尔斯 Josh Wills 数学很重要 数学与我们周围的一切事物息息相关 从形状 图案 颜色到花朵中花瓣的数

  • hydra使用教程

    目录标题 注意 hydra详细使用教程 hydra简介 hydra常用命令 hydra支持破解的服务 协议 对应功能的参数模板 1 破解ssh 2 破解ftp 3 get方式提交 破解web登录 4 post方式提交 破解web登录 5 破

  • c语言：strcat

    C 库函数 char strcat char dest const char src 把 src 所指向的字符串追加到 dest 所指向的字符串的结尾 dest 指向目标数组 该数组包含了一个 C 字符串 且足够容纳追加后的字符串 src

  • 2023湖南省“楚怡杯”职业技能大赛“网络安全” 项目比赛任务书

    2023湖南省 楚怡杯 职业技能大赛 网络安全 项目比赛任务书 2023湖南省 楚怡杯 职业技能大赛 网络安全 项目比赛任务书 A模块基础设施设置 安全加固 200分 A 1 登录安全加固 Windows Linux A 2 Nginx安全

  • 【从零开始】力扣刷题(1)

    文章目录 前言 数组 数组的遍历 485 最大连续的一个数 495 提莫攻击 414 第三大的数 628 三个数的最大乘积 数组 统计数组中的元素 645 错误的集合 697 数组的度 484 找到所有数组中消失的数组 442 数组中重复的

  • Linux下用C编写WebSocet服务以响应HTML5的WebSocket请求

    在HTML5中新增了WebSocket 使得通讯变得更加方便 这样一来 Web与硬件的交互除了CGI和XHR的方式外 又有了一个新的方式 那么使用WebSocket又如何与下层通信呢 看看WebSocket的相关介绍就会发现 其类似于HTT

  • HTML介绍及代码

    1 HTML介绍 超文本 标记 语言 用来描述网页的一种语言 1 1 HTML CSS JS三者关系 HTML 结构 决定网页的结构和内容 是什么 CSS 表现 样式 设定网页的表现样式 什么样子 JavaScript JS 行为 控制网页

  • 华为手机计算机删除怎么恢复出厂设置,华为手机恢复出厂设置后怎么还原【图文】...

    华为手机我想大家一定听说过 这是国内最有名气的手机品牌了 华为手机经过这几年的不断发展 现在已经完全可以与三星 苹果 等这些国际大牌手机相提并论了 而且华为手机比它们还有很大的价格优势 华为手机固然好 但是用的时间长了也会出现一些状况 比方

  • DEDE调用指定文章ID来调用特定文档

    指定文章的id来调用特定文档在某些情况下还是比较实用的 下面有个示例 需要的朋友可以了解下 代码如下 dede arclist row 1 idlist 6 li a href field description a li dede arc

  • 【C++】STL——vector的使用、 vector增删查改函数的介绍和使用、push_back和pop_back、operator[]

    文章目录 1 vector的使用 2 vector的增删查改 1 push back 尾插 2 pop back 尾删 3 find 查找 4 insert 在position之前插入val 5 erase 删除指定位置的数据 6 swap

  • Python项目代码结构详解

    目录结构组织方式 简要解释一下 bin 存放项目的一些可执行文件 当然你可以起名script 之类的也行 luffy 存放项目的所有源代码 1 源代码中的所有模块 包都应该放在此目录 不要置于顶层目录 2 其子目录tests 存放单元测试代

  • QML 中播放PPT文件

    效果 一 思路 MFC 操作PPT 然年将MFC封装成dll 供Qt使用 案例分享 Qt的PPT播放器 长沙红胖子Qt的博客 CSDN博客 qt 打开ppt Qt将mfc中的句柄 加载到QWidget中 QML 通过 QQuickWidge

  • 用户态和内核态的区别

    1 操作系统需要两种CPU状态 内核态 Kernel Mode 运行操作系统程序 操作硬件 用户态 User Mode 运行用户程序 2 指令划分 特权指令 只能由操作系统使用 用户程序不能使用的指令 举例 启动I O 内存清零 修改程序状

  • 计网

    实验目的和要求 熟悉交换机各种命令模式和基本命令 学习交换机的基本配置 制作网络拓扑图 1台交换机 2台PC 2台PC能够ping通 截图 截图网络拓扑图 2台PC 2台pc机分别用连通线和交叉线连接 然后测试其连通性 学习交换机VLAN的

  • 【crypto】基于crypto.js的web前端加解密系统实现

    文章目录 一 概念介绍 1 1 crypto js介绍 1 2 加密 哈希 编码 1 2 1 加密 解密 1 2 2 散列 哈希 1 2 3 BASE64编解码 二 加解密思想 以md5为例 三 前端加密系统实现代码 3 1 加解密 3 2

热门标签