加密解密及其javascript实现

前端提交数据到后台，如果不适用https协议，则提交的数据就有被第三者窃取的可能。前端使用js来编码数据主要分为以下三种：

1、摘要算法

2、对称加密

3、非对称加密

下面分别介绍三种算法中对应的一个实例，并给出js实现例子。

MD5（摘要算法）

百度百科

MD5即Message-Digest Algorithm 5（信息-摘要算法5），用于确保信息传输完整一致。是计算机广泛使用的杂凑算法之一（又译摘要算法、哈希算法），主流编程语言普遍已有MD5实现。将数据（如汉字）运算为另一固定长度值，是杂凑算法的基础原理，MD5的前身有MD2、MD3和MD4。

MD5的作用是让大容量信息在用数字签名软件签署私人密钥前被"压缩"成一种保密的格式（就是把一个任意长度的字节串变换成一定长的十六进制数字串）。除了MD5以外，其中比较有名的还有sha-1、RIPEMD以及Haval等

javascript实现

实现官网

http://pajhome.org.uk/crypt/md5/index.html

网站介绍用途：

1、保护明文密码，将密码经过MD5函数换算为 128bit的散列值。

2、生成密码，用户使用统一的密码，同时添加上域名，计算出MD5散列值，用于各个网站的密码。

3、生成自解密文档，生成的文档，可以嵌入html网页，任何用户都可以访问此网页，但是只有用户输入正确的密码才能看到网页原貌。http://pajhome.org.uk/crypt/md5/uses.html#sdp

下载网站

http://pajhome.org.uk/crypt/md5/scripts.html

下载链接

http://pajhome.org.uk/crypt/md5/jshash-2.2.zip

此库同时实现的散列摘要算法

MD5	Source	Specification
RIPEMD-160	Source	Specification
SHA-1	Source	Specification
SHA-256	Source	Specification
SHA-512	Source	Specification
HMAC

实验code

<html>
<head>
<script src="md5.js" type=text/javascript></script>  
</head>
<body>
<label>"I love you" MD5 value = </label><span id="md5control"></span>
<script type=text/javascript>  
    hash = hex_md5("I love you"); 
    //产生的hash变量就是"input string"的md5值，用在表单提交时
    document.getElementById("md5control").innerText = hash;
</script>
</body>
</html>

网页输出：

"I love you" MD5 value = e4f58a805a6e1fd0f6bef58c86f9ceb3

AES（对称加密）

加密强度高于DES的对称加密方法，使用同一个密钥实现，加密和解密。

实现官网：

http://point-at-infinity.org/jsaes/

网站例子和解释：

http://people.eku.edu/styere/Encrypt/JS-AES.html

AES was designed to be efficient in both hardware and software, and supports a block length of 128 bits and key lengths of 128, 192, and 256 bits

测试代码：

<html>
<head>
<script src="jsaes.js" type=text/javascript></script>  
</head>
<body>
<label>"00 11 22 .. EE FF" AES value = </label><span id="AEScontrol"></span>
<br/>
<label>decrypted value = </label><span id="decryptedValue"></span>
<script type=text/javascript>  


    //The following code example enciphers the plaintext block '00 11 22 .. EE FF' with the 256 bit key '00 01 02 .. 1E 1F'. 
    AES_Init();
    var block = new Array(16);
    for(var i = 0; i < 16; i++)
      block[i] = 0x11 * i;
    //生成128位密钥
    var key = new Array(32);
    for(var i = 0; i < 32; i++)
      key[i] = i;
    AES_ExpandKey(key);
    AES_Encrypt(block, key);
    document.getElementById("AEScontrol").innerText = block;
    AES_Done();

    //下面对加密后的block进行解密
    AES_Init();
    //生成128位密钥
    var key = new Array(32);
    for(var i = 0; i < 32; i++)
      key[i] = i;
    AES_ExpandKey(key);
    AES_Decrypt(block, key);
    document.getElementById("decryptedValue").innerText = block;
    AES_Done();
    
</script>
</body>
</html>

网页输出：

"00 11 22 .. EE FF" AES value = 142,162,183,202,81,103,69,191,234,252,73,144,75,73,96,137
decrypted value = 0,17,34,51,68,85,102,119,136,153,170,187,204,221,238,255

RSA（非对称加密）

介绍

http://pajhome.org.uk/crypt/rsa/index.html

非对称加密，采用公钥进行加密，私钥进行解密。

实现网站与使用介绍

https://github.com/travist/jsencrypt

下载：

http://travistidwell.com/jsencrypt/

在线演示demo：

http://travistidwell.com/jsencrypt/example.html

实验：

私钥

-----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-----

公钥

-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtN
FOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76
xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4
gwQco1KRMDSmXSMkDwIDAQAB
-----END PUBLIC KEY-----

精简代码：

<!DOCTYPE html>
<html>
<head>
  <title>JSEncrypt Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="jquery.js"></script>
  <script type="text/javascript" src="bin/jsencrypt.js"></script>
</head>
<body>

<div class="container">

<label>"I love you" RSA PUBLIC ENCRYPTED value = </label><br/>
<textarea id="RSAcontrol" rows="15" cols="65">
</textarea>
<br/>
<label>decrypted value = </label><span id="decryptedValue"></span>
<br/>
<br/>
<br/>
<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/>

  <script type="text/javascript">

  // Call this code when the page is done loading.
  $(function() {
      // Encrypt with the public key...
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey($('#pubkey').val());
      var encrypted = encrypt.encrypt("I love you");
      document.getElementById("RSAcontrol").innerText = encrypted;

      // Decrypt with the private key...
      var decrypt = new JSEncrypt();
      decrypt.setPrivateKey($('#privkey').val());
      var uncrypted = decrypt.decrypt(encrypted);
      document.getElementById("decryptedValue").innerText = uncrypted;
  });
</script>

</div>
</body>
</html>

网页输出：

"I love you" RSA PUBLIC ENCRYPTED value =

4Bgtqo6qfIZKC97wdc89aph9FrJRDqzU71BrSaoiYp/G6tUG8L5bv9/6xmD5eMDbviwVNOKPveRsQcbpCBOOKqSx50SwnnHTm0TwFaNex9h3ldV4XLyl3+OjWGdNFLaq/OCdNbZ0B+xPDlQTw+UZn1PR3FRSzpgHwQNkuEGhsYA=

decrypted value = I love you

公钥和私钥生成器：

命令行生成：

https://github.com/travist/jsencrypt

http://help.alipay.com/support/help_detail.htm?help_id=397433

posted @ 2014-11-30 22:23 lightsong 阅读(11413) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Stay Hungry,Stay Foolish!

lightsong

{Web: [React, Vue, NodeJS, HTTP]，DevOps:[Jenkins,Docker,K8S], Languages:[Python, JS, C, Lua, Shell, Groovy]}

加密解密及其javascript实现

MD5（摘要算法）

AES（对称加密）

RSA（非对称加密）

公告