保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全
保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全
在Web开发中,确保用户提交的敏感信息(如密码、手机号码等)的安全性是非常重要的。一种常见的做法是使用加密技术来保护这些数据,在传输过程中不被第三方窃取或篡改。本文将通过一个实际案例,介绍如何使用JavaScript进行前端加密,并配合PHP进行后端解密,以提高敏感信息的安全性。
技术栈
- 前端:HTML, JavaScript, Crypto-JS库
- 后端:PHP, OpenSSL
步骤概述
- 引入Crypto-JS库。
- 在PHP端生成随机的IV(初始化向量)和Token作为会话密钥。
- 使用JavaScript对表单数据进行AES加密。
- 通过AJAX将加密后的数据发送到服务器。
- PHP端接收并解密数据,处理业务逻辑。
实施细节
1. 引入Crypto-JS库
首先,在HTML页面头部引入Crypto-JS库,以便于后续使用其提供的加密功能。
<script type="text/javascript" src="{$SiteUrl}static/rooted/js/crypto-js.min.js"></script>
2. 生成随机IV-Token
在用户登录之前,我们需要为每个用户生成唯一的IV和Token。这可以通过PHP实现:
$_SESSION['loginToken'] = generateCode(16); // 随机生成16位长度的密钥
$tpl->assign('loginToken', $_SESSION['loginToken']);
这里generateCode是一个自定义函数,用来产生指定长度的随机字符串。
3. JS前端加密
当用户填写完登录信息并提交时,使用JavaScript捕获表单数据,并调用Crypto-JS中的AES加密方法对其进行加密:
//数据提交layui.use(['form', 'layer'], function () {var $ = layui.jquery;var form = layui.form;var layer = layui.layer;//提交form.on('submit(login)', function (data) {var data = data.field;var jsonsStr = lockEncrypt(JSON.stringify(data),loginToken,loginToken);var userInfo = "'" + jsonsStr + "'";$.ajax({type: "post",url: "?m=Login&a=LoginIn&act=login",async: true,data: {userInfo:userInfo},dataType: "json",success: function (res) {//console.log(res);if (res.code == 0) {layer.msg(res.msg, {icon: 2, time: 1000},function (){$("#getCode").click();});} else if(res.code == 1) {layer.msg("登录成功," + res.msg, {icon: 4, time: 1000}, function () {location.href = '?m=Index&a=deskTop'});}}});return false;});});
lockEncrypt需要根据实际情况编写,它应该接受原始JSON字符串以及之前生成的IV和Token作为参数,返回经过AES-CBC模式加密的数据。
前端加密封装函数
/*
* 登陆加密
* 前端加密后端解密
* by woodCutter 2024-10-28
* */
function lockEncrypt(str, key, iv) {//密钥16位var key = CryptoJS.enc.Utf8.parse(key);//加密向量16位var iv = CryptoJS.enc.Utf8.parse(iv);var encrypted = CryptoJS.AES.encrypt(str, key, {iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7});return encrypted;}
4. 发送加密数据
利用AJAX将加密后的数据发送至服务器端处理:
$.ajax({type: "post",url: "?m=Login&a=LoginIn&act=login",async: true,data: { userInfo: "'" + jsonsStr + "'" },dataType: "json",success: function (res) { ... }
});
5. PHP后端解密
服务器接收到请求后,需先验证请求是否合法,然后使用相同的IV和Token对数据进行解密:
$userInfo = LockDecrypt($_POST["userInfo"], $_SESSION['loginToken'], $_SESSION['loginToken']);
$userInfo = get_object_vars($userInfo);
...
LockDecrypt函数实现了AES解密过程,它从Base64编码后的字符串开始,最终还原成原始的JSON对象。
结语
通过上述步骤,我们可以有效地增强网站对于敏感信息的保护能力。但需要注意的是,任何单一的技术手段都无法提供绝对的安全保障;因此,除了实施合适的加密策略外,还需结合其他安全措施如HTTPS协议、定期更新软件版本等共同维护系统安全。希望本篇文章能帮助大家更好地理解和实践这一重要话题。
相关文章:
保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全
保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全 在Web开发中,确保用户提交的敏感信息(如密码、手机号码等)的安全性是非常重要的。一种常见的做法是使用加密技术来保护这些数据,在传输过…...
72 分布式锁
72 分布式锁 什么是分布式锁 分布式锁 分布式 锁。那么分布式是指的什么呢?锁又是锁的谁呢?在业务开发中我们经常会听到分布式分布式的概念,分布式也很简单,通俗的来说就是你具有多个服务器,每个服务器上运行的程序…...
使用Windbg分析dump文件排查C++软件异常的一般步骤与要点分享
目录 1、概述 2、打开dump文件,查看发生异常的异常类型码 3、查看发生异常的那条汇编指令 3.1、汇编代码能最直接、最本真的反映出崩溃的原因 3.2、汇编指令中访问64KB小地址内存区,可能是访问了空指针 3.3、汇编指令中访问了很大的内核态的内存地…...
30 天 Python 3 学习计划
30 天 Python 3 学习计划 https://www.runoob.com/python3/python3-tutorial.html 1. Python3 基础语法 2. Python3 基本数据类型 3. Python3 数据类型转换 4. Python3 解释器 5. Python3 注释 6. Python3 运算符 7. Python3 数字(Number) 8. Python3 字符串 …...
【MATLAB实例】批量提取.csv数据并根据变量名筛选
【MATLAB实例】批量提取.csv数据并根据变量名筛选 准备:数据说明MATLAB批量提取参考 准备:数据说明 .csv数据如下: 打开某表格数据,如下:(需要说明的是此数据含表头) 需求说明:需…...
【软件】Ubuntu下QT的安装和使用
【软件】Ubuntu下QT的安装和使用 零、前言 QT是应用得比较广泛的程序框架,是因为其跨平台特性比较好,且用C/C作为开发语言,性能也比较好,故本文介绍如何安装和使用QT,用的版本是QT 6.2.4,由于QT在Windows…...
在Spring Boot中具有多个实现的接口正确注入的六种方式
博客主页: 南来_北往 系列专栏:Spring Boot实战 在Spring Boot中,当一个接口具有多个实现时,正确地将这些实现注入到需要使用它们的地方是一个常见的需求。以下是在Spring Boot中实现这一目标的六种方式: 1. 使用Autowir…...
登陆微软账户太慢了,如何解决
软账号登录慢解决办法: 打开“网络和Internet”选择“以太网”选择“更改适配器选项”选择现用网络,右键->属性选择“IPV4”右键属性更改DNS地址为以下两者4.2.2.14.2.2.2...
Vue3动态组件component不生效问题解决方法
问题: vue3循环渲染动态组件component不生效,页面空白 在vue3使用component动态组件展示组件时,组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑,所以记录下: 登录…...
算力基础篇:从零开始了解算力
什么是算力 算力即计算能力(Computing Power),狭义上指对数字问题的运算能力,而广义上指对输入信息处理后实现结果输出的一种能力。虽然处理的内容不同,但处理过程的能力都可抽象为算力。比如人类大脑、手机以及各类服…...
Redis 万字入门教程
0. 前言 文章已经收录到 GitHub 个人博客项目,欢迎 Star: https://github.com/chenyl8848/chenyl8848.github.io或者访问网站,进行在线浏览: https://chenyl8848.github.io/1. NoSQL 1.1 NoSQL 介绍 NoSQL(Not Only SQL )&…...
LeetCode :LCR 173. 点名
🔥个人主页:guoguoqiang. 🔥专栏:leetcode刷题 LeetCode :LCR 173. 点名 这个题就是缺失的数字,我们可以通过三种方式来解决这个问题。 1.可以通过位异或的方式来找到这个数(相同的数异或为…...
Gin框架操作指南06:POST绑定(下)
官方文档地址(中文):https://gin-gonic.com/zh-cn/docs/ 注:没用过Gin的读者强烈建议先阅读第一节:Gin操作指南:开山篇。 本节继续演示POST绑定,包括将request-body绑定到不同的结构体中&#x…...
LLaMA、llama.cpp和Ollama区别
LLaMA:LLaMA是由Meta(Facebook的母公司)开源的大型语言模型,它提供了不同规模的模型,包括1B、3B、11B和90B等参数规模的版本。LLaMA模型支持多语言对话,并在多个基准数据集上进行了评估,展现出与…...
NDK开发
NDK介绍 app为什么会把代码放到so中 a) C语言历史悠久,有很多现成的代码可用 b) C代码执行效率比Java高 c) Java代码很容易被反编译,而且反编译以后的逻辑很清晰 为什么要学习NDK开发 在安卓的so开发中,其他基本与C/C开发一致ÿ…...
docker overlay 占用空间太大,迁移到 /data/
将 Docker 的 overlay 存储驱动迁移到 /data/ 目录下,可以通过以下步骤完成: 1. 停止 Docker 服务 首先,停止 Docker 服务以确保没有容器在运行,并且数据不会被写入到当前的存储位置。 sudo systemctl stop docker2. 备份现有数…...
Windows性能监控与调优:让电脑运行如飞
一、性能监控 1. 使用任务管理器深入监控 打开任务管理器 我们可以通过按下Ctrl Shift Esc快捷键来打开任务管理器。 或者右键点击任务栏空白处,选择“任务管理器”。 查看性能 在任务管理器中,点击“性能”标签页。 我们可以看到“概览”标签&#x…...
前端响应式布局
1.什么是响应式布局? 响应式布局是一种使网页在不同设备(如手机、平板和桌面)上均能良好显示的设计理念。 2.响应式布局的原理? 通过灵活的网格布局、CSS 媒体查询和弹性单位等技术,实现内容自适应屏幕尺寸变化。 3.响…...
力扣MySQL 1581
先把两张表连接,amount为null 的正是我们需要的,再按customer_id聚合 select Visits.visit_id,customer_id ,Transactions.visit_id ,transaction_id ,amount from Visits left join Transactions on Visits.visit_idTransactions.visit_id 正确代码&…...
就是这个样的粗爆,手搓一个计算器:科学计算器
作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。 HTML: <div class"calculator"><div class"display-wrapper"><div class"display…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
