(2014-11-14 15:37:35)

标签:

it

分类: Web前端开发

摘要:

大部分动态网站都支持从客户端到服务器传递数据,如果传递的数据被别人截取就非常危险,尤其是一些用户名密码之类的。这时候就需要我们在传递数据之前对数据进行加密。现在的加密算法已经有很多了,例如:MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC等等。下面分享几款前端加密的插件。

  1. braintree.js
    它是设计用于与客户端的库。加密库将数据(通常是在一个移动设备或merchant-hosted网站通过表单提交)和加密使用非对称密钥对的公钥提交。在服务器上,使用客户端发送加密数的公钥。

    1 var clientSideEncryptionKey = "YOUR_ENCRYPTION_KEY";
    2 var braintree = Braintree.create(clientSideEncryptionKey);
    3 $(#transaction_form).submit(function() {
    4 encryptedForm().submit();
    5 return false;
    6 });
  2. BurningPig-encryption
    使用RSA算法进行加密
     1 var rsa = require("./src/rsa.js");
    2 var key = new rsa.Key();
    3 ​
    4 var message = "All your bases are belong to us.";
    5 console.log("Message:\n"+message+"\n");
    6
    7 // Generate a key
    8 key.generate(1024, "10001");
    9 console.log("Key:\n");
    10 console.log("n:" + key.n.toString(16));
    11 console.log("e:" + key.e.toString(16));
    12 console.log("d:" + key.d.toString(16));
    13 console.log("\n");
    14
    15 // Encrypt
    16 var encrypted = key.encrypt(message);
    17 console.log("Encrypted:\n" + rsa.linebrk(encrypted, 64) + "\n" );
    18
    19 // Decrypt
    20 var decrypted = key.decrypt(encrypted);
    21 console.log("Decrypted:" + rsa.linebrk(decrypted, 64) + "\n");
    22
    23 var sig = key.signString(message, "sha256");
    24 console.log("String signature: \n" + rsa.linebrk(sig, 64));
    25
    26 var pubkey = new rsa.Key();
    27 pubkey.n = key.n;
    28 pubkey.e = key.e;
    29
    30 var verified = pubkey.verifyString(message, sig);
    31
    32 console.log("Verfied: " + verified);
  3. MD5
    项目中使用的就是这个插件。
     1 // quick test
    2 var input1 = "ABC";
    3 var input2 = ["A","B","C"];
    4 var input3 = [0x41, 0x42, 0x43];
    5 alert(faultylabs.MD5(input1) == "902FBDD2B1DF0C4F70B4A5D23525E932");
    6 alert(faultylabs.MD5(input2) == "902FBDD2B1DF0C4F70B4A5D23525E932");
    7 alert(faultylabs.MD5(input3) == "902FBDD2B1DF0C4F70B4A5D23525E932");
    8
    9 // ArrayBuffer
    10 var abuf = new ArrayBuffer(3)
    11 var vu8 = new Uint8Array(abuf)
    12 vu8[0] = 0x41; vu8[1] = 0x42; vu8[2] = 0x43
    13 alert(faultylabs.MD5(abuf) == "902FBDD2B1DF0C4F70B4A5D23525E932")
    14
    15 // Typed Array Uint32Array
    16 var au32 = new Uint32Array(1)
    17 au32[0] = 0xDDCCBBAA
    18 alert(faultylabs.MD5(au32) == "CA6FFBF95B47864FD4E73F2601326304")
  4. crypto.js
    是一个综合的库,包含很多算法,MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC,HMAC-MD5,HMAC-SHA1,HMAC-SHA256,PBKDF2
    1 var CryptoJS = require("crypto-js");
    2 console.log(CryptoJS.HmacSHA1("Message", "Key"));
  5. sjcl
    1 sjcl.encrypt("password", "data")
    2 sjcl.decrypt("password", "encrypted-data")
  6. jcryption
    ​在正常情况下,当提交数据时,如果没有SSL数据将使用纯文本的方式发送。jCryption这个jQuery插件能够加密由Forms提交的POST/GET数据。jCryption使用RSA公钥密码算法加密,该项目还提供一个PHP文件来处理数据的解密。
    1 $(function() {
    2 $("form").jCryption();
    3 });
  7. jshashes
    jshashes是一个纯JavaScript实现的扩展散列算法。它的目标是提供一个独立的、快速和简单的散列算法解决方案对客户端和服务器端都是JavaScript环境的。包括算法:MD5,SHA-1,SHA-256,SHA-512,HMAC,RIPEMD-160
     1 // new MD5 instance
    2 var MD5 = new Hashes.MD5;
    3 // new SHA1 instance
    4 var SHA1 = new Hashes.SHA1;
    5 // new SHA256 instance
    6 var SHA256 = new Hashes.SHA256;
    7 // new SHA512 instace
    8 var SHA512 = new Hashes.SHA512;
    9 // new RIPEMD-160 instace
    10 var RMD160 = new Hashes.RMD160;
    11 // sample string
    12 var str = 'Sample text!';
    13 // output to console
    14 console.log('MD5: ' + MD5.hex(str));
    15 console.log('SHA1: ' + SHA1.hex(str));
    16 console.log('SHA256: ' + SHA256.hex(str));
    17 console.log('SHA512: ' + SHA512.hex(str));
    18 console.log('RIPEMD-160: ' + RMD160.hex(str));

