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

1. <script type="text/javascript" src="{$SiteUrl}static/rooted/js/crypto-js.min.js"></script>

复制代码

2. 天生随机IV-Token

在用户登录之前，我们必要为每个用户天生唯一的IV和Token。这可以通过PHP实现：

1. $_SESSION['loginToken'] = generateCode(16); // 随机生成16位长度的密钥
2. $tpl->assign('loginToken', $_SESSION['loginToken']);

复制代码

这里generateCode是一个自定义函数，用来产生指定长度的随机字符串。
3. JS前端加密

当用户填写完登录信息并提交时，使用JavaScript捕捉表单数据，并调用Crypto-JS中的AES加密方法对其进行加密：

1.     //数据提交
2.     layui.use(['form', 'layer'], function () {
3.         var $ = layui.jquery;
4.         var form = layui.form;
5.         var layer = layui.layer;
7.         //提交
8.         form.on('submit(login)', function (data) {
9.             var data = data.field;
10.             var jsonsStr = lockEncrypt(JSON.stringify(data),loginToken,loginToken);
11.             var userInfo = "'" + jsonsStr + "'";
13.             $.ajax({
14.                 type: "post",
15.                 url: "?m=Login&a=LoginIn&act=login",
16.                 async: true,
17.                 data: {
18.                     userInfo:userInfo
19.                 },
20.                 dataType: "json",
21.                 success: function (res) {
22.                     //console.log(res);
23.                     if (res.code == 0) {
24.                         layer.msg(res.msg, {icon: 2, time: 1000},function (){
25.                             $("#getCode").click();
26.                         });
27.                     } else if(res.code == 1) {
28.                         layer.msg("登录成功，" + res.msg, {icon: 4, time: 1000}, function () {
29.                             location.href = '?m=Index&a=deskTop'
30.                         });
31.                     }
32.                 }
33.             });
34.             return false;
35.         });
36.     });

复制代码

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

1. /*
2. * 登陆加密
3. * 前端加密后端解密
4. * by woodCutter 2024-10-28
5. * */
6. function lockEncrypt(str, key, iv) {
7.     //密钥16位
8.     var key = CryptoJS.enc.Utf8.parse(key);
9.     //加密向量16位
10.     var iv = CryptoJS.enc.Utf8.parse(iv);
11.     var encrypted = CryptoJS.AES.encrypt(str, key, {iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7});
12.     return encrypted;
14. }

复制代码

4. 发送加密数据

利用AJAX将加密后的数据发送至服务器端处理：

1. $.ajax({
2.     type: "post",
3.     url: "?m=Login&a=LoginIn&act=login",
4.     async: true,
5.     data: { userInfo: "'" + jsonsStr + "'" },
6.     dataType: "json",
7.     success: function (res) { ... }
8. });

复制代码

5. PHP后端解密

服务器接收到哀求后，需先验证哀求是否正当，然后使用雷同的IV和Token对数据进行解密：

1. $userInfo = LockDecrypt($_POST["userInfo"], $_SESSION['loginToken'], $_SESSION['loginToken']);
2. $userInfo = get_object_vars($userInfo);
3. ...

复制代码

LockDecrypt函数实现了AES解密过程，它从Base64编码后的字符串开始，终极还原成原始的JSON对象。
结语

通过上述步调，我们可以有效地加强网站对于敏感信息的保护能力。但必要注意的是，任何单一的技能手段都无法提供绝对的安全保障；因此，除了实施合适的加密计谋外，还需结合其他安全步伐如HTTPS协议、定期更新软件版本等共同维护系统安全。盼望本篇文章能资助大家更好地明白和实践这一紧张话题。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告