20232309 2025-2026-1 《网络与系统攻防技术》实验八实验报告

1.实验内容

(1)Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML。
(2)Web前端javascipt
理解JavaScript的基本功能，理解DOM。
在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击：利用回显用户名注入HTML及JavaScript。
(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
(4)Web后端：编写PHP网页，连接数据库，进行用户认证
(5)最简单的SQL注入，XSS攻击测试
(6)安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击。

2.实验过程

2.1Web前端HTML

2.1.1正常安装、启停Apache

1.kali自带了Apache，无需安装即可使用。
netstat -tupln | grep 80检测80端口是否被占用，systemctl start apache2 启动Apache，再次netstat -tupln | grep 80对比可以看到Apache已经启用并使用了80端口

image

2.systemctl stop apache2关闭Apache

image

2.1.2理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML

1.HTML，表单，GET与POST方法简介如下

HTML是一种用于创建网页结构和内容的标记语言，它通过一系列标签来定义文本、图像、链接等元素的组织和展示方式。
表单是HTML中用于收集用户输入的重要组件，它提供文本框、复选框、下拉菜单等交互元素，使得用户能够向服务器提交数据以供处理。
GET与POST方法是表单提交数据的两种HTTP请求方式：GET方法将表单数据附加在URL末尾发送，适合获取非敏感信息且数据量较小的场景；而POST方法将数据封装在HTTP请求体中传输，更适合提交大量数据或敏感信息，如用户登录凭证和文件上传等操作。

2.cd /var/www/html进入文件夹，vim创建并编辑html文件，内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GET和POST最小实现</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            line-height: 1.6;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
        }
        
        /* 表单容器样式 */
        .form-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 30px;
            width: 100%;
            max-width: 500px;
            border-top: 4px solid;
        }
        
        .get-form {
            border-top-color: #3498db;
        }
        
        .post-form {
            border-top-color: #9b59b6;
        }
        
        /* 表单元素样式 */
        form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        input {
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus {
            border-color: #3498db;
            outline: none;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }
        
        .get-button {
            background-color: #3498db;
        }
        
        .get-button:hover {
            background-color: #2980b9;
        }
        
        .post-button {
            background-color: #9b59b6;
        }
        
        .post-button:hover {
            background-color: #8e44ad;
        }
        
        /* 方法标签样式 */
        .method-label {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .get-label {
            background-color: #e8f4fc;
            color: #2980b9;
        }
        
        .post-label {
            background-color: #f9e8fc;
            color: #9b59b6;
        }
        
        /* 响应式调整 */
        @media (max-width: 600px) {
            .form-container {
                padding: 20px;
                margin-bottom: 20px;
            }
            
            h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <h1>GET和POST方法测试</h1>
    
    <div class="form-container get-form">
        <div class="method-label get-label">GET方法</div>
        <form method="GET" action="/process">
            <div>
                <label for="searchQuery">搜索内容：</label>
                <input type="text" id="searchQuery" name="query" placeholder="请输入搜索内容">
            </div>
            <button type="submit" class="get-button">提交查询 (GET方法)</button>
        </form>
    </div>
    
    <div class="form-container post-form">
        <div class="method-label post-label">POST方法</div>
        <form method="POST" action="/process">
            <div>
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
            </div>
            <div>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" placeholder="example@domain.com">
            </div>
            <button type="submit" class="post-button">提交表单 (POST方法)</button>
        </form>
    </div>
    
    <div style="text-align: center; color: #7f8c8d; margin-top: 20px; max-width: 500px;">
        <p>GET方法将数据附加在URL中，适合搜索查询等场景</p>
        <p>POST方法将数据放在请求体中，适合提交敏感信息</p>
    </div>
</body>
</html>

image

image

systemctl start apache2启动Apache服务，在kali浏览器中输入http://localhost/20232309_1.html即可打开，界面如下

image

测试可知GET方法会将输入的数据附加在url中，而POST方法则不会

2.2Web前端javascipt

2.2.1理解JavaScript的基本功能，理解DOM

1.JavaScript,DOM简介如下

JavaScript是一种广泛应用于网页开发的脚本语言，它能在浏览器中直接运行，为静态的HTML页面添加动态交互功能，如响应用户操作、处理表单验证和实时更新内容等。
DOM（文档对象模型）则是浏览器将HTML文档结构化为一个树状的对象模型，它允许JavaScript通过一套标准化的接口来访问和操作文档中的各个元素，从而实现动态修改页面内容、结构和样式的能力，使网页能够根据用户行为实时变化

2.2.2在2.1的基础上，编写JavaScript验证用户名、密码的规则，在用户点击登陆按钮后回显“欢迎+输入的用户名”

1.在2.1的html代码中添加下列script代码（使用正则表达式验证用户名、密码规则）

 <script>
        // 等待DOM完全加载后再执行JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            // 处理登录表单提交
            document.getElementById('loginForm').addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交
                
                // 获取输入框的值
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 验证用户名只支持ASCII字符（包括字母、数字、常用符号）
                if (!/^[\x00-\x7F]+$/.test(username)) {
                    alert('用户名只能包含ASCII字符（英文、数字、常用符号）');
                    return;
                }
                
                // 验证密码不能只有数字或只有字母
                if (/^\d+$/.test(password) || /^[a-zA-Z]+$/.test(password)) {
                    alert('密码不能只有数字或只有字母，必须混合使用');
                    return;
                }
                
                // 验证通过，显示欢迎消息
                document.getElementById('welcomeMessage').textContent = '欢迎，' + username + '！';
                document.getElementById('welcomeMessage').style.display = 'block';
            });
        });
    </script>

