<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>加密解密</title>

		<link rel="stylesheet" type="text/css" href="css/index.css"/>

	</head>

	<body>

		<h1>加密/解密</h1>

		<div class="wrap">

			<div class="edit">

				<textarea name="" rows="" cols="" id="edit"></textarea>

			</div>

			<p>

				<span>秘钥:</span><input type="text" name="" id="askey" value="" />

			</p>

			<p>

				<span>矢量:</span><input type="text" name="" id="asvi" value="" />

			</p>

			<div class="btns">

				<span class="btn en">加密</span>

				<span class="btn den">解密</span>

			</div>

			<div class="">

				<p>结果:</p>

				<div class="result">

				</div>

			</div>

		</div>

	</body>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript" src="js/crypto-js.js"></script>

	<script type="text/javascript">

		function getAesString(data,key,iv){//加密

		    let keyed = CryptoJS.enc.Utf8.parse(key); // 加密秘钥

		    let ived = CryptoJS.enc.Utf8.parse(iv);  //  矢量

		    let encryptResult = CryptoJS.AES.encrypt(data,keyed, {   //  AES加密

		        iv: ived,

		        mode: CryptoJS.mode.CBC,

		        padding: CryptoJS.pad.Pkcs7  // 后台用的是pad.Pkcs5,前台对应为Pkcs7

    		});

    		return CryptoJS.enc.Base64.stringify(encryptResult.ciphertext);  // Base64加密;

		}

		function getDAesString(data,key,iv){//解密

		    var keyed  = CryptoJS.enc.Utf8.parse(key);

		    var ived  = CryptoJS.enc.Utf8.parse(iv);

		    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密

		    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密

		    let decryptResult = CryptoJS.AES.decrypt(ciphertext,keyed, {    //  AES解密

		        iv: ived,

		        mode: CryptoJS.mode.CBC,

		        padding: CryptoJS.pad.Pkcs7

		    });

		    return CryptoJS.enc.Utf8.stringify(decryptResult)

		}

		/*var res = getAesString("abc","1234567890000000","123456");

		console.log(res);

		console.log(getDAesString(res,"1234567890000000","123456"));*/

		var $result = $(".result");

		var $edit = $("#edit");

		var $askey = $("#askey");

		var $asvi = $("#asvi");

		$(".en").on("click",function(){

			var askey = $askey.val();

			if(askey.length % 4 !== 0 ){

				alert("密钥长度必须是4的整数倍");

				return ;

			}

			var res = getAesString($edit.val(),askey,$asvi.val());

			$result.html(res);

		});

		$(".den").on("click",function(){

			var askey = $askey.val();

			if(askey.length % 4 !== 0 ){

				alert("密钥长度必须是4的整数倍");

				return ;

			}

			var res = getDAesString($edit.val(),askey,$asvi.val());

			$result.html(res);

		})

	</script>

</html>

　　

前端 aes 加密的更多相关文章

  1. 前端AES加密解密

    最开始使用的aes-js的npm包,后来发现npm上面那个包只能加密16个长度的字节,非16个长度的字符串就会报错,后来使用的是crypto-js, AES总共有四种加密方式,我们使用的CBC方式: ...

  2. 前端AES的加密和解密

    在工作的过程中,经常要对一些数据做一些加密,当然有复杂的加密和简单的加密,也有对称加密等等.总之加密的方式有很多.今天在这里,我只是简单的分享一个我最近遇到的加密方式-AES.这个也是后端工程师用的, ...

  3. JavaScript前端和Java后端的AES加密和解密

    在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一.这里给大家简单演示AES在JavaScript前端和Java后端是如何实现加密和解密的. 直接上代码 ...

  4. JavaScript前端和Java后端的AES加密和解密(转)

    在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一.这里给大家简单演示AES在JavaScript前端和Java后端是如何实现加密和解密的. java端 ...

  5. 非对称技术栈实现AES加密解密

    非对称技术栈实现AES加密解密 正如前面的一篇文章所述,https协议的SSL层是实现在传输层之上,应用层之下,也就是说在应用层上看到的请求还是明码的,对于某些场景下要求这些http请求参数是非可读的 ...

  6. AES加密解密——AES在JavaWeb项目中前台JS加密，后台Java解密的使用

    一:前言 在软件开发中,经常要对数据进行传输,数据在传输的过程中可能被拦截,被监听,所以在传输数据的时候使用数据的原始内容进行传输的话,安全隐患是非常大的.因此就要对需要传输的数据进行在客户端进行加密 ...

  7. python3.6 安装第三方库 pyCryptodome 实现AES加密

    起因 前端日子写完的Python入库脚本,通过直接读取配置文件的内容(包含了数据库的ip,数据库的用户名,数据库的密码),因为配置文件中的数据库密码是明文显示的,所以不太安全,由此对其进行加密. 编码 ...

  8. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  9. 关于aes加密

    aes加密有几种模式:CBC,AES-128bit, Pkcs7补码方式(后台有可能是PKCS5Padding,是一样的),安卓和ios的key密钥对长度没有要求,但是前端web的密钥和偏移量必须是1 ...

随机推荐

  1. cgdb UTF-8乱码

    support utf-8 cgdb github上的issues里面有人提到了这个问题,维护者回复的是需要使用libncursesw这个支持宽字符的库来解决这个问题. 查看是否安装了该库ldconf ...

  2. 我的公众号：WebHub

    欢迎各位小可爱关注我的公众号WebHub(ID:myWebHub),公众号不定期更新软件行业的总结性文章,内容包括行业趋势和软件哲学,文章不谈技术只谈思想,满满干货! 此外,公众号文章同步CSDN博客 ...

  3. 知乎面试【五轮技术+HR】

    今年下半年去知乎面试了两次,讲道理来说,知乎有CD期, 一旦上一次面试没有通过.在一段时间内,不能再次面试知乎.后来在同事的内推下,再次获得面试机会,哈哈~~,这次面试时间还是挺长的,特记录一下. 7 ...

  4. 通过phpMyAdmin优化mysql 数据库可能存在的问题

    通过phpMyAdmin优化mysql 数据库可能存在的问题   文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论

  5. [Java复习] 分布式高可用-Hystrix

    什么是Hystrix? Hystrix 可以让我们在分布式系统中对服务间的调用进行控制,加入一些调用延迟或者依赖故障的容错机制. Hystrix 的设计原则 对依赖服务调用时出现的调用延迟和调用失败进 ...

  6. [Java复习] 设计模式 Design Pattern

    设计模式的六大原则 1.开闭原则(Open Close Principle) 对扩展开放,对修改关闭. 2.里氏代换原则(Liskov Substitution Principle) 任何基类可以出现 ...

  7. 原生app是什么意思？

    原生的就是用 Android 和ios 写的 完全符合手机系统 其他的都是通过各种工具对代码转换为手机系统可以识别

  8. Qt KDChart编译

    最近开发中需要用到甘特图,感觉KDChart这个插件不错,在这里记录一下编译过程(其实很好编译,而且一次性就过了) 下载,kdchart-2.6.1-source,解压 打开src目录,用Qt Cre ...

  9. MySQL数据库之sql_mode解释

    在MySQL5.6中,默认的SQL模式为:NO_ENGINE_SUBSTITUTION, 而在MySQL5.7中默认的SQL模式为:ONLY_FULL_GROUP_BY, STRICT_TRANS_T ...

  10. iOS-MMDrawerController第三方库的使用（转）

    链接:https://github.com/mutualmobile/MMDrawerController ,根据导航item+滚动条progressView实现的手势滑动切换视图的 MMDrawer ...