小迪安全第16天：php开发-个人博客项目&JS-Ajax&前端逻辑&购物&登录&上传

最新推荐文章于 2024-07-24 16:20:17 发布

Gin311

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量703

点赞数 34

文章标签： javascript 前端 php

本文链接：https://blog.csdn.net/qq_65106718/article/details/137610968

版权

知识点

1.js前端验证-文件上传

2.js-Ajax传递-登录-状态

3.JS-Ajax传递-购物-参数

1.文件上传-类型-过滤

设计：通过javascript进行文件后缀筛选验证

2.状态回显-登录-状态码

设计：通过Ajax传递数据进行用户登录验证

3.参数修改-购物-参数修改

设计：通过Ajax传递数据进行购物验证

设计1：商品价格以前端设置价格为准。数据接收价格后运算

设计2：商品价格以数据库设置价格为准。数据接收价格后运算

设计3：商品价格以数据库设置价格为准。数据只接受数量后运算

设计4：商品价格以数据库设置价格为准。数据只接受数量后做过滤运算

JS前端认证

一、upload.php

1.html代码

<form class="upload" method="post" enctype="multipart/form-data"  action="">
    <input class="uploadfile" type="file"  name="upload" onchange="checkFileExt(this.value)"/><br />
    <input class="sub" type="submit" name="submit" value="开始上传" />
</form>

2.引入js：这个js文件相当于封装的代码，加载进去类似于包含的意思，里面的代码就会被加载，我们就可以直接用这个js声明好的函数。

<script src="js/jquery-1.12.4.min.js"></script>

3.js代码验证

<script>
    function checkFileExt(filename)
    {
        var flag = false; //状态
        var arr = ["jpg","png","gif"];
        //取出上传文件的扩展名
        //1.jpg index=1，ext=jpg
        var index = filename.lastIndexOf(".");
        var ext = filename.substr(index+1);
        //比较
        for(var i=0;i<arr.length;i++)
        {
            if(ext == arr[i])
            {
                flag = true; //一旦找到合适的，立即退出循环
                alert("上传的文件符合要求！");
                break;
            }
        }
        //条件判断
        if(!flag)
        {
            alert("上传的文件不符合要求，请重新选择！");
            location.reload(true);
        }
    }
</script>

对文件上传的后缀名进行验证，符合要求的才能上传
这个功能的实现可以由PHP或JS去实现
两种验证的区别：PHP验证的代码看不到只能黑盒测试后端服务端 JS验证的代码可以看到，是白盒测试前端浏览器

4.php代码（file-upload,php）

<?php
header("Content-Type:text/html;charset=utf-8");
@$file_name=$_FILES['upload']['name'];
//获取上传文件类型
@$file_type=$_FILES['upload']['type'];
//获取上传文件大小
@$file_size=$_FILES['upload']['size'];
//获取上传文件临时文件名
@$file_tmpname=$_FILES['upload']['tmp_name'];
//获取上传文件是否错误
@$file_error=$_FILES['upload']['error'];

echo $file_name."<hr>";
echo $file_type."<hr>";
echo $file_size."<hr>";
echo $file_tmpname."<hr>";
echo $file_error."<hr>";

if (@$file_error>0){
    echo '上传出错！';
}
else{
    move_uploaded_file(@$_FILES["upload"]["tmp_name"], "../upload/" . @$_FILES["upload"]["name"]);
    echo "文件存储在: " . "upload/" . @$_FILES["upload"]["name"];
}
?>

如何判断代码采用js验证：直接右键查看源代码

二、禁用JS

1.火狐浏览器

①javascript.enabled的值改为false

② 上传成功

Ajax

一种js语言，传递数据的一种方式，实现数据交互

1.login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax登录</title>
</head>
<body>
帐号：<input type="text" class="user">
密码：<input type="password" class="pass">
<button>用户登录</button>

<script src="../js/jquery-1.12.4.min.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            type:'post',
            url:'ajax.php',             //发给ajax.php文件。
            dataType:'json',
            data:{
                myUname:$('.user').val(),
                myUpass:$('.pass').val()
            },
            success:function (res) {
                //console.log(res);
                if(res.infoCode==1){
                    alert('登录成功');
                }else{
                    alert('登录失败');

                }
            }
        });

    });

</script>

</body>
</html>

2.ajax.php

<?php


