<!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. Alpha项目冲刺！ Day6-产出

    各个成员今日完成的任务 林恩:任务分工,博客撰写,了解安卓环境搭建 杨长元:安卓本地数据库 李震:了解聊天类app相关内容 胡彤:完善服务端 寇永明:研究测试代码 王浩:研究测试代码 李杰:研究测试代 ...

  2. The First Python man in Github

    Python date VS(可视化了一下前几名) 查了下Github上星星最多的Python man 或许这就是目标吧 刚刚改了github.

  3. postgresql 计算时间差的秒数、天数

    处理时间时用到了,记录一下. 计算时间差天数 select extract(day FROM (age('2017-12-10'::date , '2017-12-01'::date))); 计算时间 ...

  4. java Calendar 小时值得到24进制格式

    Calendar cal = Calendar.getInstance(); cal.get(Calendar.HOUR_OF_DAY)

  5. 每天一个linux命令：top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  6. VM 15 永久激活密钥

      VMware Workstation 15 永久激活密钥   YG5H2-ANZ0H-M8ERY-TXZZZ-YKRV8   UG5J2-0ME12-M89WY-NPWXX-WQH88   UA5 ...

  7. [转][PDA]Json.net

    文件下载 参考:https://www.cnblogs.com/freezing/p/4125862.html 参考:https://www.cnblogs.com/yunquan/p/7363110 ...

  8. appium-FAQ（持续更新...）

    Q1:未安装APP直接启用appium sever,初始化driver :driver = new AndroidDriver(new URL("http://127.0.0.1:4723/ ...

  9. Bitmap之compress图片压缩

    package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...

  10. CentOS7下搭建zabbix监控（一）——Zabbix监控端配置

    zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...