前端进行数据、密码加密之crypto-js

最新推荐文章于 2024-08-21 08:59:47 发布

衡与墨

最新推荐文章于 2024-08-21 08:59:47 发布

阅读量4.2k

点赞数 2

分类专栏：安全前端文章标签：前端加密 md5 sha1 aes rsa

本文链接：https://blog.csdn.net/le_17_4_6/article/details/103039950

版权

安全同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

前言

有时候需要对前端的一些重要数据进行加密，如密码、消息等，这篇文章通过介绍
crypto-js，来和大家探讨前端加密。

导入

npm 命令

npm install crypto-js --save

crypto-js 包括以下这些加密工具：
List of modules
crypto-js/core
crypto-js/x64-core
crypto-js/lib-typedarrays
crypto-js/md5
crypto-js/sha1
crypto-js/sha256
crypto-js/sha224
crypto-js/sha512
crypto-js/sha384
crypto-js/sha3
crypto-js/ripemd160
crypto-js/hmac-md5
crypto-js/hmac-sha1
crypto-js/hmac-sha256
crypto-js/hmac-sha224
crypto-js/hmac-sha512
crypto-js/hmac-sha384
crypto-js/hmac-sha3
crypto-js/hmac-ripemd160
crypto-js/pbkdf2
crypto-js/aes
crypto-js/tripledes
crypto-js/rc4
crypto-js/rabbit
crypto-js/rabbit-legacy
crypto-js/evpkdf
crypto-js/format-openssl
crypto-js/format-hex
crypto-js/enc-latin1
crypto-js/enc-utf8
crypto-js/enc-hex
crypto-js/enc-utf16
crypto-js/enc-base64
crypto-js/mode-cfb
crypto-js/mode-ctr
crypto-js/mode-ctr-gladman
crypto-js/mode-ofb
crypto-js/mode-ecb
crypto-js/pad-pkcs7
crypto-js/pad-ansix923
crypto-js/pad-iso10126
crypto-js/pad-iso97971
crypto-js/pad-zeropadding
crypto-js/pad-nopadding

可以看到，我们常用的md5、sha1、sha256、hmac、aes、des加密算法都有包含

模块支持模块化引入：

require.config({
    packages: [
        {
            name: 'crypto-js',
            location: 'path-to/bower_components/crypto-js',
            main: 'index'
        }
    ]
});
 
require(["crypto-js/aes", "crypto-js/sha256"], function (AES, SHA256) {
    console.log(SHA256("Message"));
});

除了npm，也可以整个下载文件，然后在script中引入

<script type="text/javascript" src="path-to/bower_components/crypto-js/crypto-js.js"></script>
<script type="text/javascript">
    var encrypted = CryptoJS.AES(...);
    var encrypted = CryptoJS.SHA256(...);
</script>

crypto-js使用

const MD5 = require('crypto-js/md5');
const SHA1 = require('crypto-js/sha1');
const SHA256 = require('crypto-js/sha256');
const HmacSHA1 = require('crypto-js/hmac-sha1');
const HmacSHA256 = require('crypto-js/hmac-sha256');

const CryptoJS = require('crypto-js');

// 用法1 ： 单个算法引入使用
let message = '衡与墨H哈哈1234343434';
let key = 'hengyumo@1234';

console.log('md5: ' + MD5(message));
console.log('sha1: ' + SHA1(message));
console.log('sha256: ' + SHA256(message));
console.log('hmac-sha1: ' + HmacSHA1(message, key));
console.log('hmac-sha256: ' + HmacSHA256(message, key));


// 用法2：整个使用，因为aes包含加密和解密，所以有两个方法，不能直接用AES来加密
let result = CryptoJS.AES.encrypt(message, key);
console.log('aes encrypt: ' + result);
// aes解密之后得到的是 字节，还需要转换成字符串！！！
console.log('aes decrypt: ' + CryptoJS.AES.decrypt(result, key).toString(CryptoJS.enc.Utf8));

result = CryptoJS.DES.encrypt(message, key);
console.log('des encrypt: ' + result);
console.log('des decrypt: ' + CryptoJS.DES.decrypt(result, key).toString(CryptoJS.enc.Utf8));

// 哈希加密可以直接CryptoJS.HmacSHA512(message, key)
console.log('hmac-sha256: ' + CryptoJS.HmacSHA512(message, key));
console.log('sha512: ' + CryptoJS.SHA512(message));


// 用法3：Base64、Hex 16进制编码对加密结果进行转换
let base64Result = CryptoJS.enc.Base64.stringify(CryptoJS.DES.decrypt(result, key));
console.log(base64Result);
let hexResult = CryptoJS.enc.Hex.stringify(CryptoJS.DES.decrypt(result, key));
console.log(hexResult);

除了这些加密之外，还有一个单独的库支持RSA加密，比如jsencrypt、js-crypto-rsa。经测试，js-crypto-rsa使用较为复杂，因此选用jsencrypt.

jsencrypt 使用

引入

$ npm install --save jsencrypt

加密、解密

html中使用

<!doctype html>
<html>
<head>
    <title>JavaScript RSA Encryption</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="../node_modules/jsencrypt/bin/jsencrypt.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());

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

                console.log(uncrypted);
                // 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>

结果:
在这里插入图片描述
控制台输出

3NFwvylSv78xi9SjWm7ZGx2ps5nrWpLptfrBNmw+3FdK1bt1k/wMdyyqW+D4kzu14kP52Z2cm36zraIJzc5cTdPwuKEUPG1OkBv/RSQaUQRQTRcnDEtT59rPWNeHQYa6iQg1ZzcNVNNiaEhmJ3/ePRtW7zq/R9DUd5N2dSSByg==

This is a test!

注：jsencrypt 只能在浏览器中使用，在node.js中无法运行。（如果有知道怎么运行的小伙伴留言告诉我一下），经测试，在ie11、edge、chrome等浏览器都能运行。