<!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. mac使用vnc远程登录ubuntu16.04桌面

    mac使用vnc远程登录ubuntu16.04桌面 1.安装在Ubuntu上安装x11vnc,如下: sudo apt-get install x11vnc 2.配置vnc密码 x11vnc -sto ...

  2. Java-编程规范与代码风格

    阿里巴巴 Java 开发手册 https://github.com/alibaba/p3c https://developer.aliyun.com/special/tech-java 唯品会规范 J ...

  3. Flutter移动电商实战 --（51）购物车_Provide中添加商品

    新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List< ...

  4. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  5. Ionic4.x 中的button

    官方文档:https://ionicframework.com/docs/api/button 1.ion-button 组件可以定义一个按钮 <ion-button>Default< ...

  6. Bitmap之getPixel和setPixel函数

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

  7. ES6深入浅出-2 新版函数：箭头函数 2 视频-1.视频 箭头函数

    ES3里面的写法 匿名函数是用不了的 还是需要给他赋值 选中的这一部分叫做匿名函数 等于号叫做赋值 let xxx叫做声明 所以说这个地方是三个语法,首先声明一个匿名函数,然后声明一个xxx变量,最后 ...

  8. topcoder srm 633 div1

    problem1 link 如果两个循环之内可以跳完,那么我们只要让这些步数之内的数字组成两个数字$p,q,p\leq q$,使得$p,q,x$组成三角形即可($p+q\geq x,p+x\geq q ...

  9. PAT 甲级 1041 Be Unique (20 分)（简单,一遍过）

    1041 Be Unique (20 分)   Being unique is so important to people on Mars that even their lottery is de ...

  10. LODOP打印超文本字符串拼接1 固定表格填充数值

    前面的博文:Lodop打印控件传入css样式.看是否传入正确样式.Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印 ...