前端的一些加密方式

哆来A梦没有口袋

已于 2022-01-28 10:45:06 修改

阅读量1.9k

点赞数

分类专栏：一天一个小知识文章标签： md5加密 jsencrypt加密前端加密方式关于md5加密

于 2020-11-02 11:20:00 首次发布

本文链接：https://blog.csdn.net/qq_42625428/article/details/109443753

版权

一天一个小知识专栏收录该内容

14 篇文章 2 订阅

订阅专栏

方式一：md5

什么是md5?

百度的解释 - MD5是message-digest algorithm 5（信息-摘要算法）的缩写，bai被广泛用于加du密和解密技术上，它可以说是文件的“数zhi字指纹dao”。任何一个文件，无论是可执行程序、图像文件、临时文件或者其他任何类型的文件，也不管它体积多大，都有且只有一个独一无二的MD5信息值，并且如果这个文件被修改过，它的MD5值也将随之改变。

官方解释太过于术语化 - 简单的理解，就是md5可以将信息进行加密，从而达到不被盗用保护信息，避免泄露信息和纂改信息 -

原理 - 就是一系列的算法，然后进行加密(至于什么算法，不清楚不明了也不想知道)

怎么使用md5?

方式一

直接引入js文件

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script>
  let p = md5('aaaaa')
</script>

方式二

vue,react等项目，下载md5，引入在使用

yarn add js-md5

import md5 from 'js-md5'

md5(aaa)

如图 - 123456经过md5加密后的信息

‘

应用

一般用于进行对密码等的加密

md5加密之后，是不可逆的，在前端传入后，在后端看到的密码其实也是“e10adc......”

方式二 : jsencrypt

什么是jsencrypt?

jsencrypt也是一种加密方式，与md5不同，他是可以通过后端解密的，它具备公钥和私钥，一般来说前端公钥加密后台私钥解密。若想要实现双向加密，需要使用两套密钥(前台向后端发送数据时，使用第一套公钥加密，后台用第一套私钥解密。后台向前台发送数据时，后台使用第二套公钥加密，前台使用第二套私钥解密).

怎么使用？

首先上链接 - jsencrypt - npm

同样是可以分为下载和移入,一般其余前端来说，秘钥是后端生成给的，可以参考一下文档里面，如果获取到秘钥

方式一 - js直接引入

<!doctype html>
<html>

<head>
    <title>JavaScript RSA Encryption</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>
    <script type="text/javascript">

        // Call this code when the page is done loading.
        $(function () {

            // Run a quick encryption/decryption when they click.
            $('#testme').click(function () {

                // Encrypt with the public key...
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey($('#pubkey').val());
                var encrypted = encrypt.encrypt($('#input').val());

                // Decrypt with the private key...
                var decrypt = new JSEncrypt();
                decrypt.setPrivateKey($('#privkey').val());
                var uncrypted = decrypt.decrypt(encrypted);

                // Now a simple check to see if the round-trip worked.
                if (uncrypted == $('#input').val()) {
                    alert('It works!!!');
                }
                else {
                    alert('Something went wrong....');
                }
            });
        });
    </script>
</head>

<body>
    <label for="privkey">Private Key</label><br />
    <textarea id="privkey" rows="15" cols="65">-----BEGIN RSA PRIVATE KEY-----
MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
8XJTSdcIX4a3gy3GGCJxOzv16XHxD03GW6UNLmfPwenKu+cdrQeaqEixrCejXdAF
z/7+BSMpAkEA8EaSOeP5Xr3ZrbiKzi6TGMwHMvC7HdJxaBJbVRfApFrE0/mPwmP5
rN7QwjrMY+0+AbXcm8mRQyQ1+IGEembsdwJBAN6az8Rv7QnD/YBvi52POIlRSSIM
V7SwWvSK4WSMnGb1ZBbhgdg57DXaspcwHsFV7hByQ5BvMtIduHcT14ECfcECQATe
aTgjFnqE/lQ22Rk0eGaYO80cc643BXVGafNfd9fcvwBMnk0iGX0XRsOozVt5Azil
psLBYuApa66NcVHJpCECQQDTjI2AQhFc1yRnCU/YgDnSpJVm1nASoRUnU8Jfm3Oz
uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
-----END RSA PRIVATE KEY-----</textarea><br />
    <label for="pubkey">Public Key</label><br />
    <textarea id="pubkey" rows="15" cols="65">-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtN
FOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76
xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4
gwQco1KRMDSmXSMkDwIDAQAB
-----END PUBLIC KEY-----</textarea><br />
    <label for="input">Text to encrypt:</label><br />
    <textarea id="input" name="input" type="text" rows=4 cols=70>This is a test!</textarea><br />
    <input id="testme" type="button" value="Test Me!!!" /><br />
</body>

</html>

方式二 - vue,react进行下载使用

yarn add jsencrypt

import JsEncrypt from 'jsencrypt'

let $mKey = '公钥'

function getRSA(word){
    var encrypt = new JsEncrypt();
    encrypt.setPublicKey($mKey);
    var encrypted = encrypt.encrypt(word);
    return encrypted.toString();
}

getRSA('aaaa')

暂时就先介绍这两种加密方式啦，这算是常用的前端加密方式啦

哆来A梦没有口袋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端的一些加密方式

方式一：md5什么是md5?百度的解释 -MD5是message-digest algorithm 5（信息-摘要算法）的缩写，bai被广泛用于加du密和解密技术上，它可以说是文件的“数zhi字指纹dao”。任何一个文件，无论是可执行程序、图像文件、临时文件或者其他任何类型的文件，也不管它体积多大，都有且只有一个独一无二的MD5信息值，并且如果这个文件被修改过，它的MD5值也将随之改变。官方解释太过于术语化 - 简单的理解，就是md5可以将信息进行加密，从而达到不被盗用保护信息，避免泄露信..
复制链接

扫一扫