除此之外还需进行更改前面的html某些元素的id（原邮箱输入框改为密码输入框）、在style标签中添加新的样式等微调

2.验证用户名和密码规则

尝试输入中文用户名报错

image

尝试纯数字或者纯字母密码报错

image

3.输入正确的用户名和密码之后回显用户名信息

image

2.2.3尝试注入攻击：利用回显用户名注入HTML及JavaScript

1.由于之前的JavaScript脚本使用的是.textContent而不是.innerHTML设置，会使得用户名的输入内容只被当作纯文本，html或者js注入无效，因此需要修改JavaScript脚本部分
为了验证此项注入攻击，先复制一份代码

image

将文件中的.textContent设置改为.innerHTML设置，保存退出

image

2.注入html：在用户名输入框输入h1标签并闭合，可以看到用户名回显时解析了<h1>标签

屏幕截图 2025-12-05 225123

3.注入JavaScript：在用户名输入框输入<img src="x" onerror="alert('Attack successfully!')">，利用IMG标签的onerror触发Javascript代码（其实已经算xss载荷了？）

由于HTML5规范，在用户名输入框中以<script>alert('website attack!')</script>这种类型的方式动态插入的script元素不会被执行，因此更换了注入内容

image

2.3Web后端MySQL

2.3.1正常安装、启动MySQL

1.kali本身自带了mysql mysql --version检查版本，systemctl start mysql启动mysql，systemctl status mysql查看mysql状态

image

2.3.2建库、创建用户、修改密码、建表

1.按照如下语句输入命令建库、创建用户、修改密码、建表（数据库命令不要忘记最后的 ;）

-- 创建数据库
CREATE DATABASE your_database_name;

-- 选择要使用的数据库
USE your_database_name;

-- 创建新用户（localhost表示本地连接）
CREATE USER 'username'@'localhost' IDENTIFIED BY 'password';

-- 授予用户对特定数据库的所有权限
GRANT ALL PRIVILEGES ON your_database_name.* TO 'username'@'localhost';

-- 刷新权限使更改生效
FLUSH PRIVILEGES;

-- 创建表示例
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

SHOW DATABASES;查看数据库

image

SHOW GRANTS FOR 'username'@'localhost';查看用户及授权

image

SHOW TABLES;查看所有表，SHOW COLUMNS FROM users;查看刚刚建立的users表

image

2.4Web后端PHP

2.4.1编写PHP网页，连接数据库，进行用户认证

1.在之前几步的html文件存放的文件夹下新建php文件，输入以下内容

<?php
// 数据库配置
$host = 'localhost';
$dbname = '20232309exp8';
$user = 'hmw';
$pass = '20232309exp8';

// 连接数据库
$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

// 获取用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];

// 最简单的SQL查询（有注入漏洞）
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";

// 执行查询
$result = $conn->query($sql);
$user = $result->fetch();

// 显示结果
if ($user) {
    echo "登录成功！欢迎 " . $user['username'];
} else {
    echo "登录失败！用户名或密码错误";
}
?>

2.javascript的内容也要进行改动，由于之前的设置中阻止了表单默认提交，此处需要更改之前js验证输入是否符合规则后面的内容如下，用fetch来处理和php交互的内容

875b424f-6fca-4a13-a3fb-4ca6ee5b1f80

并在html代码中添加<div id="result"></div>容器接收php内容并输出

3.在数据库中执行插入操作添加测试用户数据
INSERT INTO users (username, password) VALUES ('admin', '123456'), ('testuser', 'password123'),('hmw','20232309test');

image

4.在浏览器打开html，在POST界面输入用户名和密码（测试数据）进行验证

image

