当前位置: 首页 > news >正文

保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全

保护数据安全:JS前端加密与PHP后端解密实战教程,让敏感信息更安全

在Web开发中,确保用户提交的敏感信息(如密码、手机号码等)的安全性是非常重要的。一种常见的做法是使用加密技术来保护这些数据,在传输过程中不被第三方窃取或篡改。本文将通过一个实际案例,介绍如何使用JavaScript进行前端加密,并配合PHP进行后端解密,以提高敏感信息的安全性。

技术栈

  • 前端:HTML, JavaScript, Crypto-JS库
  • 后端:PHP, OpenSSL

步骤概述

  1. 引入Crypto-JS库。
  2. 在PHP端生成随机的IV(初始化向量)和Token作为会话密钥。
  3. 使用JavaScript对表单数据进行AES加密。
  4. 通过AJAX将加密后的数据发送到服务器。
  5. 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后端解密实战教程,让敏感信息更安全

保护数据安全&#xff1a;JS前端加密与PHP后端解密实战教程&#xff0c;让敏感信息更安全 在Web开发中&#xff0c;确保用户提交的敏感信息&#xff08;如密码、手机号码等&#xff09;的安全性是非常重要的。一种常见的做法是使用加密技术来保护这些数据&#xff0c;在传输过…...

72 分布式锁

72 分布式锁 什么是分布式锁 分布式锁 分布式 锁。那么分布式是指的什么呢&#xff1f;锁又是锁的谁呢&#xff1f;在业务开发中我们经常会听到分布式分布式的概念&#xff0c;分布式也很简单&#xff0c;通俗的来说就是你具有多个服务器&#xff0c;每个服务器上运行的程序…...

使用Windbg分析dump文件排查C++软件异常的一般步骤与要点分享

目录 1、概述 2、打开dump文件&#xff0c;查看发生异常的异常类型码 3、查看发生异常的那条汇编指令 3.1、汇编代码能最直接、最本真的反映出崩溃的原因 3.2、汇编指令中访问64KB小地址内存区&#xff0c;可能是访问了空指针 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数据并根据变量名筛选 准备&#xff1a;数据说明MATLAB批量提取参考 准备&#xff1a;数据说明 .csv数据如下&#xff1a; 打开某表格数据&#xff0c;如下&#xff1a;&#xff08;需要说明的是此数据含表头&#xff09; 需求说明&#xff1a;需…...

【软件】Ubuntu下QT的安装和使用

【软件】Ubuntu下QT的安装和使用 零、前言 QT是应用得比较广泛的程序框架&#xff0c;是因为其跨平台特性比较好&#xff0c;且用C/C作为开发语言&#xff0c;性能也比较好&#xff0c;故本文介绍如何安装和使用QT&#xff0c;用的版本是QT 6.2.4&#xff0c;由于QT在Windows…...

在Spring Boot中具有多个实现的接口正确注入的六种方式

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 在Spring Boot中&#xff0c;当一个接口具有多个实现时&#xff0c;正确地将这些实现注入到需要使用它们的地方是一个常见的需求。以下是在Spring Boot中实现这一目标的六种方式&#xff1a; 1. 使用Autowir…...

登陆微软账户太慢了,如何解决

软账号登录慢解决办法&#xff1a; 打开“网络和Internet”选择“以太网”选择“更改适配器选项”选择现用网络&#xff0c;右键->属性选择“IPV4”右键属性更改DNS地址为以下两者4.2.2.14.2.2.2...

Vue3动态组件component不生效问题解决方法

问题&#xff1a; vue3循环渲染动态组件component不生效&#xff0c;页面空白 在vue3使用component动态组件展示组件时&#xff0c;组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑&#xff0c;所以记录下&#xff1a; 登录…...

算力基础篇:从零开始了解算力

