前端加密,后端解密的过程及代码(密码明文传输解决,不是太保险。key在前端有显示)

news2025/1/31 11:19:20

在工作中经常遇到密码明文传输这个问题,为了让密码安全些会让加密,现在有个比较方便的AES加密分享给大家,话不多说,上代码

 

1,首先引入前端需要用到的js:crypto-js,下载命令    npm install crypto-js

将 crypto-js 文件放到要引用的路径

以下是要引用到的js

2,引用,jQuery也要记得引用哦

 3,在登录页的登录按钮的function里,设置key值和iv值,这是加密的设置字段,定义要进行加密的密码passwordNode

 下面再加个function

	function aesMinEncrypt(key, iv, word){
		var _word = CryptoJS.enc.Utf8.parse(word),
				_key = CryptoJS.enc.Utf8.parse(key),
				_iv = CryptoJS.enc.Utf8.parse(iv);
		var encrypted = CryptoJS.AES.encrypt(_word, _key, {
			iv: _iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.Pkcs7
		});
		return encrypted.toString();
	}

3,(另一种)上面的过程也可以这样

function encryption(){
		//密钥 (需要前端和后端保持一致)十六位作为密钥
		var key = "ABCDEFGHIJKL_key";
		//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
		var iv = "ABCDEFGHIJKLM_iv";
		var username=document.getElementById("usr").value;
		// var passwordNode=document.getElementById("paw").value;
		var passwordNode=aesMinEncrypt(key,iv,$("#paw").val());
		console.log(passwordNode);
		alert("加密后的密码为:"+passwordNode);

		$.ajax({
			url: "login",
			async:false,
			type: "POST",
			data: {'username':username,'password':passwordNode},
			success: function (result) {
				$("html").html(result);
			}
		});
	}
	function aesMinEncrypt(key, iv, word){
		var _word = CryptoJS.enc.Utf8.parse(word),
				_key = CryptoJS.enc.Utf8.parse(key),
				_iv = CryptoJS.enc.Utf8.parse(iv);
		var encrypted = CryptoJS.AES.encrypt(_word, _key, {
			iv: _iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.Pkcs7
		});
		return encrypted.toString();
		$("#form").submit();
	}

4,前端加密就算是完成了,接下来是后端解密,后端解密需要用到一个工具类   AESUtils,里面是解密方法代码如下

package com.wuye.common.utils;

import cn.jpush.api.utils.StringUtils;
import sun.misc.BASE64Decoder;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

/**
 * TODO
 *
 * @author CSD
 * @date 2022-07-28 14:16
 */
public class AESUtils {

    //密钥 (需要前端和后端保持一致)十六位作为密钥
    private static final String KEY = "ABCDEFGHIJKL_key";

    //密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
    private static final String IV = "ABCDEFGHIJKLM_iv";

    //算法
    private static final String ALGORITHMSTR = "AES/CBC/PKCS5Padding";

    /**
     * base 64 decode
     * @param base64Code 待解码的base 64 code
     * @return 解码后的byte[]
     * @throws Exception
     */
    public static byte[] base64Decode(String base64Code) throws Exception{
        return StringUtils.isEmpty(base64Code) ? null : new BASE64Decoder().decodeBuffer(base64Code);
    }

    /**
     * AES解密
     * @param encryptBytes 待解密的byte[]
     * @return 解密后的String
     * @throws Exception
     */
    public static String aesDecryptByBytes(byte[] encryptBytes) throws Exception {

        Cipher cipher = Cipher.getInstance(ALGORITHMSTR);

        byte[] temp = IV.getBytes("UTF-8");
        IvParameterSpec iv = new IvParameterSpec(temp);

        cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(KEY.getBytes(), "AES"), iv);
        byte[] decryptBytes = cipher.doFinal(encryptBytes);

        System.out.print(new String(decryptBytes));
        return new String(decryptBytes);
    }

    /**
     * 将base 64 code AES解密
     * @param encryptStr 待解密的base 64 code
     * @return 解密后的string
     * @throws Exception
     */
    public static String aesDecrypt(String encryptStr) throws Exception {
        return StringUtils.isEmpty(encryptStr) ? null : aesDecryptByBytes(base64Decode(encryptStr));
    }

    //测试一下
    public static void main(String[] args) throws Exception {
        String str = "Q uus tQvLdwtGSldhrtKQ==";
        str = str.replace(" ", "+");
        System.out.println(str);
        aesDecrypt(str);
    }
}

5,在密码验证的java页面做解密,建议打断点看看走的哪里,解密很简单,就一句

password = AESUtils.aesDecrypt(getPassword(request));

看你的具体页面需不需要抛个异常,我本身是下面这种情况

在另外一个项目里,我又发现,解密语句很简单,但是最重要是看你的登录走的哪里,然后出现如下

 但是大差不差,核心语句就是使用解密类的方法对获取到的密码进行解密。

谢谢大家的观看,也希望各位大佬能给出好的建议,如果觉得不错就点个赞再走吧,嘿嘿!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407600.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue中computed和watch的使用场景

