文档章节

JavaScript加密库Crypto-JS的使用

王振威
 王振威
发布于 2012/07/30 15:13
字数 703
阅读 31010
收藏 24
点赞 2
评论 6

先来图片一张,看看效果(一个采用Crypto-JS实现的工具展示):

CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括:

  • MD5
  • SHA-1
  • SHA-256
  • AES
  • Rabbit
  • MARC4
  • HMAC
    • HMAC-MD5
    • HMAC-SHA1
    • HMAC-SHA256
  • PBKDF2
散列/哈希

CryptoJS是一个纯javascript写的加密类库(下载),我们使用它只需要加入相关的引用即可:

散列/哈希示例1:

<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/components/core-min.js"></script>
<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/rollups/md5.js"></script>
<script type="text/javascript">

  alert("你好,欢迎来到开源中国在线工具,这是一个MD5测试 MD5:"+CryptoJS.MD5("你好,欢迎来到开源中国在线工具,这是一个MD5测试"));
  
</script>

点此编辑代码并查看执行效果

上面就一行代码就可以轻松搞定一个MD5的哈希,使用非常方便。

同样,如果你想进行sha1、sha256等等诸多哈希算法,只需要引入相关的库就行了。

对于 HMAC-sha1 HMAC-sha256、HMAC-md5等,用法是这样:

散列/哈希示例2

<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/components/core-min.js"></script>
<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/rollups/hmac-md5.js"></script>
<script type="text/javascript">
  var pwd="password";
  alert("你好,欢迎来到开源中国在线工具,这是一个MD5测试 Hmac-MD5:   "+CryptoJS.HmacMD5("你好,欢迎来到开源中国在线工具,这是一个MD5测试",pwd));
  
</script>

点此编辑代码并查看执行效果

PBKDF2哈希算法

这里将PBKDF2算法单独列出来,是因为他稍有不同,看如下代码:

散列/哈希示例3

<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/components/core-min.js"></script>
<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/rollups/pbkdf2.js"></script>
<script type="text/javascript">
  
  var salt=CryptoJS.enc.Utf8.parse("salt");  //盐
  
  var iter=1000;  //迭代次数
  
  var mi=CryptoJS.PBKDF2("你好,欢迎来到开源中国在线工具,这是一个PBKDF2测试", salt,
			{ keySize: parseInt(4),
			iterations: parseInt(iter) }
			);
 
  alert("你好,欢迎来到开源中国在线工具,这是一个PBKDF2测试:----------哈希值:"+mi);
  
</script>

点此编辑代码并查看执行效果

加密/解密

加密解密示例1:

<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/components/core-min.js"></script>
<script type="text/javascript" src="http://www.osctools.net/js/CryptoJS/rollups/aes.js"></script>
<script type="text/javascript">
  var pwd="我的密码";
  
  var mi=CryptoJS.AES.encrypt("你好,欢迎来到开源中国在线工具,这是一个AES加密测试",pwd);
  alert("你好,欢迎来到开源中国在线工具,这是一个AES加密测试----密文:"+mi);
  
  var result=CryptoJS.AES.decrypt(mi,pwd).toString(CryptoJS.enc.Utf8);
  
  alert("解密结果:"+result);
  
</script>

点此编辑代码并查看执行效果

同样的,几种加密算法的使用方法都比较类似,需要使用哪个引入相关的js文件就ok了。

这里的在线加密/解密,散列/哈希工具是使用这个库构建的:http://www.osctools.net/encrypt

© 著作权归作者所有

共有 人打赏支持
王振威

王振威

粉丝 502
博文 28
码字总数 20820
作品 0
深圳
程序员
加载中

评论(6)

爱笑的胖子
小程序可以引入吗
zhuganlai
zhuganlai
mark
Skqing
Skqing
前台这样加密
var account = $("#account").val();
var password = $("#password").val();
var pwdmd5 = CryptoJS.MD5(password);
var md5str = pwdmd5.toString();
console.log("加密盐:"+md5str);
var ciphertext = CryptoJS.AES.encrypt(account, md5str);
$("#ciphertext").val(ciphertext);

后台解密的时候报错:
Exception in thread "main" java.lang.NumberFormatException: For input string: "U"
  at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
  at java.lang.Integer.parseInt(Integer.java:492)
  at com.cloudwave.fwcore.utils.security.AesEncrypt.parseHexStr2Byte(AesEncrypt.java:241)
  at com.cloudwave.fwcore.utils.security.AesEncrypt.main(AesEncrypt.java:269)
