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

第三十七天(js前端数据加密和混淆)

news 2025/8/17 11:47:29

前端技术JS实现：

1、非加密数据大致流程：

客户端发送->明文数据传输-服务端接受数据->处理数据

2、加密数据大致流程：

明文加密->客户端发送->密文数据传输-服务端接受数据->解密数据->处理数据

疑问：

安全测试中对数据进行修改提交会在上述哪一步操作中？

不加密：铭文数据传输时修改数据

加密：明文加密，在这操作时对数据进行修改，修改后让它加密，这才能使得它进入正常逻辑

#前端加密 Crypto库

项目：https://github.com/brix/crypto-js

参考：https://juejin.cn/post/7382893339181613068

使用Crypto库进行MD5/SHA1/HMAC/AES/DES等加密

base64 加密：

MD5 加密：

SHA1 加密：

HMAC 加密：

AES 加密：

DES 加密：

#前端加密 jsencrypt库

项目：https://github.com/travist/jsencrypt

参考：偏前端 + rsa加解密 + jsencrypt.min.js--（新增超长字符分段加解密） - 睿舞霓裳 - 博客园

使用jsencrypt库进行RSA等加密

RSA 加密：

先去生成一个公钥和私钥，上面的是公钥，下面的是私钥

测试：用之前写的一个ajax 提交数据的html文件，在里面将pass值进行加密；通过网页信息获取其加密方式，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台登录</title>
<style>
    body {
      background-color: #f1f1f1;
    }
    .login {
      width: 400px;
      margin: 100px auto;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      padding: 30px;
    }
    .login h2 {
      text-align: center;
      font-size: 2em;
      margin-bottom: 30px;
    }
    .login label {
      display: block;
      margin-bottom: 20px;
      font-size: 1.2em;
    }
    .login input[type="text"], .login input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1.2em;
      margin-bottom: 20px;
    }
    .login input[type="submit"] {
      background-color: #2ecc71;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1.2em;
      cursor: pointer;
    }
    .login input[type="submit"]:hover {
      background-color: #27ae60;
    }
</style>
</head>
<body>
<div class="login">
<h2>后台登录</h2>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="user" >
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="pass" >
<button>登录</button>
</div>
<script src="jquery.js"></script>
<script src="crypto-js.js"></script>

<script>

$("button").click(function (){

    var passstr=$('.pass').val();
    var aseKey = "aeskey"
    var aespassstr = CryptoJS.AES.encrypt(passstr, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=加密内容
            {
              mode: CryptoJS.mode.ECB, // 为DES的工作方式
              padding: CryptoJS.pad.Pkcs7 // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符
            }
    ).toString();

    //console.log(aesstr);
    $.ajax({
      type: 'POST',
      url: 'login.php',
      data: {
        username:$('.user').val(),
        password:aespassstr
      },
      dataType: 'json',
      success: function (data) {
        console.log(data);
        if (data['infoCode']==1){
          alert('登录成功!');
        }else{
          alert('登录失败!');
        }
      }

    });

});
</script>

<?php

$user=@$_POST['username'];
$pass=@$_POST['password'];
//真实情况需要在数据库获取
$success=array('msg'=>'ok');
if($user=='xiaodi' && $pass=='xiaodisec'){
$success['infoCode']=1;
}else{
$success['infoCode']=0;
}
echo json_encode($success);

输入账号密码后打开f12 ，然后点击登录，查看数据是提交到哪里，这里是提交到login.php

上面去，那么就在全局进行搜索这个文件

在源代码中搜索，找到了login.php ,然后看到password ，接收的是一个变量，那么就去跟踪这个变量

看到aes 应该是aes加密，然后找加密文件；这里应该是加密逻辑了

看到加密的js文件

将这个加密方法丢到控制台去测试一下，要先将空格和注释去掉

CryptoJS.AES.encrypt(passstr, CryptoJS.enc.Utf8.parse(aseKey), // 参数1=密钥, 参数2=加密内容
            {
              mode: CryptoJS.mode.ECB, // 为DES的工作方式
              padding: CryptoJS.pad.Pkcs7 // 当加密后密文长度达不到指定整数倍(8个字节、16个字节)则填充对应字符
            }
    ).toString();