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

上线之叁

于 2024-05-17 20:01:21 发布

阅读量734

点赞数 12

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/san3144393495/article/details/138968107

版权

知识点

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

2.as-ajax传递-登录-状态

3.js-ajax传递-购物-参数

1.文件上传

1.类型过滤

设计理念，通过js代码实现文件上传验证

还是先写一个文件上传的表单

直接套用之前的就可以

js一般在ajax在文件传递的做测试的，

对于文件上传的后缀名进行验证，符合要求才能的的这个功能，可以是后端php也可以是前端js，这两种的区别就是php的验证代码看不到，只能黑盒测试，而js代码可以看到进行百合验证。

这种验证查看源代码，就能看到怎么验证的

这种前端验证可以直接抓包修改为php绕过，因为是前端，只要发送出去数据包就是骗过前端了

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

通过ajax传递数据进行登录的验证

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

这里调用到一些js的编号的js模块，可以直接引用里面写好的函数

jquery-1.12.4.min.js

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>

帐号：<input type="text" class="user">
密码：<input type="password" class="pass" autocomplete="new-password">
<button>用户登录</button>

<!--jquery-1.12.4.min.js封装好的js模块，可以直接引用里面的函数 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
    // button鼠标点击触发事件，之后就会创建一个函数
    $('button').click(function () {
        // 函数接受ajax数据，以post方式提交，发送到urlajax.php文件里面，以json的格式发送，ajax来源与jquery封装好的
        $.ajax({
            type:'post',
            url:'ajax.php',
            dataType:'json',
            data:{
                // 获取账户和密码
                myname:$('.user').val(),
                mypass:$('.pass').val()
            },
            success:function (res) {
                console.log(res)//成功之后接受数据发送回浏览器
            }
        })

        }

    )
</script>
</body>
</html>

ajax.php

<?php
$user=$_POST['user'];
$passwd=$_POST['pass'];

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

而这种代码验证的时候会返回json格式的数据

就会返回这样格式的数据，这里我没弄到那个jque的js文件，截图的小迪老师的

再给代码加两个弹窗表示登录成功失败

输入正确的账户密码就会弹窗登陆成功

而这种前端严重是有安全问题的

正常登录抓包，发出去可以看到返回了一个json数据，这时候我们就可以拦截这个返回包，修改值之后在发给服务器，就实现了登陆绕过

把这个返回的0改为1，在发送出去

绕过

而在实战中看不到这种验证，可能它已经写在某个js文件里面，在查看前端源代码的时候在去点那个js文件就可以看到了，就和juqeryjs文件一样，点开就可以看到内容

没啥区别

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

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

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

购物-设计

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买设计1</title>
</head>
<body>
<!--加载一个图片-->
<img src="/upload/file/upload/ke.jpeg" 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 () {  //接受鼠标单击之后就创建一个函数，引用js模块的ajax
        $.ajax({
            type:'post', //post提交方式，发送给shop.php
            url:'shop.php',
            dataType:'json',
            data:{
                price:'8888', //价格和数量
                number:$('.num').val()

            },
            success:function (res) {
                //console.log(res); //判断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'];//接受ajax传递过来的值
$m=$price*$num;

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

这时候直接正常买一个会弹出购买成功，可不可以尝试0元购呢？

点击购买的时候抓包，修改数据