前端提交数据到后台，如果不适用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

  1. <html>
  2. <head>
  3. <script src="md5.js" type=text/javascript></script>
  4. </head>
  5. <body>
  6. <label>"I love you" MD5 value = </label><span id="md5control"></span>
  7. <script type=text/javascript>
  8.     hash = hex_md5("I love you");
  9.     //产生的hash变量就是"input string"的md5值，用在表单提交时
  10.     document.getElementById("md5control").innerText = hash;
  11. </script>
  12. </body>
  13. </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

测试代码：

  1. <html>
  2. <head>
  3. <script src="jsaes.js" type=text/javascript></script>
  4. </head>
  5. <body>
  6. <label>"00 11 22 .. EE FF" AES value = </label><span id="AEScontrol"></span>
  7. <br/>
  8. <label>decrypted value = </label><span id="decryptedValue"></span>
  9. <script type=text/javascript>  
  10.  
  11.     //The following code example enciphers the plaintext block '00 11 22 .. EE FF' with the 256 bit key '00 01 02 .. 1E 1F'.
  12.     AES_Init();
  13.     var block = new Array(16);
  14.     for(var i = 0; i < 16; i++)
  15.       block[i] = 0x11 * i;
  16.     //生成128位密钥
  17.     var key = new Array(32);
  18.     for(var i = 0; i < 32; i++)
  19.       key[i] = i;
  20.     AES_ExpandKey(key);
  21.     AES_Encrypt(block, key);
  22.     document.getElementById("AEScontrol").innerText = block;
  23.     AES_Done();
  24.  
  25.     //下面对加密后的block进行解密
  26.     AES_Init();
  27.     //生成128位密钥
  28.     var key = new Array(32);
  29.     for(var i = 0; i < 32; i++)
  30.       key[i] = i;
  31.     AES_ExpandKey(key);
  32.     AES_Decrypt(block, key);
  33.     document.getElementById("decryptedValue").innerText = block;
  34.     AES_Done();
  35.  
  36. </script>
  37. </body>
  38. </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-----

精简代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>JSEncrypt Example</title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.   <script src="jquery.js"></script>
  7.   <script type="text/javascript" src="bin/jsencrypt.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="container">
  12.  
  13. <label>"I love you" RSA PUBLIC ENCRYPTED value = </label><br/>
  14. <textarea id="RSAcontrol" rows="15" cols="65">
  15. </textarea>
  16. <br/>
  17. <label>decrypted value = </label><span id="decryptedValue"></span>
  18. <br/>
  19. <br/>
  20. <br/>
  21. <label for="privkey">Private Key</label><br/>
  22. <textarea id="privkey" rows="15" cols="65">-----BEGIN RSA PRIVATE KEY-----
  23. MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
  24. WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
  25. aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
  26. AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
  27. xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
  28. m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
  29. 8XJTSdcIX4a3gy3GGCJxOzv16XHxD03GW6UNLmfPwenKu+cdrQeaqEixrCejXdAF
  30. z/7+BSMpAkEA8EaSOeP5Xr3ZrbiKzi6TGMwHMvC7HdJxaBJbVRfApFrE0/mPwmP5
  31. rN7QwjrMY+0+AbXcm8mRQyQ1+IGEembsdwJBAN6az8Rv7QnD/YBvi52POIlRSSIM
  32. V7SwWvSK4WSMnGb1ZBbhgdg57DXaspcwHsFV7hByQ5BvMtIduHcT14ECfcECQATe
  33. aTgjFnqE/lQ22Rk0eGaYO80cc643BXVGafNfd9fcvwBMnk0iGX0XRsOozVt5Azil
  34. psLBYuApa66NcVHJpCECQQDTjI2AQhFc1yRnCU/YgDnSpJVm1nASoRUnU8Jfm3Oz
  35. uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
  36. -----END RSA PRIVATE KEY-----</textarea><br/>
  37. <label for="pubkey">Public Key</label><br/>
  38. <textarea id="pubkey" rows="15" cols="65">-----BEGIN PUBLIC KEY-----
  39. MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtN
  40. FOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76
  41. xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4
  42. gwQco1KRMDSmXSMkDwIDAQAB
  43. -----END PUBLIC KEY-----</textarea><br/>
  44.  
  45.   <script type="text/javascript">
  46.  
  47.   // Call this code when the page is done loading.
  48.   $(function() {
  49.       // Encrypt with the public key...
  50.       var encrypt = new JSEncrypt();
  51.       encrypt.setPublicKey($('#pubkey').val());
  52.       var encrypted = encrypt.encrypt("I love you");
  53.       document.getElementById("RSAcontrol").innerText = encrypted;
  54.  
  55.       // Decrypt with the private key...
  56.       var decrypt = new JSEncrypt();
  57.       decrypt.setPrivateKey($('#privkey').val());
  58.       var uncrypted = decrypt.decrypt(encrypted);
  59.       document.getElementById("decryptedValue").innerText = uncrypted;
  60.   });
  61. </script>
  62.  
  63. </div>
  64. </body>
  65. </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

