知识点
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元购呢?
点击购买的时候抓包,修改数据
直接在数据包改价格
买的地方这里还是提示购买成功
这种以前端传递过来的结果为准,就一定会有前端验证的问题
设计2:商品价格以数据库设置价格为准。数据接收价格后运算
以数据库验证的如果不把价格写死,而是以传递过去值作为价格,还是可以修改价格进行绕过,最好的办法就是不传递价格,直接在另一个接受php文件里面把价格写死,不用传递,但是这里又可以修改数量绕过
办法就只能是对数量进行严格的过滤
jian
kang