可以看到用户密码输入正确结果

image

输入错误则会显示错误信息

image

2.5最简单的SQL注入，XSS攻击测试

1.简单起见换了一个极简版的页面，可以看到在密码输入框中输入攻击内容时可以绕过验证直接登录
image

2.由于本人实在无能连AI都不能调教以至于一直写不出来能被攻击成功的脚本（服了.....）为了生命健康不被自己的愚蠢气到脑溢血我还是决定放过自己就这样吧哈哈

image

2.6安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击

2.6.1安装DVWA

1.按照教程下载DVWA安装包解压到/var/www/html目录，修改相应配置文件和数据库，浏览器输入127.0.0.1/dvwa（取决于dvwa文件夹名称）登录

image

初次登录需要点击首页的Create/Reset Database按钮自动创建数据库，然后再次登录
2.先在DVWA Security中调整难度为Low

image

2.6.2 SQL攻击

1.先输入1测试，发现正常显示数据，输入几个不同的数字验证，实测可以从1输到5，说明数据库表中有5行数据

屏幕截图 2025-12-07 153647

2.判断注入类型，输入1'，数据库语法报错如下
image

可以看到右侧多了一个'，说明数据库语句中本身就有''的闭合，即是字符型注入

3.测试输入1' OR '1'='1的恒真式同时确保''闭合正确

image

可以看到我们收获满满，结果展示了表中所有信息

4.根据这个原理，也可以构造其他查询语句查询数据库信息

1' union select 1,database()#查询数据库名称

image

1' union select user,password from users#查询用户密码

image

结果更是劲爆，五个用户的密码全都被展示了出来，通过在线解密工具可以复原

image

2.6.3 XSS攻击

DOM型XSS

1.这个模块是让我们选择语言，打开网页源代码查看到核心的script脚本中大意是将default后的值会被传给option的value结点，我们应该可以对这个进行一些操作

image

2.在页面中先进行选择提交，然后把default后的值改成<script>alert(document.cookie)</script>，浏览器解析后就会弹出我们的cookie

80d49042-0150-407b-96a1-c8cd58fbcdc6

反射型XSS

1.先随便输入一个name提交

image

可以看到url中的参数中出现了name=1的内容，也就是说可以通过改变name的值进行攻击

2.把url中name的值改为<script>alert('你被攻击了！')</script>，再次执行就可以看到浏览器解析了script标签中的脚本

image

存储型XSS

1.发布内容，可以看到内容被永久储存到页面当中（即被存储到数据库中）

image

2.我们在message部分注入恶意脚本<script>alert('attack!')</script>，之后每次进入这个页面都会弹出这个警告信息，因为脚本已经被存储到了数据库中

image

2.6.4 CSRF攻击

1.在CSRF模块中可以看到修改密码界面，随便修改一个新密码后点击Change可以看到显示密码修改成功的提示，url也显示了刚刚输入的内容，说明是直接GET方式提交

image

2.复制这个url，新开一个浏览器页面，粘贴url，修改密码设置和确认部分，可以看到也能显示出密码修改成功界面

image

3.问题及解决方案

  • 问题1：2.1中初次在浏览器中打开html文件显示乱码

image

  • 问题1解决方案：检查html文件后发现是没有指定编码方式，在中添加 即可

55643fb8-08ae-4e5e-96ed-6277a15755af

image

  • 问题2：2.6中尝试寻找注入点时php返回的错误信息无法显示，跳转界面空白
  • 问题2解决方案：
    sudo nano /etc/php/8.1/apache2/php.ini打开php配置文件（其中8.1为版本号，需要根据php -v的结果更改）Ctrl+W搜索display_errors =（注意等号前有空格，后面没有分号），找到类似 display_errors = Off的行（不是以分号;开头的那行），将Off改为On，Ctrl+O保存，Ctrl+X退出
    image
    systemctl restart apache2重启Apache服务，重新打开dvwa执行注入测试，可以看到php错误信息正常显示
    image

4.学习感悟、思考等

本次实践的内容十分丰富，在践行新的攻击方式的同时也复习了上学期的web和数据库相关内容，并为自己本就不多的知识的遗忘速度之快而伤感。由于对于web的掌握不甚牢固，导致在web攻击的很多时候我都没有彻底理解通信过程中发生了什么和攻击原理，还需多加历练和学习。同时由于对php和js前后端交互过程不太熟悉，导致在2.4中一度卡了很久，，，但同时也帮助我学习到了控制台查看和调试的办法，希望以后运用能更加熟练吧。

参考资料

posted @ 2025-12-05 15:57  总是学不会T_T  阅读(33)  评论(0)    收藏  举报