riverpot
riverpot
谢谢,正好用上了。
异常爱
异常爱
感谢楼主,非常有用的~
李其生
李其生
很有用,学习了
JavaScript外部调用Js(自己理解加参考百度)

JavaScript文件外部加载的好处: 避免使用 避免使用CDATA。 统一定义JavaScript代码,方便查看,方便维护。 使代码更安全,可以压缩,加密单个JavaScript文件。 浏览器可以缓存JavaScript文件...

codingcoge ⋅ 01/11 ⋅ 0

cxwithyxy/Axure_Js_Inject

AxureJsInject v1.0 可以在产品原型(RP)中加入你想要的js代码,这些js代码会用浏览器浏览产品原型的时候执行 支持 目前支持 Axure rp 8.1.0.3372 其他版本有待测试 开始 在元件库中导入 Ax...

陈轩大魔王 ⋅ 04/15 ⋅ 0

爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137 ⋅ 06/05 ⋅ 0

[译] JavaScript 是如何工作的:对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适

原文地址:How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本......

stormluke ⋅ 05/23 ⋅ 0

精读《现代 js 框架存在的根本原因》

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

JavaScript 如何打败众语言,成为 Node 的实现语言?

Node.js 是一种将 JS 放在服务器端实现的平台,而为什么要把js放到服务器端实现,JS 最初设计是在浏览器端解释执行,后来为什么搞Node.js 把他放在服务器端执行呢? 关于这个问题,近日有网友...

达尔文 ⋅ 04/21 ⋅ 0

CC框架实践(3): 让jsBridge更优雅

前言 CC框架下如何让我们的jsBridge更加优雅? jsBridge是作为js和java之间通信的桥梁,本身它的职责只是完成通信。 本文不是介绍js与java通信过程的实现,你可以使用第三方库(如:JsBridg...

lucky_billy ⋅ 昨天 ⋅ 0

精读《现代 js 框架存在的根本原因

1 引言 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架? 原文地址,建议先阅读原文,或者阅读概述。 2 概述 现在前端框架非常多了,如果让我们回答 “为什么要用前端...

黄子毅 ⋅ 05/21 ⋅ 0

WebAssembly 再添一员猛将:将支持使用 Go 语言

WebAssembly 在 2018 年第一季度算得上是真正取得了成功,这是自 Web 诞生以来首个 JavaScript 原生替代方案。现在,Go 语言也宣布加入 wasm! 在 Wasm 平台上添加对 Golang 的支持将被添加到...

局长 ⋅ 04/15 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 28分钟前 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 33分钟前 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 42分钟前 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 42分钟前 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 43分钟前 ⋅ 0

React Native & Weex 区别

JS引擎 Weex使用V8, React native使用JSCore JS开发框架 ( Js Framework ) Weex基于vue.js(2W+ star)。小巧轻量的前端开发框架,组件化,数据绑定,2.0引入virtual dom。 ReactNative使用...

东东笔记 ⋅ 51分钟前 ⋅ 1

UIkit 分页组件动态加载简单实现

1. 问题描述 使用过UIkit分页组件的都清楚,UIkit的分页不能动态刷新数据,也就是不能在点击下一页的时候,动态从后台加载数据,并且刷新页数以及该页数上的数据,下面是一个简单实现,没有做...

影狼 ⋅ 52分钟前 ⋅ 0

Mobx入门之三:Provider && inject

上一节中<App/>组件传递状态temperatures给children -- <TemperatureInput />,如果组建是一个tree, 那么属性的传递则会非常繁琐。redux使用Provider给子组件提供store, connect将子组件和s...

pengqinmm ⋅ 54分钟前 ⋅ 0

魔兽世界 7.0版本 S23/S24/S25全职业普通+精锐套

  死亡骑士   (联盟)   (部落)   (精锐)   恶魔猎手   (联盟)   (部落)   (精锐)   德鲁伊   (联盟)   (部落)   (精锐)   猎人   (联盟) ...

wangchen1999 ⋅ 今天 ⋅ 0

maven顶级pom和子pom的版本号批量修改

当一个版本发布,新起一个版本时,我们只需要手动修改一下项目中pom.xml的版本号就可以了。但是如果这个maven项目有很多的子模块项目,那么一个个手动的去改就显得费时费力又繁琐了。还好,m...

ArlenXu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部