小迪安全笔记-16

第16天：PHP开发-个人博客项目_JS-Ajax_前端逻辑_购物_登录_上传

知识点

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

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

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

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

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

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

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

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

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

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

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

JS前端认证

文件上传验证：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
<script src="js/shang"></script>
<script>
    function checkFileExt(filename)
    {
        var flag = false; //状态
        var arr = ["jpg","png","gif"];
//取出上传文件的扩展名
//1.php index=1 ext =php
        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代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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"];
}

对文件上传的后缀名进行验证，符合要求的才能上传

这个功能的实现可以由PHP或JS去实现

两种验证的区别：PHP验证的代码看不到 只能黑盒测试 后端 服务端

​ JS验证的代码可以看到，是白盒测试 前端 浏览器

直接右键查看源代码可以判断代码是否采用js验证

js的后端代码是可以看见的，php的看不见

禁用JS

火狐禁用js：

https://jingyan.baidu.com/article/215817f7ee47a01edb142347.html

Ajax

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

login.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>

js，ajax 请求->返回->js读取返回的数据->js,ajax代码进行解析->结果
——验证过程要是在js代码中完成，则可以绕过，具体情况具体对待
php 请求->返回->返回结果

先抓个包:

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

user.php——前端页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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——进行验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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);



?>

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

user1.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
header("Content-Type:text/html;charset=utf-8");
include('/config/conn.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>

shop1.php

<

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
?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);



?>

案例：

JS&Ajax 前端&上传&登录&购物

某违法 APP 登录找回密码验证机制（验证短信验证码）：

先利用自己的账号进行找回密码功能

通过抓取数据包，找到返回数据包中正确的返回状态码

再对目标账号进行找回密码操作

随意输入验证码，抓到返回的数据包

修改返回数据包中的状态码为正确的状态码

操作结束后，成功进入修改密码界面

这个例子中的app的状态码并非随机，非动态的状态码，并且采用的是前端验证，所以我们可以利用它的唯一状态码进行找回操作。

如果状态码是随机且动态的，即使我们利用自己的正确状态码进行操作，依旧无法绕过前端验证。