知识点
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前端验证