【react使用AES对称加密的实现】

react使用AES对称加密的实现

  • 前言
  • 使用CryptoJS库
  • 密钥存放
  • 加密方法
  • 解密方法
  • 结语

前言

项目中要求敏感信息怕被抓包泄密必须进行加密传输处理,普通的md5加密虽然能解决传输问题,但是项目中有权限的用户是需要查看数据进行查询的,所以就不能直接使用md5加密,于是就想到了使用AES对称加密

使用CryptoJS库

引入:

npm i CryptoJS

密钥存放

这里密钥的存放考虑到安全原因,如果在接口中可能会被抓取,在考虑实际使用情况后使用了前端环境变量存放的方法,密钥作为前端应用的环境变量进行配置。在打包或部署前端应用时,可以将密钥配置为环境变量,并在应用运行时通过环境变量读取密钥。这样可以将密钥从源代码中分离出来,避免意外泄露。
在项目根目录下面创建.env文件
在这里插入图片描述
写入代码

REACT_APP_API_KEY = "后端给的密匙"

加密方法

// 加密
export const encryptionTxt = (plaintext) => {if (!plaintext) { // 空值判断, 避免空值阻塞代码return ''}if (typeof plaintext !== 'string') {// 加密内容必须为字符串plaintext = String(plaintext)}// 从环境变量中拿密匙const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 使用AES加密 (ECB模式)const encrypted = CryptoJS.AES.encrypt(plaintext, key, {mode: CryptoJS.mode.ECB, // ECB加密模式padding: CryptoJS.pad.Pkcs7, // 填充方式,常用Pkcs7})// 将加密后的数据转换为16进制字符串const encryptedHexStr = encrypted.ciphertext.toString(CryptoJS.enc.Hex)// 打印加密后的16进制字符串return encryptedHexStr
}

解密方法

// 解密
export const decryptText = (encryptedHexStr) => {if (!encryptedHexStr) {return ''}// 密钥 (需与加密时保持一致)const mikey = process.env.REACT_APP_API_KEYconst key = CryptoJS.enc.Utf8.parse(mikey)// 将16进制字符串转换为二进制格式const encryptedData = CryptoJS.enc.Hex.parse(encryptedHexStr)// 使用AES ECB模式进行解密const decrypted = CryptoJS.AES.decrypt({ ciphertext: encryptedData }, // 数据格式应为CryptoJS的ciphertext格式key,{mode: CryptoJS.mode.ECB, // ECB模式padding: CryptoJS.pad.Pkcs7, // 填充方式})// 转换解密后的数据为UTF-8字符串const decryptedText = decrypted.toString(CryptoJS.enc.Utf8)return decryptedText
}

结语

方法可以丢在工具目录下方便在页面中调用使用,我这个是在项目完成后才说加的功能,我就直接丢在until里面,然后在接口哪里把要传的值加密,页面里也是直接调用解密方法把加密的信息正常显示出来,对于保存密钥这个争议挺大的,放后端先使用公钥登录,获取权限后再发私钥也是一种方法,但是后端觉得只要在请求里其实就不安全,权衡之下使用的前端环境变量存放,前端环境变量存储的话如果用了git管理的,就把.env文件注释了,就别传到远端去了,这个是个小项目,其实加密不加密意义都不大,不知道做那种银行机密的码友们又是怎么处理的,可以在评论区讨论下,文中有啥不对的地方欢迎指正
在这里插入图片描述

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

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

相关文章

【STM32】INA3221三通道电压电流采集模块,HAL库

一、简单介绍 芯片的datasheet地址: INA3221 三通道、高侧测量、分流和总线电压监视器,具有兼容 I2C 和 SMBUS 的接口 datasheet (Rev. B) 笔者所使用的INA3221是淘宝买的模块 原理图 模块的三个通道的电压都是一样,都是POWER。这个芯片采用…

《机器人SLAM导航核心技术与实战》第1季:第10章_其他SLAM系统

视频讲解 【第1季】10.第10章_其他SLAM系统-视频讲解 【第1季】10.1.第10章_其他SLAM系统_RTABMAP算法-视频讲解 【第1季】10.2.第10章_其他SLAM系统_VINS算法-视频讲解 【第1季】10.3.第10章_其他SLAM系统_机器学习与SLAM-视频讲解 第1季:第10章_其他SLAM系统 …

《HelloGitHub》第 103 期

兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、…

【OJ题解】C++实现反转字符串中的每个单词

💵个人主页: 起名字真南 💵个人专栏:【数据结构初阶】 【C语言】 【C】 【OJ题解】 题目要求:给定一个字符串 s ,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序。 题目链接: 反转字符串中的所…

Oracle OCP认证考试考点详解082系列09

题记: 本系列主要讲解Oracle OCP认证考试考点(题目),适用于19C/21C,跟着学OCP考试必过。 41. 第41题: 题目 41.Examine the description of the EMPLOYEES table NLS_DATE_FORMAT is set to DD-MON-YY Which query…

创建线程时传递参数给线程

在C中,可以使用 std::thread 来创建和管理线程,同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时&#xff…

Linux下cgdb/gdb调试以及关于操作系统那些事

目录 一.gdb调试 1.1debug和release版本有什么区别? 1.2性能优化 1.3gdb的使用 1.4cgdb的安装 二.什么是硬件 三.冯诺依曼体系 四.操作系统(OS) 4.1理解操作系统 4.1.1操作系统是什么? 4.1.2为什么要有操作系统? 4.1.3 OS-银行 4.1.4OS如何管理 理解库文件和系…

Kafka相关知识点(上)

为什么要使用消息队列? 使用消息队列的主要目的主要记住这几个关键词:解耦、异步、削峰填谷。 解耦: 在一个复杂的系统中,不同的模块或服务之间可能需要相互依赖,如果直接使用函数调用或者 API 调用的方式,会造成模块之间的耦合…

ureport配置方法

1、项目启动后登录这个网址,ip和端口自己系统的 http://localhost:8080/ureport/designer 点击这个地方,图标类似一个文件夹选择下图标注的两个文件,这两个文件就是eoa系统要用到的报表文件,还是点击类似文件夹图标的图标 正在上…

Java学习路线:JUnit单元测试

目录 使用JUnit 导入依赖 使用Junit 添加前置/后置操作 当项目十分庞大时,如果想测试一个很小的功能,都要启动整个项目来测试,会很浪费时间。 那能否将某个小功能单独拆出来进行测试呢? 这就是单元测试的作用。而JUnit就是一…

RK3568平台(camera篇)车载摄像头串行器和解串器方案

一.串行器和解串器简介 SerDes是Serializer/Deserializer的缩写,即串行器和解串器。由于同轴线的传输延迟几乎可以忽略不计(ns级别),相当于将原来只能短距离传输的高速并行信号(MIPI/I2C/CLK等)的传输距离延长,真正做到高带宽、低延迟、长距离的数据传输。 串行器(Seri…

【A】【Maven项目热部署】将Maven项目热部署到远程tomcat服务器上

将Maven项目热部署到远程tomcat中 文章目录 将Maven项目热部署到远程tomcat中1.解决方案:2.实现3.Tomcat中的Root项目的配置和使用4.在tomcat-user.xml中配置远程服务器tomcat的账户信息5.修改 IP 访问权限6.登录ROOT项目,使用Manager App功能管理tomcat…

Scrum价值观

五大价值观 尊重,勇气,专注,承诺,开放 三大支柱(经验主义的三大支柱) 透明度,检查,适应 三大职责(不是三大角色) 产品负责人,开发人员&#xff0c…

【机器学习】26. 聚类评估方法

聚类评估方法 1. Unsupervised Measure1.1. Method 1: measure cohesion and separationSilhouette coefficient Method 2:Correlation between two similarity matricesMethod 3:Visual Inspection of similarity matrix 2. Supervised measures3. 决定…

线性代数求特征值和特征向量的技巧

考场时间很重要,所以学会方法计算挺重要。 一、求特征值: 大部分题目我们都可以通过矩阵行变化将矩阵的某一行的元素化简成只剩一个值,再按一行展开。这是我们首先应该想的。 但是考场难免会紧张,导致一时半会无法看出&#xf…

Java内存区域

前言 对于 Java 程序员来说,在虚拟机自动内存管理机制下,不再需要像 C/C程序开发程序员这样为每一个 new 操作去写对应的 delete/free 操作,不容易出现内存泄漏和内存溢出问题。正是因为 Java 程序员把内存控制权利交给 Java 虚拟机&#xf…

“七巨头”(The Magnificent 7)科技公司财报喜忧参半看AI

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

图片分割--UNet

1.网络结构 结构可以分为两部分 左边部分是编码结构,进行特征提取 右边是解码结果,进行特征还原 2.数据集准备 import os.path from torchvision import transforms from torch.utils.data import Dataset from utils import *#数据归一化 transform transforms.Compose([tr…

【论文速读】| RED QUEEN: 保护大语言模型免受隐蔽多轮越狱攻击

基本信息 原文标题:RED QUEEN: Safeguarding Large Language Models against Concealed Multi-Turn Jailbreaking 原文作者:Yifan Jiang, Kriti Aggarwal, Tanmay Laud, Kashif Munir, Jay Pujara, Subhabrata Mukherjee 作者单位:Hippocr…

怎么做才能降低APP用户的卸载率?

常年困扰 App 开发者的始终是一个问题:怎么做才能降低用户卸载率呢? 不要慌,今天这篇文章里,你就会找到解决方案啦。首先请记住: 每个 App 都是有自己独立个性的,所以没有一个通用的公式能让大家套用。 还…