028-安全开发-JS应用&原生开发&JQuery库&Ajax技术&前端后端&安全验证处理#

目录#

JS原生开发-文件上传-变量&对象&函数&事件
JS导入库开发-登录验证-JQuery库&Ajax技术
JS导入库开发-逻辑购买-JQuery库&Ajax技术
实例测试-某违规APP-密码找回&JS验证逻辑安全

参考

原生JS教程 https://www.w3school.com.cn/js/index.asp
jQuery库教程 https://www.w3school.com.cn/jquery/index.asp

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

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

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

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

这段 JavaScript 代码用于获取文件名中最后一个点（.）后面的部分，即文件的扩展名。具体来说：

1
var index = filename.lastIndexOf(".")

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

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

substr(index+1): 这是 JavaScript 字符串对象的方法，用于从字符串的指定位置（在这里是 index+1，即点的后一个位置）开始提取子字符串。这里的 ext 变量将包含文件的扩展名。

这是一个 JavaScript 代码片段，用于重新加载当前页面。具体来说：

1
location.reload(true);

location.reload(true): 这是 JavaScript 的 location 对象的 reload 方法。reload 方法用于重新加载当前文档。传递 true 参数表示强制从服务器重新加载页面，而不使用缓存。如果省略参数或传递 false，则可能使用缓存进行重新加载。

这行代码的作用是强制刷新当前页面，确保获取最新的内容，而不使用浏览器缓存。

使用js实现文件上传

1
<!-- 表单用于文件上传，指定了上传的目标地址为 "upload.php"，使用 POST 方法提交，并设置 enctype 为 "multipart/form-data" -->
2
<form action="upload.php" method="POST" enctype="multipart/form-data">
3
    <!-- 为文件上传输入框添加标签 -->
4
    <label for="file">选择文件:</label>
5
    <br>
6
    <!-- 这是一个包含文件上传输入框的 HTML 代码，并且在用户选择文件时触发 CheckFileExt 函数 -->
7
    <input type="file" id="file" name="f" onchange="CheckFileExt(this.value)">
8
    <br>
9
    <!-- 提交按钮 -->
10
    <button type="submit">上传文件</button>
11
</form>

1、布置前端页面，创建js目录，帮在js目录下创建upload.html
2、JS获取提交数据
3、JS对上传格式判断
4、后端对上传数据处理，创建upload文件目录保存上传文件，创建upload.php处理数据。

前端JS进行后缀过滤，后端PHP进行上传处理
架构：html js php - upload.php

1
<script>
2
    // JavaScript 函数 CheckFileExt 用于检查文件后缀名
3
    function CheckFileExt(filename){
4
        var flag = false;
5
        // 允许的文件后缀名数组
6
        var exts = ['png', 'gif', 'jpg'];
7
        // 获取文件名中最后一个点后面的部分，即文件的后缀名
8
        var index = filename.lastIndexOf('.');
9
        var ext = filename.substr(index + 1);
10

11
        // 遍历允许的文件后缀名数组
12
        for (var i = 0; i < exts.length; i++) {
13
            // 检查是否匹配允许的后缀名
14
            if (ext === exts[i]) {
15
                // 文件后缀名正确，设置 flag 为 true，显示提示信息，并跳出循环
16
                flag = true;
17
                alert('文件后缀名正确');
18
                break;
19
            }
20
        }
21

22
        // 如果 flag 为 false，表示文件后缀名错误，显示错误提示，并强制刷新页面
23
        if (!flag) {
24
            alert('文件后缀错误！')
25
            location.reload(true);
26
        }
27
    }
28
</script>

前端验证演示：

后端upload.php 上传处理（再建一个upload文件夹存储上传文件）

上传演示

安全问题：#

1、过滤代码能看到，可分析绕过#

2、禁用JS或删除过滤代码绕过
将页面源代码复制下来，在本地创建，并删除检验代码的函数调用onchange="CheckFileExt(this.value)"
将调用的文件上传地址，切换为使用网址路由的样式http://localhost/demo_01/js/upload.php
成功绕过文件检验，上传成功blog5.md

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

**$.ajax()**是一个用于执行异步HTTP请求的jQuery函数。它允许您通过JavaScript代码向服务器发送请求，并在不刷新整个页面的情况下接收和处理响应。

下面是一个基本的$.ajax()用法示例：

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

在这个示例中，我们通过url参数指定了服务器的URL，通过method参数指定了HTTP请求方法（这里是GET请求）。data参数是可选的，用于发送到服务器的数据。success回调函数在请求成功并且服务器返回响应时被调用，error回调函数在请求失败时被调用。

您可以根据需要在$.ajax()函数中使用其他参数，例如dataType指定服务器响应的数据类型，headers指定请求头，以及其他高级选项。

通过使用$.ajax()函数，您可以在JavaScript中方便地执行异步HTTP请求，并根据服务器的响应进行相应处理。

**$(“button”).click(function () { … })**选择所有的

$('.user').val()和$ (‘.pass’).val()用于获取具有user类和pass类的元素的值。

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

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

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

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

使用js实现登录验证

1
<div class="login">
2
    <!-- 登录标题 -->
3
    <h2>后台登录</h2>
4
    <!-- 用户名标签和输入框 -->
5
    <label for="username">用户名:</label>
6
    <input type="text" name="username" id="username" class="user">
7
    <!-- 密码标签和输入框 -->
8
    <label for="password">密码:</label>
9
    <input type="password" name="password" id="password" class="pass">
10
    <!-- 登录按钮 -->
11
    <button>登录</button>
12
</div>
13

14
<!-- 引入 jQuery 库 -->
15
<script src="js/jquery-1.12.4.js"></script>**
16

