保护数据安全：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库，以便于后续使用其提供的加密功能。

<scripttype="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();});}elseif(res.code ==1){
                        layer.msg("登录成功，"+ res.msg,{icon:4, time:1000},function(){
                            location.href ='?m=Index&a=deskTop'});}}});returnfalse;});});

lockEncrypt

需要根据实际情况编写，它应该接受原始JSON字符串以及之前生成的IV和Token作为参数，返回经过AES-CBC模式加密的数据。

前端加密封装函数

/*
* 登陆加密
* 前端加密后端解密
* by woodCutter 2024-10-28
* */functionlockEncrypt(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协议、定期更新软件版本等共同维护系统安全。希望本篇文章能帮助大家更好地理解和实践这一重要话题。