当前位置： 首页 > article >正文

前端加密介绍与实战

article 2025/10/28 12:01:08

前端数据加密

文章目录

  • 前端数据加密
      • 前端数据加密介绍
      • 为什么需要前端数据加密？
      • 前端数据加密的常见方式
      • 前端数据加密的实现
        • 场景：加密用户密码并发送到后端
        • 步骤 1：安装加密库
        • 步骤 2：实现加密逻辑
        • 步骤 3：后端解密
      • 实战总结

前端数据加密介绍

前端数据加密是指在用户的浏览器中对数据进行加密处理，以保护敏感信息在传输或存储时不被窃取或篡改。加密的目的是让数据变得不可读，只有拥有正确密钥的人才能解密数据。

在前端加密的场景中，通常会使用加密算法（如对称加密、非对称加密或哈希算法）对数据进行处理。加密后的数据可以安全地传输到后端或存储在本地（如浏览器的localStorage或sessionStorage）。

为什么需要前端数据加密？

  1. 保护敏感信息：防止用户的密码、银行卡号、个人信息等敏感数据在传输过程中被窃取。
  2. 防止数据篡改：确保数据在传输过程中没有被恶意修改。
  3. 增强安全性：即使攻击者拦截了数据，也无法直接读取或使用这些信息。

前端数据加密的常见方式

  1. 对称加密
    • 使用同一个密钥进行加密和解密。
    • 常见算法：AES（高级加密标准）。
    • 优点：加密速度快。
    • 缺点：密钥需要安全传输，容易泄露。
  2. 非对称加密
    • 使用一对密钥：公钥加密，私钥解密。
    • 常见算法：RSA。
    • 优点：公钥可以公开，私钥保密，安全性高。
    • 缺点：加密速度较慢。
  3. 哈希算法
    • 将数据转换为固定长度的哈希值，无法逆向解密。
    • 常见算法：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);

实战总结

  1. 前端加密：使用crypto-js库对用户密码进行AES加密，确保密码在传输过程中不会被窃取。
  2. 后端解密：后端使用相同的密钥解密密码，验证用户登录。
  3. 安全注意事项
    • 密钥管理：加密密钥应保存在安全的地方，避免泄露。
    • HTTPS传输：确保前后端通信使用HTTPS，防止中间人攻击。
    • 结合哈希算法：在后端对密码进行哈希处理（如bcrypt），避免直接存储明文密码。

相关文章：

前端加密介绍与实战

前端数据加密 文章目录 前端数据加密前端数据加密介绍为什么需要前端数据加密&#xff1f;前端数据加密的常见方式前端数据加密的实现场景&#xff1a;加密用户密码并发送到后端步骤 1&#xff1a;安装加密库步骤 2&#xff1a;实现加密逻辑步骤 3&#xff1a;后端解密 实战总结…...

编程日记 2025/9/22 21:08:02

Zookeeper是什么？基于zookeeper实现分布式锁

zookeeper听的很多&#xff0c;但实际在应用开发中用的不错&#xff0c;主要是作为中间件配合使用的&#xff0c;例如&#xff1a;Kafka。 了解zk首先需要知道它的数据结构&#xff0c;可以想象为树、文件夹目录。每个节点有基本的信息&#xff0c;例如&#xff1a;创建时间、…...

编程日记 2025/8/24 22:08:29

Kafka 主题设计与数据接入机制

一、前言&#xff1a;万物皆流&#xff0c;Kafka 是入口 在构建实时数仓时&#xff0c;Kafka 既是 数据流动的起点&#xff0c;也是后续流处理系统&#xff08;如 Flink&#xff09;赖以为生的数据源。 但“消息进来了” ≠ “你就能处理好了”——不合理的 Topic 设计、接入方…...

编程日记 2025/10/9 3:40:23

gem5-gpu教程05 内存建模