17
<!-- JavaScript 代码 -->
18
<script>
19
    // 当按钮被点击时执行以下函数
20
    $("button").click(function (){
21
        // 使用 AJAX 发送 POST 请求到 'logincheck.php'
22
        $.ajax({
23
            type: 'POST',
24
            url: 'logincheck.php',
25
            // 发送的数据包括用户名和密码
26
            data: {
27
                myuser: $('.user').val(),
28
                mypass: $('.pass').val()
29
            },
30
            // 请求成功时执行的函数
31
            success: function (res){
32
                console.log(res);
33
                // 如果返回的信息代码为1，表示登录成功，弹出提示并执行相应的处理
34
                if(res['infoCode'] == 1){
35
                    alert('登录成功');
36
                    // 登录成功处理事件（注释部分为示例，可根据需要进行处理）
37
                    // location.href='index.php';
38
                } else {
39
                    // 如果信息代码不为1，表示登录失败，弹出失败提示
40
                    alert('登录失败');
41
                }
42
            },**
43
            // 指定返回的数据类型为 JSON
44
            dataType: 'json',
45
        });
46
    });
47
</script>

0、布置前端页面在js目录下创建login.html,并引入JQuery库在js目录下创建js目录引入。
1、获取登录事件
2、配置Ajax请求
3、后端代码验证
4、成功回调判断

1
<?php
2
// 从 POST 请求中获取用户提交的用户名和密码
3
$user = $_POST['myuser'];
4
$pass = $_POST['mypass'];
5

6
// 真实情况下，应该在数据库中进行验证获取用户信息
7

8
// 假设用户名是 'xiaodi'，密码是 '123456'
9
//$success 是一个关联数组变量，通过使用 'msg' 作为键，将 'ok' 作为值存储在其中。
10
$success = array('msg' => 'ok');
11

12
// 检查用户名和密码是否匹配
13
if ($user == 'xiaodi' && $pass == '123456') {
14
    // 如果匹配，设置信息代码为1表示登录成功，并进行相应的处理
15
    $success['infoCode'] = 1;
16
} else {
17
    // 如果不匹配，设置信息代码为0表示登录失败
18
    $success['infoCode'] = 0;
19
}
20

21
// 将结果以 JSON 格式输出
22
//必须要回调输出，不然前端无法获取infocode的值
23
echo json_encode($success);
24

25
?>

后端PHP进行帐号判断，前端JS进行登录处理
架构：html js login.html - logincheck.php

安全问题：#

当成功后的操作（如跳转到其他页面）写在js中，不安全#

将抓到的包，设置其返回包也抓取，并将访问失败返回包的改为1发送，后登录成功

当成功后的操作如跳转到其他页面写在PHP中，相对安全

前端js只起到判断作用，无法执行跳转等逻辑

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

使用js实现商品购买：#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <!-- 设置文档的字符集为UTF-8 -->
5
    <meta charset="UTF-8">
6
    <!-- 设置页面标题 -->
7
    <title>商品购买</title>
8
</head>
9
<body>
10
<!-- 商品图片 -->
11
<img src="iphone.jpg" width="300" height="300" alt=""><br>
12
<!-- 当前拥有的金钱 -->
13
金钱：10000<br>
14
<!-- 商品价格 -->
15
商品价格：8888<br>
16
<!-- 输入购买数量的文本框 -->
17
数量：<input type="text" name="number" class="number">
18
<!-- 购买按钮 -->
19
<button>购买</button>
20
</body>
21
</html>
22

23
<!-- 引入 jQuery 库 -->
24
<script src="js/jquery-1.12.4.js"></script>
25
<!-- JavaScript 代码 -->
26
<script>
27
    // 当购买按钮被点击时执行以下函数
28
    $("button").click(function (){
29
        // 使用 AJAX 发送 POST 请求到 'shop.php'
30
        $.ajax({
31
            type: 'POST',
32
            url: 'shop.php',
33
            // 发送的数据，包括购买数量
34
            data: {
35
                num: $('.number').val(),
36
            },
37
            // 请求成功时执行的函数
38
            success: function (res){
39
                // 在控制台输出返回的数据
40
                console.log(res);
41
                // 如果返回的信息代码为1，表示购买成功
42
                if(res['infoCode'] == 1){
43
                    // 弹出成功提示
44
                    alert('购买成功');
45
                    // 购买成功的流程（你可以在这里添加额外的处理）
46
                } else {
47
                    // 如果信息代码不为1，表示购买失败
48
                    // 弹出失败提示
49
                    alert('购买失败');
50
                }
51
            },
52
            // 指定返回的数据类型为 JSON
53
            dataType: 'json',
54
        });
55
    });
56
</script>

1、布置前端页面，在js目录下创建shop.html
2、获取登录事件
3、配置Ajax请求
4、后端代码验证 ,在js目录下创建shopcheck.php
5、成功回调判断

架构：html js shop.html - shopcheck.php

1
<?php
2
// 从 POST 请求中获取购买数量
3
$num = $_POST['num'];
4

5
// 假设购物车中已有的金钱数为10000，商品价格为8888
6
// 真实情况下，应该在数据库中获取用户的金钱数等信息
7

8
// 初始化一个关联数组变量，通过使用 'msg' 作为键，将 'ok' 作为值存储在其中。
9
$success = array('msg' => 'ok');
10

11
// 检查购买是否合法（金钱是否足够支付）
12
if (10000 >= ($num * 8888)) {
13
    // 如果购买合法，设置信息代码为1表示购买成功
14
    $success['infoCode'] = 1;
15
} else {
16
    // 如果购买不合法，设置信息代码为0表示购买失败
17
    $success['infoCode'] = 0;
18
}
19

20
// 将结果以 JSON 格式输出
21
echo json_encode($success);
22
?>