前端加密介绍与实战
前端数据加密
文章目录
- 前端数据加密
- 前端数据加密介绍
- 为什么需要前端数据加密?
- 前端数据加密的常见方式
- 前端数据加密的实现
- 场景:加密用户密码并发送到后端
- 步骤 1:安装加密库
- 步骤 2:实现加密逻辑
- 步骤 3:后端解密
- 实战总结
前端数据加密介绍
前端数据加密是指在用户的浏览器中对数据进行加密处理,以保护敏感信息在传输或存储时不被窃取或篡改。加密的目的是让数据变得不可读,只有拥有正确密钥的人才能解密数据。
在前端加密的场景中,通常会使用加密算法(如对称加密、非对称加密或哈希算法)对数据进行处理。加密后的数据可以安全地传输到后端或存储在本地(如浏览器的localStorage
或sessionStorage
)。
为什么需要前端数据加密?
- 保护敏感信息:防止用户的密码、银行卡号、个人信息等敏感数据在传输过程中被窃取。
- 防止数据篡改:确保数据在传输过程中没有被恶意修改。
- 增强安全性:即使攻击者拦截了数据,也无法直接读取或使用这些信息。
前端数据加密的常见方式
- 对称加密
- 使用同一个密钥进行加密和解密。
- 常见算法:AES(高级加密标准)。
- 优点:加密速度快。
- 缺点:密钥需要安全传输,容易泄露。
- 非对称加密
- 使用一对密钥:公钥加密,私钥解密。
- 常见算法:RSA。
- 优点:公钥可以公开,私钥保密,安全性高。
- 缺点:加密速度较慢。
- 哈希算法
- 将数据转换为固定长度的哈希值,无法逆向解密。
- 常见算法:SHA-256。
- 优点:不可逆,适合密码存储。
- 缺点:不适合需要解密的场景。
前端数据加密的实现
场景:加密用户密码并发送到后端
假设我们有一个登录表单,用户输入用户名和密码,我们希望在前端对密码进行加密后再发送到后端。
步骤 1:安装加密库
我们可以使用流行的加密库,比如crypto-js
。它支持多种加密算法,简单易用。
使用npm安装:
npm install crypto-js
或者直接通过CDN引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
步骤 2:实现加密逻辑
以下是一个使用AES对称加密的示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端数据加密实战</title><script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body><h1>登录表单</h1><form id="loginForm"><label for="username">用户名:</label><input type="text" id="username" name="username" required><br><label for="password">密码:</label><input type="password" id="password" name="password" required><br><button type="submit">登录</button></form><script>// 定义加密密钥(在实际应用中,密钥应保存在安全的地方)const encryptionKey = "mySecretKeydings"; // AES密钥,长度应符合算法要求// 监听表单提交事件document.getElementById("loginForm").addEventListener("submit", function(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取用户输入的用户名和密码const username = document.getElementById("username").value;const password = document.getElementById("password").value;// 使用AES加密密码const encryptedPassword = CryptoJS.AES.encrypt(password, encryptionKey).toString();// 模拟发送到后端console.log("加密后的密码:", encryptedPassword);// 构造发送的数据const data = {username: username,password: encryptedPassword};// 模拟发送到后端 用阿贾克斯或者axios等console.log("发送到后端的数据:", data);alert("密码已加密并发送到后端!");});</script>
</body>
</html>
步骤 3:后端解密
后端需要使用相同的密钥来解密密码。以下是Node.js的解密示例:
const CryptoJS = require("crypto-js");// 定义加密密钥
const encryptionKey = "mySecretKeydings";// 模拟接收到的加密密码
const encryptedPassword = "后端接收到的加密密码";// 解密密码
const bytes = CryptoJS.AES.decrypt(encryptedPassword, encryptionKey);
const originalPassword = bytes.toString(CryptoJS.enc.Utf8);console.log("解密后的密码:", originalPassword);
实战总结
- 前端加密:使用
crypto-js
库对用户密码进行AES加密,确保密码在传输过程中不会被窃取。 - 后端解密:后端使用相同的密钥解密密码,验证用户登录。
- 安全注意事项
- 密钥管理:加密密钥应保存在安全的地方,避免泄露。
- HTTPS传输:确保前后端通信使用HTTPS,防止中间人攻击。
- 结合哈希算法:在后端对密码进行哈希处理(如
bcrypt
),避免直接存储明文密码。
相关文章:
前端加密介绍与实战
前端数据加密 文章目录 前端数据加密前端数据加密介绍为什么需要前端数据加密?前端数据加密的常见方式前端数据加密的实现场景:加密用户密码并发送到后端步骤 1:安装加密库步骤 2:实现加密逻辑步骤 3:后端解密 实战总结…...
DAG(有向无环图)计算模型面试内容整理-拓扑排序(Topological Sort)和节点依赖与并行度
拓扑排序(Topological Sort) 拓扑排序(Topological Sort): 拓扑排序是针对有向无环图(DAG)的一种线性排序方法。这种排序方法的特点是,对于DAG中的每一条有向边 (A → B),在拓扑排序中节点A总是排在节点B之前。...
AI语音助手自定义角色百度大模型 【全新AI开发套件掌上AI+4w字教程+零基础上手】
1、简介 此项目主要使用ESP32-S3实现一个自定义角色的AI语音聊天助手(比如医生角色),可以通过该项目熟悉ESP32-S3 arduino的开发,百度语音识别,百度语音合成API调用,百度APPBuilder API的调用实现自定义角…...
【Java面试笔记:基础】13.谈谈接口和抽象类有什么区别?
在 Java 中,接口(Interface) 和 抽象类(Abstract Class) 都是实现多态和代码抽象的机制,但它们在设计目的、语法特性及使用场景上有显著差异。 1. 接口和抽象类的区别 接口(Interface) 定义:接口是对行为的抽象,是抽象方法的集合,用于定义 API 规范。 特点: 不能…...
内存管理(Linux程序设计)
内存管理 目录 内存管理 一.简单的内存分配 代码功能概述 代码流程图 变量声明 动态内存分配 内存分配错误检查 向内存写入字符串 设置退出状态并退出程序 二.请求全部的物理内存 代码功能概述 变量声明 三..可用内存 四.滥用内存 1.代码功能(预期 …...
Prompt 结构化提示工程
Prompt 结构化提示工程 目前ai开发工具都大同小异,随着deepseek的流行,ai工具的能力都差不太多,功能基本都覆盖到了。而prompt能力反而是需要更加关注的(说白了就是能不能把需求清晰的输出成文档)。因此大家可能需要加…...
Postman设置了Cookies但是请求不携带Cookie
1 问题说明 使用Postman工具往往要向本地服务器发送请求携带Cookie便于测试接口,但是在Send下面的Cookies选项中设置域名127.0.0.1,并添加Cookie,发现发送的请求怎么都不会携带Cookie: 通过Fiddler抓包发现并没有Cookie࿱…...
微服务Nacos组件的介绍、安装、使用
微服务Nacos组件的介绍、安装、使用 在微服务架构日渐普及的今天,服务注册与配置管理成了系统架构中的关键环节。阿里巴巴开源的 Nacos(Naming and Configuration Service)正是解决这一问题的利器。本文将为你全面介绍 Nacos 的概念、安装方…...
深度剖析塔能科技精准节能方案:技术创新与实践价值
在能源管理领域不断追求高效与可持续发展的进程中,塔能科技的精准节能方案逐渐成为行业内备受瞩目的焦点。 精准节能:核心技术与实现路径 塔能科技的精准节能理念建立在对能源消耗的精细监测与深度分析基础之上。以其节能管理平台为例,该平台…...
AI PPT创作原理解析:让你的演示文稿更智能
在当今信息爆炸的时代,演示文稿已成为我们工作和学习中不可或缺的一部分。然而,制作一份高质量的PPT往往需要投入大量的时间和精力。随着人工智能技术的迅猛发展,AI PPT创作工具应运而生,极大地简化了PPT的制作过程。本文将深入解…...
ollama本地搭建大模型
dajdaj人工智能,现在流行的大模型有很多,像流行的:gpt-3.5-turbo、通义千问2.5,Llama3; 本地安装大模型有什么好处 大模型都是开源的,安装在自己的电脑上也是免费使用的;可以结合自己的私有文…...
AIGC(生成式AI)试用 31 -- AI做软件程序测试 2
接上文 AIGC(生成式AI)试用 30 -- AI做软件程序测试 1 整合测试项提问并输出测试用例思考并调整提问方式,为完整的输年程序测试提问准备 - 再次对需求提问 --> 实际是之前的提问记录找不到了,不过有新发现;不妨后…...
【深度学习与大模型基础】第13章-什么是机器学习
1. 什么是机器学习? 想象你在教一个小朋友认猫: 传统编程:你写一本《猫的100条特征手册》(比如有胡须、尖耳朵),让计算机对照检查。 机器学习:你直接给计算机看1000张猫和狗的图片,…...
大数据利器Kafka
大数据利器Kafka:从入门到实战的全面指南 在大数据的世界里,Kafka就像是一个高效的“数据快递员”,负责在不同的系统之间快速、可靠地传递数据。今天,咱们就一起来深入了解一下这个强大的工具。Kafka是由LinkedIn开发的分布式发布…...
工具指南:免费将 PDF 转换为 Word 的 10 个工具
可移植文档格式或 PDF 是大多数企业使用的流行文件格式,主要用于共享项目材料并确保整个团队协同工作。它还有助于避免处理大量文档和丢失关键数据。使用顶级 PDF 转换器还可以更轻松地高效地进行日常活动。企业可以依靠专业的文档扫描服务对其他格式的文档进行 PDF…...
Elasticsearch复习笔记
文章目录 ES 基础为什么用 Elasticsearch初识和安装概述安装 elasticsearch安装 Kibana 倒排索引正向索引倒排索引正向和倒排 基础概念文档和字段索引和映射MySQL 和 elasticsearch IK 分词器安装 IK 分词器使用 IK 分词器拓展词典 ES 索引库操作Mapping 映射属性ES 索引库的 C…...
STM32 SysTick定时器
一、SysTick系统定时器概述 1.1 什么是SysTick定时器 SysTick(System Tick Timer)是ARM Cortex-M系列处理器内核集成的24位系统定时器,作为ARM架构的标准外设,它被深度整合在NVIC(嵌套向量中断控制器)中。…...
Modbus TCP协议介绍、原理解析与应用示例
深入了解Modbus TCP协议:介绍、原理解析与应用示例 在工业自动化领域,设备之间的通信与数据交换至关重要。Modbus协议作为一种经典的通信协议,因其简单、开放和易于实现的特点,被广泛应用于各种工业设备之间的数据传输。而Modbus…...
Elasticsearch 报错 Limit of total fields [1000] has been exceeded
一、错误代码: spring boot 链接es 插入审计日志数据报错: Caused by: org.elasticsearch.ElasticsearchException: Elasticsearch exception [typeillegal_argument_exception, reasonLimit of total fields [1000] has been exceeded while adding ne…...
maven中pom.xml setting.xml关系
1 在Spring Boot项目中,pom.xml和settings.xml文件都可以配置Maven仓库地址,但它们的作用和优先级有所不同。 ● settings.xml: ○ 配置本地仓库:使用 <localRepository> 元素指定本地仓库的路径。 ○ 配…...
PubLayNet:文档布局分析领域的大规模数据集
PubLayNet:文档布局分析领域的大规模数据集 1. 数据集概述 PubLayNet(Public Layout Network)是由IBM AUR NLP团队开发的大规模文档图像数据集,旨在推动文档理解与布局分析领域的研究。该数据集通过自动标注技术,对科…...
JAVA----方法
好久没发博客了~~~~~重生之我开始补知识 1.What is 方法(method) 方法是程序中最小的执行单元。 简单来说,就是将一些重复代码打包,要用的时候我们进行调用就好! e.g. public static void main(String…...
mybatis xml中特殊字符处理
1,CDATA区: 它的全称为character data,以"<![CDATA[ "开始,以" ]]>" 结束,在两者之间嵌入不想被解析程序解析的原始数据,解析器不对CDATA区中的内容进行解析,而是将这些数据原封…...
vue3+dhtmlx 甘特图真是案例
使用vue3 ts dhtmlx 实现项目任务甘特图展示 支持拖拽,选择人员,优先级,开发状态,进度 效果图 完整代码 安装命令:npm i dhtmlx-gantt <template><div style"height: 100%; background-color: white…...
Chrome/Edge浏览器使用多屏完美解决方案,http部署使用https部署的功能
多屏使用场景:例如1屏显示录入操作界面,2屏显示SOP。或者每个屏上显示不同的看板内容等 废话不少说,直接上代码:将下面的代码复制到txt记事本里,保存为html格式即可本地观看效果 <!DOCTYPE html> <html>…...
Linux中进程的属性:状态
一、通用OS进程中的各种状态与相关概念 1.1通用进程中的状态 CPU执行进程代码,不是把进程执行完才开始执行下一个,而是给每个进程预分配一个“时间片”, CPU基于时间片进行轮转调度(每个CPU分别进行) 其中发涉及到的…...
软件架构师常用的软件工具有哪些
软件架构师的工作离不开多种工具的支撑,主要包括 建模与设计工具、文档与协作平台、代码质量与静态分析工具、性能与监控工具、DevOps 工具链、架构可视化与管理平台 等。其中,建模与设计工具 是架构师最核心的武器,能够帮助其从业务抽象到技…...
rl中,GRPO损失函数详解。
文章目录 **一、GRPO损失函数的设计背景****二、代码逐行解析****三、关键组件详解****1. 对数概率与KL散度计算****2. 优势值与策略梯度****3. 掩码与平均损失****四、训练动态与调参建议**在TRL(Transformer Reinforcement Learning)库中,GRPO(Group Relative Policy Opt…...
奇安信春招面试题
奇安信面试真题,以下是5道具有代表性的经典技术面试题及其解析,覆盖网络安全、渗透测试、安全架构设计等核心领域。 《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.…...
MineWorld,微软研究院开源的实时交互式世界模型
MineWorld是什么 MineWorld是微软研究院开发并开源的一个基于《我的世界》(Minecraft)的实时互动世界模型。该模型采用了视觉-动作自回归Transformer架构,将游戏场景和玩家动作转化为离散的token ID,并通过下一个token的预测进行…...
Nginx RTMP配置存储位置
window: 支持本地磁盘和远程网络位置 配置文件如下 worker_processes 1;events {worker_connections 1024; }#RTMP服务 rtmp {server { listen 1935; #监听端口chunk_size 4096; #数据传输块大小application my_live { # 创建rtmp应用hlslive on; # 当路径匹…...
JVM理解(通俗易懂)
虽然网上有很多关于JVM的教程,但是都天花乱坠,很多都是一上来就JVM内存模型、JVM双亲委派等等,(可能我比较菜看不懂)。于是我自己决定写一篇能看懂的文章~如果有看不懂我就自己百度,大家有什么疑问也可以评论区交流~ 欢迎指点我的Error~ JVM概念 JVM大家都知道,就Ja…...
python三维矩阵的维度
matrix_3x3x3 np.array([[[ 8.35, 16.72, 17.46],[16.72, 33.49, 34.97],[17.46, 34.97, 36.51]],[[16.72, 33.49, 34.97],[33.49, 67.09, 70.05],[34.97, 70.05, 73.13]],[[17.46, 34.97, 36.51],[34.97, 70.05, 73.13],[36.51, 73.13, 76.35]] ]) 例如这样的三维矩阵&#…...
HarmonyOS 是 Android 套壳嘛?
文章目录 HarmonyOS 是 Android 套壳吗?技术视角的深度解析一、核心结论二、技术对比:从底层到应用层1. 内核与基础架构2. 应用开发与运行机制3. 生态与应用场景 三、常见误解的澄清误解 1:“HarmonyOS 使用 Android 应用,所以是套…...
【Java面试笔记:基础】10.如何保证集合是线程安全的? ConcurrentHashMap如何实现高效地线程安全?
1. 保证集合线程安全的方式 传统同步容器:如 Hashtable 和 Vector,通过在方法上加 synchronized 关键字实现线程安全,但性能较低。同步包装器:通过 Collections.synchronizedMap 等方法将普通集合包装成线程安全的集合,但仍然使用粗粒度的锁,性能不佳。List<String>…...
【Amazing晶焱科技高速 CAN Bus 传输与 TVS/ESD/EOS 保护,将是车用电子的生死关键无标题】
台北国际车用电子展是亚洲地区重量级的车用电子科技盛会,聚焦于 ADAS、电动车动力系统、智慧座舱、人机界面、车联网等领域。各大车厂与 Tier 1 供应链无不摩拳擦掌,推出最新技术与创新解决方案。 而今年,“智慧座舱” 无疑将成为全场焦点&am…...
电控---DMP库
一、DMP库的本质与核心定位 DMP库是为Invensense(现TDK)系列传感器(如MPU6050、MPU9250等)内置的数字运动处理器(DMP)硬件模块提供的软件接口层。其核心目标是: 抽象硬件操作:将复…...
YOLO数据处理
YOLO(You Only Look Once)的数据处理流程是为了解决目标检测领域的核心挑战,核心目标是为模型训练和推理提供高效、规范化的数据输入。其设计方法系统性地解决了以下关键问题,并对应发展了成熟的技术方案: 一、解决的问…...
Linux实现网络计数器
1.TcpServer.hpp文件 类TcpServer的私有成员变量有端口号,指向类Socket对象的指针,布尔值表示是否运行,以及回调函数,ioservice_t是表示参数为指向Socket对象的指针和InetAddr对象的函数,TcpServer类的构造函数接收端…...
数据分析:用Excel做周报
目录 1.初始模板 编辑 2.填充数据 2.1 日期以及表头 2.2 数据验证 2.3 计算数据填充 2.3.1 灵活计算 2.3.2 单独计算 2.3.3 总计 2.4 数据格式 2.5 周累计 2.6 周环比 2.7 业务进度 3 美化 1.初始模板 2.填充数据 2.1 日期以及表头 结果指标有以下这些&#…...
初阶数据结构--排序算法(全解析!!!)
排序 1. 排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些些关键字的大小,递增或递减的排列起来的操作。 2. 常见的排序算法 3. 实现常见的排序算法 以下排序算法均是以排升序为示例。 3.1 插入排序 基本思想:…...
SpringCloud 微服务复习笔记
文章目录 微服务概述单体架构微服务架构 微服务拆分微服务拆分原则拆分实战第一步:创建一个新工程第二步:创建对应模块第三步:引入依赖第四步:被配置文件拷贝过来第五步:把对应的东西全部拷过来第六步:创建…...
加油站小程序实战教程14会员充值页面搭建
目录 1 原型2 搭建充值金额选择功能3 搭建金额输入4 搭建支付方式5 充值按钮最终的效果 上一篇我们介绍了充值规则的后台功能,有了基础的规则,在会员充值页面就可以显示具体的充值规则。本篇我们介绍一下会员充值的开发过程。 1 原型 充值页面我们是分为…...
内卷的中国智驾,合资品牌如何弯道超车?
作者 |德新 编辑 |王博 上海车展前夕,一汽丰田举办重磅车型bZ5的技术发布会,脱口秀演员庞博透露了这款车型的一大重要特性,其搭载来自Momenta的智能辅助驾驶系统行驶里程已经超过20亿公里。 携手中国科技公司提高车型智能化的属性ÿ…...
【go】go run-gcflags常用参数归纳,go逃逸分析执行语句,go返回局部变量指针是安全的
go官方参考文档: https://pkg.go.dev/cmd/compile 基本语法 go run 命令用来编译并运行Go程序,-gcflags 后面可以跟一系列的编译选项,多个选项之间用空格分隔。基本语法如下: go run -gcflags "<flags>" main.…...
数据库11(触发器)
触发器有三种类型,包括删除触发器,更新触发器,添加触发器 触发器的作用是:当某个表发生某个操作时,自动触发触发器,进行触发器规定的操作 触发器语句 create trigger tname --创建触发器 on aa --创建在表…...
十大物联网平台-物联网十大品牌
物联网十大品牌及平台解析 物联网(IoT)作为当下极具影响力的技术,正逐步渗透至社会各领域,为人们生活与社会发展带来诸多便利与变革。如今,众多企业投身于物联网行业,致力于推动其发展。以下是对物联网相关…...
心智模式VS系统思考
很多人常说,“改变自己,从改变思维开始。”但事实上,打破一个人的心智模式,远比想象中要困难得多。我们的思维方式、行为习惯,甚至是对世界的认知,往往是多年积累下来的产物。那些曾经的经历、长期的学习与…...
QT 打包安装程序【windeployqt.exe】报错c000007d原因:Conda巨坑
一、命令行执行命令 E:\Project\GNCGC\Bin\Win32\Vc22\RS422地检>E:\SoftWare\Qt\5.14.2\msvc2017\bin\windeployqt.exe CGC170.exe二、安装了Conda的朋友,巨坑 无语,E:\SoftWare\Qt\5.14.2\msvc2017\bin\windeployqt.exe 优先把Conda环境关联的Qt动…...
Vue3祖先后代组件数据双向同步实现方法
在 Vue3 中实现祖先后代组件的双向数据同步,可以通过组合式 API 的 provide/inject 配合响应式数据实现。以下是两种常见实现方案: 方案一:共享响应式对象 方法 html <!-- 祖先组件 --> <script setup> import { ref, provide…...