【第28课】安全开发-JS应用&原生开发&JQuery库&Ajax技术&前端后端&安全验证 ...

莱莱 · 2024-10-19 03:09:11

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

免责声明

  本文发布的工具和脚本，仅用作测试和学习研究，禁止用于商业用途，不能保证其正当性，精确性，完备性和有效性，请根据情况自行判定。
  如果任何单元或个人以为该项目标脚本大概涉嫌侵犯其权利，则应实时通知并提供身份证明，所有权证明，我们将在收到认证文件后删除相关内容。
  文中所涉及的技术、思路及工具等相关知识仅供安全为目标的学习利用，任何人不得将其应用于非法用途及红利等目标，间接利用文章中的任何工具、思路及技术，我方对于由此引起的法律效果概不负责。

JS知识点：
功能：登录验证，文件操作，商品购买，数据库操作，云应用接入，框架开发等
技术：原生开发，DOM树，常见库使用(JQuery)，框架开发（Vue，Nodejs）等
参考：
1、原生JS教程
https://www.w3school.com.cn/js/index.asp
2、jQuery库教程
https://www.w3school.com.cn/jquery/index.asp

复制代码

JS原生开发-文件上传-变量&对象&函数&事件

1 、布置前端页面
  2、JS获取提交数据
  3、JS对上传格式判定
  4、后端对上传数据处理
  前端JS进行后缀过滤，后端PHP进行上传处理
  架构：html js php - upload.php
  安全问题：
  1、过滤代码能看到分析绕过
  2、禁用JS或删除过滤代码绕过
  upload.html：文件上传交给前端实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-top: 30px;
