JS应用原生代码Ajax技术JQuery库Axios库前端校验安全结合
前言
学习的目的 ： javascript 前后端结合的模式可以帮助我们获取更多的信息
#安全结合：
1、发现更多的有利用价值的信息（URL、域名、路径等等）
测试站、后台路径、未公开的路径、api地址等等
2、发现敏感信息（硬编码的帐号、pass、API密钥、注释等等）
硬编码帐号可登录、测试帐号可被登录、密钥泄露、注释中开发信息等等
3、发现危险的代码（eval、dangerouslySetInnerHTML等等）
URL跳转，XSS跨站、模版注入（SSTI）等
4、了解网站的逻辑校验功能
前端检测，加密逆向，数据走向等
基础： js事件
常见的 HTML 事件
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
Ajax技术
1、原生JS教程
https://www.w3school.com.cn/js/index.asp
2、jQuery库教程
https://www.w3school.com.cn/jquery/index.asp
3、Axios库教程
https://www.axios-http.cn/docs/intro
原生态的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//原生态
var http = new XMLHttpRequest(); //XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。
//ajax 请求 不能跨域 只能请求本地服务器上的内容
http.open('GET', '1.txt', true);
http.send();;
//open send 就是发送请求 这个需要响应
// http.onreadystatechange = function() {
// if (http.readyState == 4 && http.status == 200) {
// document.write(http.responseText);
// }
// };
// onreadystatechange 他是XMLHttpRequest对象的事件属性，每当readyState属性改变时，就会触发该事件。readyState属性表示 XMLHttpRequest 的状态。0表示请求未初始化，1表示服务器连接已建立，2表示请求已接收，3表示请求处理中，4表示请求已完成，status属性表示服务器的HTTP响应码。
// readyState 又分为 0 : 请求未初始化 1 : 服务器连接已建立 2 : 请求已接收 3 : 请求处理中 4 : 请求已完成
// status 表示服务器的HTTP响应码，200表示成功，404表示页面不存在，500表示服务器错误。
http.onload = function() {
if (http.status === 200) {
console.log(http.responseText);
} else {
document.write('请求失败');
}
};
//onload 他是XMLHttpRequest对象的事件属性，在请求完成时触发。
// 这个是个回调函数就是执行响应成功之后要做的事情
</script>
</body>
</html>jquery库下的ajax技术
调用库可以使ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> --> <!-- 引入jQuery库 --> 使用外部链接
<script src="jquery-3.7.1.min.js"></script>本地连接
<script>
//采用jQuery库实现ajax技术
$.ajax({
method: "GET",
url: "1.txt",
dataType: "text",
success: function(response) {
console.log(response);
}
});
</script>
</body>
</html>
axios库下的ajax技术
<script src="axios.min.js"></script>
<script>
axios.get('1.txt').then(function(response) {
console.log(response.data);
})
</script>
ajax实现真实的前后端效验
场景：当我们进行登录页面的时候 会使用js前端验证（优点就是方便，快捷）这个时候就需要使用到ajax 对用户输入的账号密码进行验证然后后台给与响应
前端 login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台登录</title>
<style>
body {
background-color: #f1f1f1;
}
.login {
width: 400px;
margin: 100px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.login h2 {
text-align: center;
font-size: 2em;
margin-bottom: 30px;
}
.login label {
display: block;
margin-bottom: 20px;
font-size: 1.2em;
}
.login input[type="text"],
.login input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1.2em;
margin-bottom: 20px;
}
.login input[type="submit"] {
background-color: #2ecc71;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
}
.login input[type="submit"]:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<div class="login">
<h2>后台登录</h2>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="user">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="pass">
<button onclick="Login()">登录</button>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
function Login() {
$.ajax({
method: 'post',
url: 'login.php',
data: {
username: $('.user').val(), // 获取数据的时候 使用的是class .val是获取值
password: $('.pass').val()
},
dataType: 'json',
success: function(data) {
console.log(data);
if (data['infoCode'] == 1) {
alert('登录成功!');
} else {
alert('登录失败!');
}
}
})
}
</script>后端 login.php
$user=@$_POST['username'];
$pass=@$_POST['password'];
//真实情况需要在数据库获取
$success=array('msg'=>'ok'); //这里的msg是自定义的提示信息，可以根据实际情况修改 这个表示后台进行了处理
if($user=='xiaodi' && $pass=='xiaodisec'){
$success['infoCode']=1; //这里的infoCode是自定义的状态码，可以根据实际情况修改 这个表示登录成功
}else{
$success['infoCode']=0;
}
echo json_encode($success); //对数据进行封装 返回
echo "欢迎登录到首页";效果：
前端js验证的绕过
我们发现
那只要伪造后端的返回值就能进入
演示：输入错误的账号密码
修改为1 直接可以登录
文件上传的前后端效验
前端file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="file.php" method="post" enctype="multipart/form-data"> //使用action 把上传的文件交给 file.php 选择文件：
<input type="file" name="file_upload" onchange="checkFile(this.value)">
<!-- onchange事件用于检测上传的文件类型 就是选择的功能 -->
<input type="submit" value="上传">
</form>
<script src="jquery-3.7.1.min.js"></script>
<script>
// function checkFile(filename) {
// //x.jpg 白名单校验
// var exts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'mpeg'];
// var index = filename.lastIndexOf("."); //lastIndexOf("") 查找相应索引字母的位置 返回的是位数
// var ext = filename.substr(index + 1); //substr(start,length) 截取字符串 从start开始截取length个字符 index的位数是到 . +1才是开始截取后缀名
// for (var i = 0; i < exts.length; i++) { //循环数组 进行判断
// if (ext == exts[i]) {
// alert('文件正确！');
// break;
// //正确上传文件逻辑代码在下面
// } else {
// alert('非法文件！');
// window.location.replace("file.html")
// break;
// }
// }
// }
//黑名单效验
function checkFile(filename) {
var exts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'php'];
var index = filename.lastIndexOf(".");
var ob = filename.substr(index + 1);
for (var i = 0; i < exts.length; i++) {
if (ob != exts[i]) {
alert("文件格式正确！");
} else {
alert("非法文件！");
window.location.replace("file.html");
break;
}
}
}
</script>
</body>后端 file.php
$name=$_FILES['file_upload']['name']; //获取上传的文件名
$type=$_FILES['file_upload']['type']; //获取上传的文件类型
$size=$_FILES['file_upload']['size']; //获取上传的文件大小
$tmp_name=$_FILES['file_upload']['tmp_name']; //获取上传的文件临时存放路径
$error=$_FILES['file_upload']['error']; //获取上传的错误信息
echo $name."<br>";
echo $type."<br>";
echo $size."<br>";
echo $tmp_name."<br>";
echo $error."<br>";前端文件上传的绕过
因为是在前端 我们可以随意的更改前端的代码 所以可以直接把判断条件给删除（前端是黑名单的话还可以但是白名单的话就难办了）
安全结合
可以直接去fafo上搜索 body="checkFile"