保护数据安全: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…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