小结:

  网上也有很多关于数据加密的,大部分思路是使用非对称加密方法,如果你有好的方法可以多多交流。

  另外附上两个在node.js环境上加密解密的插件:

  https://github.com/gwjjeff/cryptojs

  https

js前端数据加密插件的更多相关文章

  1. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  2. JS前端图形化插件之利器Gojs组件(php中文网)

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  3. 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  4. Sublime编辑器 前端 必备插件

    sublime编辑器前端必备插件 下面这一行是Package Control包安装,它是sublime的插件包管理器.新安装的sublime 里没有Package Control,按一下ctrl+~, ...

  5. VSCode 前端必备插件

    VSCode 前端必备插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试 { "versio ...

  6. 第一百八十七节,jQuery,知问前端--cookie 插件,注册成功后生成cookie,显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  7. 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

  8. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  9. Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG

    摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...

随机推荐

  1. 【刷题】BZOJ 1003 [ZJOI2006]物流运输

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  2. BZOJ4337:[BJOI2015]树的同构——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4337 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根, ...

  3. BZOJ5301:[CQOI2018]异或序列——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5301 https://www.luogu.org/problemnew/show/P4462 已知 ...

  4. 20181015 考试记录&数论

    题目传送门 W神爷的题解 数论 小 M 的算式 [问题描述] 小 M 在做数学作业的时候遇到了一个有趣的问题:有一个长度为 n 的数字 串 S,小 M 需要在数字之间填入若干个“+”和恰好一个“=”, ...

  5. Linux之SSL安全套接字20160704

    使用SSL前,先有 基本的TCP套接字连接.见demo代码 SSL_library_init();//在使用OpenSSL 之前,必须进行相应的协议初始化工作 OpenSSL_add_all_algo ...

  6. Android数据过滤器:Filter

    类图: 通常可以将SearchView和ListView结合,实现数据的搜索和过滤. 1.监听SearchView,SearchView.setOnQueryTextListener(OnQueryT ...

  7. 在MVC5中使用Ninject 依赖注入

    各大主流.Net的IOC框架性能测试比较 : http://www.cnblogs.com/liping13599168/archive/2011/07/17/2108734.html 使用NuGet ...

  8. mvc Dapper_Report_Down_ExcelFile

    一.基于Aspose.Cells.Dapper导出Excel Dapper的Query返回要不是对象的IEnumerable,要不是Dynamic的IEnumerable,都不适合不用反射就能够动态获 ...

  9. word2vec Explained: deriving Mikolov et al.'s negative-sampling word-embedding method

    最近接到任务研究word2vec,感觉网络上关于这个的资料层次不齐,总感觉解释的都没有那么完善.或许就连作者本人也不是非常清楚为什么他的模型好使.论文中提到的negtive sampling给了我很大 ...

  10. Vuejs - 深入浅出响应式系统

    Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 Javascript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样 ...