max-width: 600px;
margin: 0 auto;
}
input[type="file"] {
margin-top: 20px;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>文件上传</h1>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="file">选择文件:</label>
<br>
<input type="file" id="file" name="f" onchange="CheckFileExt(this.value)">
<br>
<button type="submit">上传文件</button>
</form>
<script>
function CheckFileExt(filename){
var flag=false;
//规定白名单上传后缀
var exts=['png','gif','jpg'];
//1.php 1.php.jpg 接受传递的后缀名
var index=filename.lastIndexOf(".");
var ext = filename.substr(index+1);
//进行后缀检测
for(i=0;i<exts.length;i++){
if(ext==exts[i]){
var flag=true;
alert('文件后缀正确！');
break;
}
}
if(!flag){
alert('文件后缀错误！')
location.reload(true);
}
}
</script>
</body>
</html>

复制代码

upload.php：后端处理上传

<?php
$name=$_FILES['f']['name'];
$type=$_FILES['f']['type'];
$size=$_FILES['f']['size'];
$tmp_name=$_FILES['f']['tmp_name'];
$error=$_FILES['f']['error'];
if(move_uploaded_file($tmp_name,'upload/'.$name)){
echo '<script>alert("上传成功!")</script>';
}

复制代码

<srcipt></script>里面包罗的是JS代码

<input type="file" id="file" name="f" onchange="CheckFileExt(this.value)">

复制代码

这一行代码是一个HTML中的JavaScript事件处理器，用于在文件选择框内容发生变革（用户选择文件）时触发相应的查抄函数。详细来说：

onchange: 这是一个HTML事件属性，表示在元素内容变革时触发。
CheckFileExt(this.value): 这是一个JavaScript函数调用，当文件选择框内容变革时，会调用名为 CheckFileExt 的函数，并将选择的文件路径（this.value 表示当前元素的值，即文件路径）作为参数转达给该函数。

这段 JavaScript 代码用于获取文件名中末了一个点（.）后面的部分，即文件的扩展名。

var index = filename.lastIndexOf(".")

复制代码

lastIndexOf("."): 这是 JavaScript 字符串对象的方法，用于返回字符串中末了一个出现的点的索引位置。

var ext = filename.substr(index+1);

复制代码

substr(index+1): 这是 JavaScript 字符串对象的方法，用于从字符串的指定位置（在这里是 index+1，即点的后一个位置）开始提取子字符串。这里的 ext 变量将包罗文件的扩展名。
这是一个 JavaScript 代码片段，用于重新加载当前页面。详细来说：

location.reload(true);

复制代码

location.reload(true): 这是 JavaScript 的 location 对象的 reload 方法。reload 方法用于重新加载当前文档。转达 true 参数表示强制从服务器重新加载页面，而不利用缓存。如果省略参数或转达 false，则大概利用缓存进行重新加载。
这行代码的作用是强制革新当前页面，确保获取最新的内容，而不利用浏览器缓存。

这里的JS代码是运行在前端，是可以被看到并修改的

禁用JS或删除过滤代码绕过

将页面源代码复制下来，在本地创建，并删除检验代码的函数调用οnchange="CheckFileExt(this.value)”
将调用的文件上传地点，切换为利用网址路由的样式http://192.168.137.1:84/js/upload.php
成功绕过文件检验，上传成功1.exe

php 写的是后端上传验证前端看不到处理逻辑代码，相对 js 比较安全
js 写的上传代码在前端可以被找到，从而可以被多种方法绕过

JS导入库开发-登录验证-JQuery库&Ajax技术

0 、布置前端页面
  1、获取登录事件
  2、配置Ajax请求
  3、后端代码验证
  4、成功回调判定
  后端PHP进行帐号判定，前端JS进行登录处理
  架构：html js login.html - logincheck.php
  $.ajax()是一个用于执行异步HTTP请求的jQuery函数。它答应您通过JavaScript代码向服务器发送请求，并在不革新整个页面的情况下接收和处理响应。
下面是一个根本的$.ajax()用法示例：

$.ajax({
url: "example.com/data", // 请求的URL
method: "GET", // HTTP请求方法（GET、POST等）
data: { // 发送到服务器的数据（可选）
param1: "value1",
param2: "value2"
},
success: function(response) { // 请求成功时的回调函数
console.log("请求成功！");
console.log(response); // 服务器响应的数据
},
error: function(xhr, status, error) { // 请求失败时的回调函数
console.log("请求失败！");
console.log(error); // 错误信息
}
});

复制代码

在这个示例中，我们通过url参数指定了服务器的URL，通过method参数指定了HTTP请求方法（这里是GET请求）。data参数是可选的，用于发送到服务器的数据。success回调函数在请求成功而且服务器返反响应时被调用，error回调函数在请求失败时被调用。
您可以根据必要在$.ajax()函数中利用其他参数，例如dataType指定服务器响应的数据类型，headers指定请求头，以及其他高级选项。
通过利用$.ajax()函数，您可以在JavaScript中方便地执行异步HTTP请求，并根据服务器的响应进行相应处理。
$("button").click(function () { ... })选择所有的 <button> 元素，并为它们绑定一个点击事件处理函数。当用户点击任何一个按钮时，绑定的函数将被执行。
我们利用console.log()在控制台输出一条消息，表示按钮已被点击。您还可以执行其他操纵，例如修改页面的内容、发送AJAX请求或执行其他JavaScript逻辑。

$("button").click(function () {
// 在这里编写点击事件的处理代码
console.log("按钮被点击了！");
// 可以在这里执行其他操作，例如修改页面内容或发送AJAX请求等
});

复制代码

$('.user').val()和$('.pass').val()用于获取具有user类和pass类的元素的值。
$('.user')：这里利用了jQuery的选择器$('.user')来选择所有具有user类的元素。这可以是一个输入框、文本框或其他表单元素。
.val()：这是一个jQuery函数，用于获取选定元素的值。在这个场景中，它被调用以获取具有user类的元素的值。
myuser：这是一个变量（或属性名），用于存储所选择元素的值。您可以根据必要更改变量名。

myuser: $('.user').val(),
mypass: $('.pass').val()

复制代码

$success 是一个关联数组变量，通过利用 ‘msg’ 作为键，将 ‘ok’ 作为值存储在其中。

$success = array('msg' => 'ok');

复制代码

JS实现登录功能：
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>登录</button>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$("button").click(function (){
$.ajax({
type: 'POST',
url: 'logincheck.php',
data: {
myuser:$('.user').val(),
mypass:$('.pass').val()
},
success: function (res){
console.log(res);
if(res['infoCode']==1){
alert('登录成功');
//登录成功处理事件
//location.href='index.php';
}else{
alert('登录失败');
}
},
dataType: 'json',
});
});
</script>
</body>
</html>

复制代码

logincheck.php

<?php
$user=$_POST['myuser'];
$pass=$_POST['mypass'];
//真实情况需要在数据库获取
$success=array('msg'=>'ok');
if($user=='xiaodi' && $pass=='123456'){
$success['infoCode']=1;
echo '<script>location.href="index.php";</script>';
}else{
$success['infoCode']=0;
}
echo json_encode($success);

复制代码

安全问题：当成功后的操纵如跳转到其他页面写在js中，不安全。将抓到的包，设置其返回包也抓取，并将访问失败返回包的改为1发送，后登录成功

当成功后的操纵如跳转到其他页面写在PHP中，相对安全
前端js只起到判定作用，无法执行跳转等逻辑
验证以及验证通过后的处理逻辑写到 php 中是相对 js 比较安全的。
如许纵然攻击者修改了返回包，修改精确的返回字段，仍旧无法跳转。
因为 js 中只进行了登录成功与否的提示，但是无后续处理逻辑，
以是纵然攻击者成功修改返回字段，也无法进行后续操纵


JS导入库开发-逻辑购买-JQuery库&Ajax技术

1 、布置前端页面
  2、获取登录事件
  3、配置Ajax请求
  4、后端代码验证
  5、成功回调判定
  架构：html js shop.html - shopcheck.php
  利用JS实现商品购买

shop.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品购买</title>
</head>
<body>
<img src="iphone.jpg" width="300" height="300" alt=""><br>
金钱：10000<br>
商品价格：8888<br>
数量：<input type="text" name="number" class="number">
<button>购买</button>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 当购买按钮被点击时执行以下函数
$("button").click(function (){
// 使用 AJAX 发送 POST 请求到 'shop.php'
**$.ajax({
type: 'POST',
url: 'shop.php',
// 发送的数据，包括购买数量
data: {
num: $('.number').val(),
},
// 请求成功时执行的函数
success: function (res){
// 在控制台输出返回的数据
console.log(res);
// 如果返回的信息代码为1，表示购买成功
if(res['infoCode'] == 1){
// 弹出成功提示
alert('购买成功');
// 购买成功的流程（你可以在这里添加额外的处理）
} else {
// 如果信息代码不为1，表示购买失败
// 弹出失败提示
alert('购买失败');
}
},
// 指定返回的数据类型为 JSON
dataType: 'json',
});
});
</script>

复制代码

shop.php

<?php// 从 POST 请求中获取购买数目$num = $_POST['num']; // 假设购物车中已有的金钱数为10000，商品代价为8888// 真真相况下，应该在数据库中获取用户的金钱数等信息 // 初始化一个关联数组变量，通过利用 'msg' 作为键，将 'ok' 作为值存储在其中。$success = array('msg' => 'ok');
**// 查抄购买是否正当（金钱是否充足支付）if (10000 >= ($num * 8888)) { // 如果购买正当，设置信息代码为1表示购买成功 $success['infoCode'] = 1;} else { // 如果购买不正当，设置信息代码为0表示购买失败 $success['infoCode'] = 0;} // 将效果以 JSON 格式输出echo json_encode($success);**?>

复制代码

如果购买量大于持有金额，就会提示失败