memory-modeling|Details on how memory is modeled in gem5-gpu gem5-gpu’s Memory Simulation gem5-gpu在很大程度上避开了GPGPU-Sim的单独功能模拟，而是使用了gem5的执行中执行模型。因此，当执行存储/加载时，内存会被更新/读取。没有单独的功能路径。（顺便说一句，这…...

编程日记 2025/9/1 19:19:25

MySQL的日志--Redo Log【学习笔记】

MySQL的日志--Redo Log 知识来源&#xff1a; 《MySQL是怎样运行的》--- 小孩子4919 MySQL的事务四大特性之一就是持久性&#xff08;Durability&#xff09;。但是底层是如何实现的呢&#xff1f;这就需要我们的Redo Log&#xff08;重做日志&#xff09;闪亮登场了。它记录着…...

编程日记 2025/10/23 14:02:01

【AI应用】免费代码仓构建定制版本的ComfyUI应用镜像

免费代码仓构建定制版本的ComfyUI应用镜像 1 创建代码仓1.1 注册登陆1.2 创建代码仓1.5 安装中文语言包1.4 拉取ComfyUI官方代码2 配置参数和预装插件2.1 保留插件和模型的版本控制2.2 克隆插件到代码仓2.2.1 下载插件2.2.2 把插件设置本仓库的子模块管理3 定制Docker镜像3.1 创…...

编程日记 2025/10/25 14:34:13

MineWorld，微软研究院开源的实时交互式世界模型

MineWorld是什么 MineWorld是微软研究院开发并开源的一个基于《我的世界》&#xff08;Minecraft&#xff09;的实时互动世界模型。该模型采用了视觉-动作自回归Transformer架构&#xff0c;将游戏场景和玩家动作转化为离散的token ID&#xff0c;并通过下一个token的预测进行…...

编程日记 2025/10/4 19:57:49

被裁20240927 --- 视觉目标跟踪算法

永远都像初次见你那样使我心荡漾 参考文献目前主流的视觉目标跟踪算法一、传统跟踪算法1. 卡尔曼滤波&#xff08;Kalman Filter&#xff09;2. 相关滤波&#xff08;Correlation Filter&#xff0c;如KCF、MOSSE&#xff09;3. 均值漂移&#xff08;MeanShift/CamShift&#x…...

编程日记 2025/10/23 5:14:53

​​Agentic AI——当AI学会主动思考与决策，世界将如何被重塑？

一、引言&#xff1a;2025&#xff0c;Agentic AI的元年 “如果ChatGPT是AI的‘聊天时代’&#xff0c;那么2025年将开启AI的‘行动时代’。”——Global X Insights[1] 随着Agentic AI&#xff08;自主决策型人工智能&#xff09;的崛起&#xff0c;AI系统正从被动应答的“工具…...

编程日记 2025/10/21 14:45:51

Ollama API 应用指南

1. 基础信息 默认地址: http://localhost:11434/api数据格式: application/json支持方法: POST&#xff08;主要&#xff09;、GET&#xff08;部分接口&#xff09; 2. 模型管理 API (1) 列出本地模型 端点: GET /api/tags功能: 获取已下载的模型列表。示例:curl http://lo…...

编程日记 2025/10/28 8:17:37

PNG透明免抠设计素材大全26000+

在当今的数字设计领域&#xff0c;寻找高质量且易于使用的素材是每个设计师的日常需求。今天&#xff0c;我们将为大家介绍一个超全面的PNG透明免抠设计素材大全&#xff0c;涵盖多种风格、主题和应用场景&#xff0c;无论是平面设计、网页设计还是多媒体制作&#xff0c;都能轻…...

编程日记 2025/10/14 0:19:09

4.多表查询

SQL 多表查询&#xff1a;数据整合与分析的强大工具 文章目录 SQL 多表查询&#xff1a;数据整合与分析的强大工具一、 多表查询概述1.1 为什么需要多表查询1.2 多表查询的基本原理 二、 多表查询关系2.1 一对一关系&#xff08;One-to-One&#xff09;示例&#xff1a; 2.2 一…...