$username=$_POST['myUname'];
$password=$_POST['myUpass'];
$success=array('msg'=>'ok');
if($username=='xiaodi' && $password=='123456'){
    $success['infoCode'] = 1; //成功登录
}else{
    $success['infoCode'] = 0; //失败登录
}
echo json_encode($success);

登录错误：

3.抓包（看右边的返回值）

js，ajax 请求->返回->js读取返回的数据->js,ajax代码进行解析->结果

——验证过程要是在js代码中完成，则可以绕过，具体情况具体对待

php 请求->返回->返回结果（服务器不会理会，自我安慰而已）

将“infocode”的值改为1发送就会提示登陆成功

4.ajax有时会用包含文件，将代码封装（点开引用的链接）

购物-设计

1.设计1：商品价格以前端设置价格为准。数据接收价格后运算

user.php——前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买设计1</title>
</head>
<body>
 
 
<img src="iphone.jpg" width="270" height="270" alt=""/><br>
价格：8888<br>
数量：<input type="text" class="num">
<button>购买</button>
 
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            type:'post',
            url:'shop.php',
            dataType:'json',
            data:{
                price:'8888',
                number:$('.num').val()
 
            },
			success:function (res) {
                //console.log(res);
                if(res.code==1){
                    alert('购买成功');
                }else{
                    alert('购买失败');
 
                }
            }
        });
 
    });
</script>
</body>
</html>

shop.php——进行验证

<?php
header("Content-Type:text/html;charset=utf-8");
$success=array('msg'=>'ok');
$price=$_POST['price'];
$num=$_POST['number'];
$m=$price*$num;
 
if($m<10000){
    $success['code']=1;
}else{
    $success['code']=0;
}
echo json_encode($success);
?>

第一种绕过方法：同上，Do intersept，更改code为1

第二种绕过方法：更改price=8

设计2：商品价格以数据库设置价格为准。数据接收价格后运算

1.user1.php

记得更改数据库配置文件

<?php
header("Content-Type:text/html;charset=utf-8");
include('/config/conn1.php');
//


$sql="select * from shop where id=1";

$result=mysql_query($sql,$conn);
while($row=mysql_fetch_array($result)){
    $imgsrc=$row['imgsrc'];
    $price=$row['price'];
    echo "<img src='$imgsrc' width='270' height='270' alt=''/><br>";
    echo "价格：$price<br>";
    echo "数量：<input type='text' class='num'>";
    echo "<button>购买</button>";

}



?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买设计2</title>
</head>
<body>

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $('button').click(function () {
        $.ajax({
            type:'post',
            url:'shop1.php',
            dataType:'json',
            data:{
                price:<?php echo $price;?>,
                number:$('.num').val()

            },
            success:function (res) {
                //console.log(res);
                if(res.code==1){
                    alert('购买成功');
                }else{
                    alert('购买失败');

                }
            }
        });

    });
</script>
</body>
</html>

2.shop1.php

<?php
header("Content-Type:text/html;charset=utf-8");
$success=array('msg'=>'ok');
$price=$_POST['price'];
$num=$_POST['number'];
$m=$price*$num;

if($m<10000){
    $success['code']=1;
}else{
    $success['code']=0;
}

echo json_encode($success);



?>

此时burp抓包直接更改数量会改变实际价格（做了表面功夫，看起来规范一点而已）

那么该如何防范呢？

①价格写死

但此时还是有问题，可以用burp抓包更改数量

②对数量进行过滤运算

福利期货应用：

{"code":200,"data":"111111111","msg":'"} 验证码正确返回，接受进入重置密码页面

{"code":200,"data":"111111111","短信验证不正确":'"} 验证码错误返回，等待输入正确页面

小技巧：返回值中有json，code，msgbox等关键字，大部分为js前端验证

Gin311

关注

34
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
小迪安全第16天：php开发-个人博客项目&JS-Ajax&前端逻辑&购物&登录&上传

1.js前端验证-文件上传2.js-Ajax传递-登录-状态3.JS-Ajax传递-购物-参数1.文件上传-类型-过滤设计：通过javascript进行文件后缀筛选验证2.状态回显-登录-状态码设计：通过Ajax传递数据进行用户登录验证3.参数修改-购物-参数修改设计：通过Ajax传递数据进行购物验证设计1：商品价格以前端设置价格为准。数据接收价格后运算设计2：商品价格以数据库设置价格为准。数据接收价格后运算设计3：商品价格以数据库设置价格为准。数据只接受数量后运算。
复制链接

扫一扫