什么是算力 算力即计算能力&#xff08;Computing Power&#xff09;&#xff0c;狭义上指对数字问题的运算能力&#xff0c;而广义上指对输入信息处理后实现结果输出的一种能力。虽然处理的内容不同&#xff0c;但处理过程的能力都可抽象为算力。比如人类大脑、手机以及各类服…...

Redis 万字入门教程

0. 前言 文章已经收录到 GitHub 个人博客项目&#xff0c;欢迎 Star&#xff1a; https://github.com/chenyl8848/chenyl8848.github.io或者访问网站&#xff0c;进行在线浏览&#xff1a; https://chenyl8848.github.io/1. NoSQL 1.1 NoSQL 介绍 NoSQL(Not Only SQL )&…...

LeetCode :LCR 173. 点名

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;leetcode刷题 ​ ​ LeetCode :LCR 173. 点名 这个题就是缺失的数字&#xff0c;我们可以通过三种方式来解决这个问题。 1.可以通过位异或的方式来找到这个数&#xff08;相同的数异或为…...

Gin框架操作指南06:POST绑定(下)

官方文档地址&#xff08;中文&#xff09;&#xff1a;https://gin-gonic.com/zh-cn/docs/ 注&#xff1a;没用过Gin的读者强烈建议先阅读第一节&#xff1a;Gin操作指南&#xff1a;开山篇。 本节继续演示POST绑定&#xff0c;包括将request-body绑定到不同的结构体中&#x…...

LLaMA、llama.cpp和Ollama区别

LLaMA&#xff1a;LLaMA是由Meta&#xff08;Facebook的母公司&#xff09;开源的大型语言模型&#xff0c;它提供了不同规模的模型&#xff0c;包括1B、3B、11B和90B等参数规模的版本。LLaMA模型支持多语言对话&#xff0c;并在多个基准数据集上进行了评估&#xff0c;展现出与…...

NDK开发

NDK介绍 app为什么会把代码放到so中 a) C语言历史悠久&#xff0c;有很多现成的代码可用 b) C代码执行效率比Java高 c) Java代码很容易被反编译&#xff0c;而且反编译以后的逻辑很清晰 为什么要学习NDK开发 在安卓的so开发中&#xff0c;其他基本与C/C开发一致&#xff…...

docker overlay 占用空间太大,迁移到 /data/

将 Docker 的 overlay 存储驱动迁移到 /data/ 目录下&#xff0c;可以通过以下步骤完成&#xff1a; 1. 停止 Docker 服务 首先&#xff0c;停止 Docker 服务以确保没有容器在运行&#xff0c;并且数据不会被写入到当前的存储位置。 sudo systemctl stop docker2. 备份现有数…...

Windows性能监控与调优:让电脑运行如飞

一、性能监控 1. 使用任务管理器深入监控 打开任务管理器 我们可以通过按下Ctrl Shift Esc快捷键来打开任务管理器。 或者右键点击任务栏空白处&#xff0c;选择“任务管理器”。 查看性能 在任务管理器中&#xff0c;点击“性能”标签页。 我们可以看到“概览”标签&#x…...

前端响应式布局

1.什么是响应式布局&#xff1f; 响应式布局是一种使网页在不同设备&#xff08;如手机、平板和桌面&#xff09;上均能良好显示的设计理念。 2.响应式布局的原理&#xff1f; 通过灵活的网格布局、CSS 媒体查询和弹性单位等技术&#xff0c;实现内容自适应屏幕尺寸变化。 3.响…...

力扣MySQL 1581

先把两张表连接&#xff0c;amount为null 的正是我们需要的&#xff0c;再按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 正确代码&…...

就是这个样的粗爆,手搓一个计算器:科学计算器

作为程序员&#xff0c;没有合适的工具&#xff0c;就得手搓一个&#xff0c;PC端&#xff0c;移动端均可适用。废话不多说&#xff0c;直接上代码。 HTML: <div class"calculator"><div class"display-wrapper"><div class"display…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...