编程日记 2025/10/21 0:22:22

MCP 基于 TypeScript 的完整示例，包含stdio、sse多种用法和调试，对于构建自己的API工具链很有用

typescript-mcp-demo 这是一个基于 Model Context Protocol (MCP) 的 TypeScript 示例项目&#xff0c;展示了如何创建一个简单的 MCP 服务器&#xff0c;包含基本的工具&#xff08;tools&#xff09;和资源&#xff08;resources&#xff09;功能。 官网&#xff1a;https:…...

编程日记 2025/7/7 12:39:14

位运算知识

位运算是一种直接对整数在内存中的二进制位进行操作的运算方式。计算机中的整数是以二进制形式存储的&#xff0c;位运算通过操作这些二进制位来实现高效的计算。位运算通常比普通的算术运算更快&#xff0c;因为它直接作用于硬件层面。 以下是几种常见的位运算符及其功能&…...

编程日记 2025/5/26 15:05:59

mybatis高级查询：一对多配置，一次性查出主表和子表中的数据

一、MyBatis高级查询&#xff1a;一对多 MyBatis是一款强大的持久层框架&#xff0c;提供了多种方式来处理关联查询&#xff0c;其中包括一对一和一对多的情况。在本文中&#xff0c;我们将深入探讨一对多关联查询的实现方式。 在MyBatis中配置一对多关系通常涉及到associati…...

编程日记 2025/6/5 20:34:18

美团2024年春招第一场笔试 C++

目录 1&#xff0c;小美的平衡矩阵 2&#xff0c;小美的数组询问 3&#xff0c;小美的MT 4&#xff0c;小美的朋友关系 1&#xff0c;小美的平衡矩阵 【题目描述】 给定一个n*n的矩阵&#xff0c;该矩阵只包含数字0和1。对于 每个i(1<i<n)&#xff0c;求在该矩阵中&am…...

编程日记 2025/10/27 9:13:13

XHTMLConverter把docx转换html报java.lang.NullPointerException异常

一.报错 1.报错信息 org.apache.poi.xwpf.converter.core.XWPFConverterException: java.lang.NullPointerExceptionat org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.convert(XHTMLConverter.java:77)at org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.doConve…...

编程日记 2025/10/15 23:58:38

OpenCV 图形API（52）颜色空间转换-----将 NV12 格式的图像数据转换为 RGB 格式的图像

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将图像从 NV12 (YUV420p) 色彩空间转换为 RGB。该函数将输入图像从 NV12 色彩空间转换到 RGB。Y、U 和 V 通道值的常规范围是 0 到 255。 输出图…...

编程日记 2025/10/25 11:04:59

pojovoDto等概念

Java 中的数据模型概念 POJO (Plain Old Java Object) POJO 是最简单的 Java 对象&#xff0c;不依赖于特定的框架&#xff0c;不实现任何特殊的接口&#xff0c;也不继承特定的类。 特点 具有无参构造函数属性使用 private 修饰提供公共的 getter 和 setter 方法可序列化 …...

编程日记 2025/10/24 2:18:56

COdeTop-206-反转链表

题目 206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 …...

编程日记 2025/10/26 9:21:14

线段树讲解（小进阶）

目录 前言 一、线段树知识回顾 线段树区间加减 区间修改维护&#xff1a; 区间修改的操作&#xff1a; 区间修改update&#xff1a; 线段树的区间查询 区间查询&#xff1a; 区间查询的操作&#xff1a; 递归查询过程&#xff1a; 区间查询query&#xff1a; 代码&…...

编程日记 2025/10/25 11:20:12

4082P 信号/频谱分析仪

