前端 aes 加密

 

<!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>

  

 

转载于:https://www.cnblogs.com/muamaker/p/10944558.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端AES加密是一种常见的加密方式,可用于保护用户数据的安全性。然而,避免恶意第三方获取加密密钥是一项重要的任务。在前端开发中,隐藏加密密钥是非常有必要的,但是并不是一件容易的事情。下面是关于前端AES加密如何隐藏key的一些方法: 1.前端混淆 前端混淆是一种通过随机改变代码格式和命名规则来混淆、干扰黑客的翻译工作的技术。尽管前端混淆不能完全隐藏密钥,但它可以加强加密密钥的保密性。 2.后端加密加密密钥存储在后端服务器上,然后通过HTTPS协议将加密密钥传输到前端。这种方法保证了加密密钥的安全性,但服务器依然是一个数据的商家中心、是网络攻击的目标,如果服务器架构等漏洞被攻击或者IP被人肉搜索,就会导致服务器的信息泄漏甚至被入侵。 3.动态生成密钥 动态生成密钥是一种更加高级的加密技术方法,将AES密钥动态生成并且存储在变量中,该变量只在一次性使用身后立即销毁。加密操作采用动态密钥,用完即弃,这样可以避免密钥泄漏,保证数据的安全性。 推荐采用动态生成密钥的方法,既可以保证加密数据的安全,又可以有效的防止密钥泄露。密钥的安全性直接决定了加密数据的安全性,因此必须采用可靠的加密方法来密切保护密钥。同时,开发人员也应该深入学习加密技术知识,提高对前端AES加密的深入理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值