加密解密及其javascript实现的更多相关文章

  1. Javascript实现base64的加密解密【转】

    场景 这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致. ...

  2. JAVASCRIPT加密方法，JS加密解密综述（7种）

    一:最简单的加密解密 对于JAVASCRIPT函数escape()和unescape()想必是比较了解啦(很多网页加密在用它们),分别是编码和解码字符串,比如例子代码 用escape()函数加密后变为 ...

  3. 兼容javascript和C#的RSA加密解密算法，对web提交的数据进行加密传输

    Web应用中往往涉及到敏感的数据,由于HTTP协议以明文的形式与服务器进行交互,因此可以通过截获请求的数据包进行分析来盗取有用的信息.虽然https可以对传输的数据进行加密,但是必须要申请证书(一般都 ...

  4. C#, Java, PHP, Python和Javascript几种语言的AES加密解密实现[转载]

    原文:http://outofmemory.cn/code-snippet/35524/AES-with-javascript-java-csharp-python-or-php c#里面的AES加密 ...

  5. JavaScript加密解密7种方法总结分析

    原文地址:http://wenku.baidu.com/view/9048edee9e31433239689357.html 本文一共介绍了七种javascript加密方法: 在做网页时(其实是网页木 ...

  6. Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)

    系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...

  7. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  8. 一段有用的javascript加密解密

    今天在做一个老项目时,遇到一个需求,在javascript将url中的参数加密解密,从网上找发现了这段有用的代码: <SCRIPT LANGUAGE="JavaScript" ...

  9. C# javascript 采用 RSA 加密解密

    C# javascript 采用 RSA 加密解密 1.C#提供公钥 2.javascript用公钥加密 3.C#用私钥解密 4.javascript 类库 https://www.pidder.de ...

随机推荐

  1. 20145308刘昊阳 《Java程序设计》实验一 Java开发环境的熟悉 实验报告

    20145308刘昊阳 <Java程序设计>实验一报告 实验名称 Java开发环境的熟悉 实验内容 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试J ...

  2. Codeforce - Street Lamps

    Bahosain is walking in a street of N blocks. Each block is either empty or has one lamp. If there is ...

  3. 【POJ】3648 Wedding

    http://poj.org/problem?id=3648 题意:n对人(编号0-n-1,'w'表示第一个人,'h'表示第二个人),每对两个,人坐在桌子两侧.满足:1.每对人中的两个人不能坐在同一侧 ...

  4. 【bzoj3527】[Zjoi2014]力 FFT

    2016-06-01  21:36:44 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3527 我就是一个大傻叉 微笑脸 #include&l ...

  5. nodeJS中exports和mopdule.exports的区别

    每一个node.js执行文件,都自动创建一个module对象,同时,module对象会创建一个叫exports的属性,初始化的值是 {} module.exports = {}; Node.js为了方 ...

  6. Node.js的函数返回值

    先看一段代码: function select(sqlscript){     var result = "";     sql.connect(config, function( ...

  7. Watering Grass

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/E 题意: 给定一条草坪,草坪上有n个喷水装置.草坪长 ...

  8. Eclipse for Mac 常用快捷键

    为了提高开发效率,Eclipse 为我们提供了许多快捷键,它们能够帮助我们快速和方便的完成一些繁琐的操作.在这里只提供 Eclipse for Mac 的常用快捷键. Command + O:显示大纲 ...

  9. load/get延迟加载和及时加载

    load和get方法的区别: Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 区别在于: 如果未能发现符合条件的记录,get方法返回nul ...

  10. Hadoop.2.x_源码编译

    一.基本环境搭建 1. 准备 hadoop-2.5.0-src.tar.gz apache-maven-3.0.5-bin.tar.gz jdk-7u67-linux-x64.tar.gz proto ...