——新利通仪器仪表—— 4082P丨信号/频谱分析仪 2Hz&#xff5e;110GHz Ceyear 4082系列信号/频谱分析仪在显示平均噪声电平、相位噪声、互调抑制、动态范围、幅度精度和测试速度等方面具备极佳的射频性能。具备强大的频谱分析、符合标准的功率测量套件、I/Q分析、瞬态分析…...

编程日记 2025/8/10 1:29:18

夏季跑步注意

夏季跑步注意 医学专家警示&#xff1a;大众跑者需以安全为先&#xff0c;警惕高温环境下“盲目冲刺”的风险。一些事件再次印证马拉松适宜气温为6-15℃&#xff0c;超过20℃时需主动降速并增加补水量。 所以建议每一位跑友&#xff0c;为了健康的跑步&#xff0c;每年除了做…...

编程日记 2025/10/5 4:15:36

openharmony5.0.0中C++公共基础类测试-线程相关(一)

C公共基础类测试及源码剖析 延续传统&#xff0c;show me the code&#xff0c;除了给出应用示例还重点分析了下openharmony中的实现。 简介 openharmony中提供了C公共基础类库&#xff0c;为标准系统提供了一些常用的C开发工具类&#xff0c;本文分析其实现&#xff0c;并给…...

编程日记 2025/10/24 22:52:15

TDengine 数据订阅设计

简介 数据订阅作为 TDengine 的一个核心功能&#xff0c;为用户提供了灵活获取所需数据的能力。通过深入了解其内部原理&#xff0c;用户可以更加有效地利用这一功能&#xff0c;满足各种实时数据处理和监控需求。 基本概念 主题 与 Kafka 一样&#xff0c;使用 TDengine 数…...

编程日记 2025/10/14 7:58:04

python：mido 提取 midi文件中某一音轨的音乐数据

pip install mido 使用 mido库可以方便地处理 MIDI 文件&#xff0c;提取其中音轨的音乐数据。 1.下面的程序会读取指定的 MIDI 文件&#xff0c;并提取指定编号音轨的音乐数据&#xff0c;主要包括音符事件等信息。 编写 mido_extract.py 如下 # -*- coding: utf-8 -*- &…...

编程日记 2025/6/9 2:03:02

vue3 中推荐使用的页面布局方式

1、Flexbox布局 原理 Flexbox&#xff08;弹性盒子布局模型&#xff09;提供了一种更加高效的方式来对容器中的子元素进行布局、对齐和分配空间。它能够根据容器的大小和子元素的内容自动调整布局&#xff0c;非常适合一维布局&#xff08;水平或垂直方向&#xff09;。 优…...

编程日记 2025/5/24 6:13:52

URP-UGUI交互功能实现

一、非代码层面实现交互&#xff08;SetActive&#xff09; Button &#xff1a;在OnClick&#xff08;&#xff09;中添加SetActive方法&#xff08;但是此时只首次有效&#xff09; Toggle &#xff1a;在OnClick&#xff08;&#xff09;中添加动态的SetActive方法 &#…...

编程日记 2025/10/23 17:28:38

UniGoal 具身导航 | 通用零样本目标导航 CVPR 2025

UniGoal的提出了一个通用的零样本目标导航框架&#xff0c;能够统一处理多种类型的导航任务 &#xff08;如对象类别导航、实例图像目标导航和文本目标导航&#xff09;&#xff0c;而无需针对特定任务进行训练或微调。 它的特点是 图匹配与多阶段探索策略&#xff01;&#x…...

编程日记 2025/10/23 16:01:03

通过Quartus II实现Nios II编程

目录 一、认识Nios II二、使用Quartus II 18.0Lite搭建Nios II硬件部分三、软件部分四、运行项目 一、认识Nios II Nios II软核处理器简介 Nios II是Altera公司推出的一款32位RISC嵌入式处理器&#xff0c;专门设计用于在FPGA上运行。作为软核处理器&#xff0c;Nios II可以通…...

编程日记 2025/10/18 12:40:58