<!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. 2018-2019-2 20165234 《网络对抗技术》 Exp7 网络欺诈防范

    Exp7  网络欺诈防范 实验内容 1. 简单应用SET工具建立冒名网站 2. ettercap DNS spoof 3. 结合应用两种技术,用DNS spoof引导特定访问到冒名网站 4. 请勿使用 ...

  2. THINKPHP扩展PHPEXCEL，PHP7.2以上版本无法导出Excel

     THINKPHP扩展PHPEXCEL与PHP7.3高版本兼容问题 框架:THINKPHP5,PHPEXCEL版本:1.81 无法导出EXCEL原因为Shared/OLE.php第290行使用cont ...

  3. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  4. angular中的服务和持久化实现

    1.创建服务: ng g service my-new-service 创建到指定目录下面 ng g service services/storage 2.app.module.ts 里面引入创建的服 ...

  5. Java Web接入支付宝扫码付款API（使用SDK证书配置properties ）

    一.支付宝当面付功能Demo 官方文档https://docs.open.alipay.com/194/106078/ ps:因为沙箱环境一经配置了证书公钥则无法重置 第一步下载项目SKD&D ...

  6. Casbin 使用记录

    Casbin 是什么? 官方解释:Casbin是一个强大的.高效的开源访问控制框架,其权限管理机制支持多种访问控制模型. Casbin只负责访问控制.身份认证 authentication(即验证用户 ...

  7. WPF窗体应用程序开发

    1.Window:登录窗口.主窗体.消息框 2.UserControl:业务界面.消息框(如果使用UC来实现,则需要做特殊的处理,比如中断功能如何处理?)(显示一个UC,必须将其添加到容器中,所以&l ...

  8. PowerDesigner的安装和数据库创建

    PowerDesigner安装方法:  http://dev.firnow.com/course/3_program/java/javajs/20090908/174375.html 安装完这2个软件 ...

  9. 游戏开发中伪随机正态分布JavaScript

    在游戏开发中经常遇到随机奖励的情况,一般会采取先生成数组,再一个一个取的方式发随机奖励. 下面是js测试正态分布代码: <!DOCTYPE html> <html lang=&quo ...

  10. 用MOQ来Mock静态方法的 2种方法（含Moq和Fakes的配合使用）

    Moq是无法直接模拟静态方法的,解决方式有两种: 1.需要修改正式代码,在源代码中建一个新的方法把静态方法包起来,调用的时候源代码调用时调用新方法而不是原来的静态方法. 在测试的时候,Mock掉这个新 ...