<!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. 命令行启动模块的Python代码研究

    pyrasite的 __requires__ = 'pyrasite==2.0' import re import sys from pkg_resources import load_entry_p ...

  2. Linux中显示系统中USB信息的lsusb命令

    来源:Linux中国  原文:https://linux.cn/article-2448-1.html 通用串行总线(USB)被设计成为连接计算机外设的标准,如键盘.鼠标.打印机.数码相机.便携式媒体 ...

  3. 如何准备算法工程师面试，斩获一线互联网公司机器学习岗offer？

    原文:https://zhuanlan.zhihu.com/p/76827460?utm_source=wechat_session&utm_medium=social&utm_oi= ...

  4. Matrix: android 中的Matrix (android.graphics.Matrix) (转)

    本篇博客主要讲解一下如何处理对一个Bitmap对象进行处理,包括:缩放.旋转.位移.倾斜等.在最后将以一个简单的Demo来演示图片特效的变换. 1. Matrix概述 对于一个图片变换的处理,需要Ma ...

  5. angular 中如何使用自定义组件

    1.创建header组件 ng g component components/header header.component.ts import { Component, OnInit } from ...

  6. 字典学习（Dictionary Learning）

    0 - 背景 0.0 - 为什么需要字典学习? 这里引用这个博客的一段话,我觉得可以很好的解释这个问题. 回答这个问题实际上就是要回答“稀疏字典学习 ”中的字典是怎么来的.做一个比喻,句子是人类社会最 ...

  7. 请求头User-Agent作用？

    请求头User-Agent作用 答: User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供你所 ...

  8. Permission denied: user=dr.who, access=READ_EXECUTE, inode="/tmp":student:supergroup:drwx------权限问题

    在查看browse directory时,点击tmp,无法进入,报错:“Permission denied: user=dr.who, access=READ_EXECUTE, inode=" ...

  9. 给 textbox TextMode="password" 赋值后显示出来

    在做一个修改用户资料的页面的时候,发现用 <asp:TextBox ID="txtPwd" runat="server" TextMode="P ...

  10. nmap探测大网络空间中的存活主机

    前言 扫描大网络空间中的存活主机 实现 nmap -v -sn -PE -n --min-hostgroup 1024 --min-parallelism 1024 -oX nmap_output.x ...