一、computed computed擅长处理的场景:一个数据受多个数据影响,如果一个属性是由其他属性计算而来的,这个属性依赖其他属性是一个多对一或者一对一,一般用computed; 如果 computed 属性值是函数,那么默认会…

uni-app,vue3接口请求封装

uni-app接口,全局方法封装 1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件 2. baseUrl.js文件代码 export default "https://XXXX.test03.qcw800.com/api/" 3.http.js文件代码 export function h…

【微信小程序】运行机制和更新机制

🍒观众老爷们好呀,牛牛又更文了,上文我们对部分比较常用的组件进行了讲解,作为开发者,我们还需要对小程序的运行机制和更新机制做一定的了解,那问题来了,你对它们了解多少呢? &#…

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 {"navigationStyle": "custom" // 将navigationStyle从默认default改为custom }定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因

启动项目时,本地有node包,但是终端提示:vue-cli-service 不是内部或外部命令,也不是可运行的程序,导致项目无法启动,如下: 原因之一是项目的npm版本较低,但是你本地的npm版本过高&am…

uniapp一键发行代码并混淆代码

第一步.在项目根目录下安装插件 npm install javascript-obfuscator -g安装完成后,javascript-obfuscator就是一个独立的可执行命令了。 javascript-obfuscator -v第二步:HbuilderX点击发行按钮,打包代码到dist文件中 小程序发行后代码会自…

微信小程序--》小程序—全局数据共享和分包

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

Code For Better 谷歌开发者之声—— 在 Windows 10 上对 Google Chrome 进行故障排除

💂 个人网站:【 海拥】【小霸王游戏机】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库&…

小白也可以,10分钟搭建大气的Halo博客(保姆级教程)

一、博客的好处 很多程序员、职业投资人、KOL喜欢建立自己的博客系统,为的是让自己有一个知识归纳的工具,也为自己收纳的各种资料有一个线上存储的记事本。到了币圈后,虽然有很多人用Mirro、Medium等文字工具,但这些工具对于中国…

完美解决:flex布局中设置宽度被压缩的问题

问题描述: 在父级中设置了display:flex;父元素宽度不够的时候,子元素就算设置的宽度,也会被压缩; 产生原因: 当子元素设置固定宽度,如果整体宽度不足时,会把固定宽度给压缩 解决方法: 给固定宽…

uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

前言 在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用,所以这次…

【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路:前端之行,任重道远(来自大三学长的万字自述) 🧧 个人社区&#xff1…

Vue2-生命周期

之前说完了Vue的基础知识,说了语法、数据代理、数据监听、计算属性、指令、过滤器等等,但是没有涉及到Vue的声明周期,其实之所以把生命周期放在后面讲,是因为,如果最开始讲生命周期,里面涉及到的概念性东西…

vue路径component使用import的方式来写 component: () => import(‘@/views/order/orderDetail‘)

以前老师教的一直是这种写法: 工作后突然看到这种写法,我蒙了 首先我们先来理解一下,路由文件里面. path里面其实就是url也就是我们写路径的,我们在网址栏所看到的. 而component则是我们所对应的页面组件.每个页面相当于一个组件.所以我们的页面的名字就是组件的名字. 方法一:普…

掌握Mock摆脱后端同学的束缚

文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候,在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们,难道在搭建完页面后只能等待后端的接口么?…

自定义修改el-talbe show-overflow-tooltip的样式

el-table表格行有一个可使用的show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 <el-table-columnprop"address"label"地址"show-overflow-tooltip></el-table-…

Vue3、Vue2都有哪些区别

vue3和vue2版本对比&#xff1a; vue2中绝大多数的API与特性&#xff0c;在vue3中同样支持。同时&#xff0c;vue3中还新增了所特有的功能&#xff0c;并废弃了vue2中的某些旧功能。 新增的功能如&#xff1a;组合式API、多根节点组件、更好的TypeScript支持等。 废弃的功能…

jq获取和设置标签的css样式、jq给标签增加或移除class属性

1、jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式&#xff0c;也可以设置样式&#xff0c;包括行内、内部、外部样式&#xff1b;思路&#xff1a;先要选取这个标签&#xff0c;然后再获取或者设置样式&#xff1b;获取css属性&#xff1a;console.log($…

eclipse新建一个简单的网站(web)项目

目录前言一、新建一个简单web项目二、报错解决前言 本篇介绍怎么在eclipse中新建一个简单的web项目&#xff0c;博主是用的eclipse版本是2021-06R&#xff0c;服务器tomcat10。本篇是博主尝试自己动手搭建网站系列文章中的一篇&#xff0c;如想了解更多相关内容&#xff0c;见…

在web页面中直接播放rtsp视频流

rtsp是一种实时传输协议&#xff0c;通过各种百度了解&#xff0c;得出结论&#xff1a;浏览器是不支持播放rtsp流的&#xff0c;必须经过后端转码推流。 实现思路&#xff1a;借助node搭建转码推流服务&#xff0c;再使用JSMpeg播放。 rtsp2web是一个依赖 ffmpeg&#xff0c…