20232308 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

检查80端口是否被占用
输入命令netstat -tupln | grep 80
image
可以看到80端口并没有被占用,在输入命令后注意到没有任何反馈,我以为是输入指令有问题,通过相关研究发现没有任何反馈就说明没被占用
输入命令systemctl start apache2开启Apache
e204d373-83c8-4331-b491-a539ebd8e4ac
再输入命令systemctl status apache2确认服务状态
d95a8897-acfe-4969-bd95-d52b4e2db556
可以看到Apache可以正常运行
进入/var/www/html目录下,输入命令vi 20232308.html
输入以下代码

点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能页面</title>
    <style>
        /* 模块通用样式 */
        .function-module {
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 20px;
            margin: 20px;
            width: 320px;
        }
        /* 标题样式 */
        .function-module h3 {
            margin: 0 0 15px 0;
            font-size: 16px;
            font-weight: 600;
        }
        /* 标签样式 */
        .function-module label {
            display: block;
            margin: 10px 0 5px;
            font-size: 14px;
        }
        /* 输入框样式 */
        .function-module input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
        }
        /* 按钮样式 */
        .function-module button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            margin-top: 10px;
            cursor: pointer;
            font-size: 14px;
        }
        .function-module button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <!-- 用户登录模块 -->
    <div class="function-module">
        <h3>用户登录</h3>
        <label for="user-name">用户名:</label>
        <input type="text" id="user-name" name="username">
        
        <label for="user-pwd">密码:</label>
        <input type="password" id="user-pwd" name="password">
        
        <button>登录</button>
    </div>

    <!-- 搜索功能模块 -->
    <div class="function-module">
        <h3>搜索功能</h3>
        <label for="search-key">搜索关键词:</label>
        <input type="text" id="search-key" name="keyword">
        
        <button>搜索</button>
    </div>
</body>
</html>
网页的效果如图所示:

1440690f704a7a230f0476923b3731eb

2.2Web前端javascipt

(1)在2.1代码基础上,加入JavaScript代码用于验证用户名、密码,在用户点击登陆按钮后回显“欢迎+输入的用户名”,注意此处对代码进行了进一步细化,要求用户名和密码均非空且用户名要多于四位,密码多于六位
代码如下

点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
    <style>
        /* 整体页面样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #e3eaf6;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            gap: 20px; /* 两个表单间距 */
        }

        /* 表单容器样式 */
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
        }

        /* 表单标题样式 */
        .form-container h3 {
            margin: 0 0 20px 0;
            font-size: 18px;
            font-weight: bold;
        }

        /* 表单组通用样式 */
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        /* 标签样式 */
        .form-group label {
            display: inline-block;
            width: 80px;
            text-align: left;
            margin-right: 10px;
            color: #333;
        }

        /* 输入框样式 */
        .form-group input[type="text"],
        .form-group input[type="password"] {
            width: calc(100% - 90px); /* 适配标签宽度 */
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        /* 输入框聚焦样式 */
        .form-group input[type="text"]:focus,
        .form-group input[type="password"]:focus {
            border-color: #3498db;
        }

        /* 按钮样式 */
        .form-group button[type="submit"] {
            width: calc(100% - 90px); /* 与输入框宽度一致 */
            padding: 8px 0;
            background-color: #4CAF50; /* 绿色按钮 */
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .form-group button[type="submit"]:hover {
            background-color: #45a049; /* 按钮 hover 深色 */
        }

        /* 新增:错误提示样式 */
        .error-tip {
            color: #f44336;
            font-size: 12px;
            margin-top: 5px;
            margin-left: 90px; /* 与输入框对齐 */
            height: 16px; /* 固定高度避免布局跳动 */
        }

        /* 搜索按钮单独样式(适配行内显示) */
        #search-btn {
            width: auto;
            padding: 8px 15px;
            margin-left: 10px;
        }
    </style>
    <script>
        // 登录验证函数:替换弹窗为页面内提示
        function submit_login(event) {
            // 获取输入值和错误提示元素
            var username = document.getElementById('username').value.trim();
            var password = document.getElementById('password').value.trim();
            var usernameTip = document.getElementById('username-tip');
            var passwordTip = document.getElementById('password-tip');
            var usernameRegex = /^.{4,}$/;
            var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;

            // 重置错误提示
            usernameTip.textContent = '';
            passwordTip.textContent = '';
            var isValid = true;

            // 用户名验证
            if (!usernameRegex.test(username)) {
                usernameTip.textContent = '用户名必须在4个字符以上';
                isValid = false;
            }
            // 密码验证
            if (!passwordRegex.test(password)) {
                passwordTip.textContent = '密码必须是6个字符以上,包含至少一个字母和一个数字';
                isValid = false;
            }

            // 验证失败阻止提交
            if (!isValid) {
                event.preventDefault();
                return;
            }
            // 验证通过则表单自动提交到PHP文件
        };

        // 新增:搜索功能简单交互
        function doSearch(event) {
            event.preventDefault(); // 阻止默认提交
            var searchKey = document.getElementById('search').value.trim();
            if (searchKey) {
                alert('正在搜索关键词:' + searchKey + '\n可在此处对接后端搜索接口');
                // 实际项目中可替换为:window.location.href = 'search.php?key=' + encodeURIComponent(searchKey);
            }
        }
    </script>
</head>

<body>
    <!-- 用户登录表单容器 -->
    <div class="form-container">
        <h3>用户登录</h3>
        <!-- 核心修复:添加onsubmit绑定验证函数 -->
        <form action="20232308hzy.php" method="post" onsubmit="submit_login(event)">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required autocomplete="username">
                <!-- 新增:用户名错误提示 -->
                <div class="error-tip" id="username-tip"></div>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <!-- 新增:关闭密码自动填充,提升安全性 -->
                <input type="password" id="password" name="password" required autocomplete="new-password">
                <!-- 新增:密码错误提示 -->
                <div class="error-tip" id="password-tip"></div>
            </div>
            <div class="form-group">
                <button type="submit">登录</button>
            </div>
        </form>
    </div>

    <!-- 搜索功能表单容器 -->
    <div class="form-container">
        <h3>搜索功能</h3>
        <!-- 新增:绑定搜索交互函数 -->
        <form onsubmit="doSearch(event)" method="get">
            <div class="form-group">
                <label for="search">搜索关键词:</label>
                <input type="text" id="search" name="search" required style="width: calc(100% - 180px);">
                <!-- 优化:搜索按钮样式适配 -->
                <button type="submit" id="search-btn">搜索</button>
            </div>
        </form>
    </div>
</body>
</html>
结果如图所示

image
image
image

(2)注入攻击
输入用户名

hzy

和任意符合要求的密码
image
image
可以看到注入成功,但是字体较大显得很奇怪,想了一下如果换成h2或者h3的话应该会自然一点
输入用户名,输入任意符合要求的密码,来实现JavaScript注入
image
image

2. Web后端

使用命令systemctl start mysql启动mysql服务。
使用命令systemctl status mysql确认mysql服务已开启。
image
输入以下命令来完成建库,建表,插入数据等操作

点击查看代码
mysql
-- 创建数据库
CREATE DATABASE 20232308hzy;
-- 使用数据库
USE 20232308hzy;
-- 创建用户
CREATE USER 'user20232308' IDENTIFIED BY 'hzy123';
-- 授予用户权限
GRANT ALL PRIVILEGES ON 20232308hzy.* TO 'user20232308';
FLUSH PRIVILEGES;
-- 创建表
CREATE TABLE testtable (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    pwd VARCHAR(255) NOT NULL
);
-- 插入数据
INSERT INTO testtable (name, pwd) VALUES ('20232308', 'hzy123');
-- 查看表中所有内容
SELECT * FROM testtable;

image

2.4 Web后端

PHP 的全称是PHP: Hypertext Preprocessor(超文本预处理器),是一种开源的服务器端脚本语言,专门为Web开发设计,具有简单易用、开源免费的特性,可以直接嵌入HTML文档中,无需单独分离文件,开发动态页面时更便捷
输入命令apt-get install php下载php
image
在html文件目录下新建一个名为20232308hzy.php的文件,输入代码如下

点击查看代码
<?php
$host = 'localhost';
$dbname = '20232308hzy';
$user = 'user20232308';
$password = 'hzy123';
 
//创建数据库连接
$conn = new mysqli($host, $user, $password, $dbname);
 
//检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
 
//获取POST数据
$username = $_POST['username'];
$password = $_POST['password'];
 
//使用查询语句进行查询
$sql = "SELECT * FROM onetable WHERE name='$username' AND pwd='$password'";  
$result = $conn->query($sql);
 
//检查是否有匹配的记录
if ($result->num_rows > 0) {
    echo "欢迎登录成功: " . $username . "!";
} else {
    echo "用户名或密码错误";
}
 
//关闭结果集和预处理语句
$result->close();
$stmt->close();
 
//关闭数据库连接
$conn->close();
?>
 
 

接着对原来的html代码进行修改,将action改为执行该php文件
image
正确输入账号密码
image
错误输入账号或者密码
image

2.5 SQL注入与XSS注入

SQL注入: 一种针对数据库的攻击手段,攻击者利用代码里 “直接拼接用户输入到 SQL 语句” 的漏洞,把恶意SQL代码混进输入内容里,让数据库执行原本不该执行的操作
在本实验中输入任意符合要求的字符串,密码中输入' OR '1'='1,即可成功登录,实现了SQL注入
image

image

XSS注入:一种Web安全漏洞,攻击者通过向网页注入恶意脚本,当其他用户访问该页面时,脚本在用户浏览器中执行,从而实现窃取Cookie、劫持会话、钓鱼攻击等恶意操作
用户名中输入< script>alert("xss atack succeed.");< /script>,密码中输入' OR '1'='1,网页弹出窗口,实现了XSS攻击
image
image
image

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

(1)下载DAWA平台
输入以下命令来下载并启动DAWA平台
sudo apt install dvwa
dvwa-start
image
image
初始用户名和密码分别为admin和password
image
此处需要注意,需要先将DAWA Security中的level改为low而不是impossible,否则可能会出现做不出来的情况
image
(2)SQL注入
先尝试输入1,观察结果,如图所示
image
输入1时,后台会执行SQL语句SELECT first_name, last_name FROM users WHERE user_id = '1',所以返回了 “admin” 的信息。
但如果输入恶意内容(比如1' OR '1'='1),就能让 SQL 语句变成SELECT first_name, last_name FROM users WHERE user_id = '1' OR '1'='1'(逻辑恒真),从而获取数据库里的所有用户数据
image
输入1 and 1=2,我们会发现和只输入1的结果是一样的
image
输入1',发现白屏了,最初以为是网页崩了,后来通过与同学们的交流发现出现白屏是正常的,说明其为字符型注入
image
输入1' order by n #(n递增直到报错),通过实践我发现直接从2开始,没有报错,但是当n=3的时候报错了,这说明只有两个字段
使用命令来查询数据库中所有表的名称
-1' union select database(),group_concat(table_name) from information_schema.tables where table_schema='dvwa' #
image
使用命令在users表中获取所有字段名称
-1' union select database(),group_concat(column_name) from information_schema.columns where table_schema='dvwa' and table_name='users' #
image
使用命令来获取用户名和密码了
-1' union select group_concat(user_id,first_name),group_concat(user,password) from users #
image
对其进行解密后发现其admin的密码就是password
(3)XSS注入

  • DOM
    通过观察界面发现当选择不同的标签时,URL栏中的default也会发生变化
    image
    image
    尝试直接对default的值直接修改,修改为
    image
    image
  • Reflected
    观察之后发现了一个Name字段,也是直接在URL里显现了,有点类似于DOM中的default,尝试通过相同的方式进行修改,发现也可以实现
    image
    image
    此处需要注意的是最后还有一个#键不要忽略,要不然就会出现不成功的情况
  • Stored
    可以发现输入的内容被进行了存储
    image
    如法炮制还是两个都输入,发现Name有长度限制
    image
    通过打开前端代码我们发现是由于maxlength="10"的限制,修改其限制后发现该问题可以被解决
    image
    image
    返回之后输入,发现成功了
    image
    (4)CSRF
    CSRF:跨站请求伪造攻击,指攻击者利用用户已认证的身份,通过诱导用户点击恶意链接、访问包含恶意代码的页面等方式,在用户不知情的情况下向目标网站发送非本意的请求,从而执行转账、修改密码、提交表单等敏感操作,其核心是利用浏览器自动携带用户认证凭证(如 Cookie)的特性,让目标网站误将攻击者的请求当作用户本人的合法操作。
    通过观察界面我们可以发现应该是让我们去更改密码,输入新的密码20232308后选择change,发现网页上的url发生了改变,password_new和password_conf为了新密码
    image
    通过直接修改URL,修改密码为hzy123
    image
    image
    最后成功的解决了问题

3.问题及解决方案

  • 问题1:在通过html网页执行php文件时,发生如下报错
    image

  • 问题1解决方案:通过询问同学以及查阅相关资料我知道出现这个问题的核心原因是:PHP是服务器端脚本语言,必须通过Web服务器解析执行,不能直接通过 “双击 HTML 文件” 或file://协议打开(浏览器只会把 PHP 当普通文本文件处理,不会执行代码)。当前的文件虽然放在了/var/www/html,但是直接双击 HTML 文件打开用的是file://协议,而不是通过http://localhost/xxx的方式访问;

  • 问题2:在进行SQL注入时,输入' OR '1'='1却报错
    image

  • 问题2解决方案:通过查看前端代码发现,密码的验证中存在一条为var passwordRegex = /^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{6,}$/;的正则变大时,输入的' OR '1'='1里,包含了单引号、空格、等号这些特殊字符(不属于 “字母 / 数字” 范围),完全不符合这个正则规则。所以前端验证直接判定 “密码格式错误”,弹出了提示,表单根本没提交到后端 PHP 脚本—— 自然没法触发 SQL 注入。

4.学习感悟、思考等

通过本次实验我收获颇丰,更加深了我对与Web安全相关的内容的了解,明晰前端与后端场景下的SQL注入与XSS注入,WebGoat平台上基础的SQL注入、XSS攻击和CSRF攻击方法的实践
本次实验尽管难度不大但是还有遇到了很多问题,从SQL注入时的失败,不断通过自查代码来进行修改,以及到后来的靶场练习,有很多地方一知半解或者是对其要求的做法不是特别清楚,通过查阅有关资料以及询问同学们的帮助,最终还是顺利的解决了问题
总而言之,本学期的八次网络攻防实验是我对于网络攻防这门技术有了更深刻的感悟,网络攻防不再是课本上空洞的文字而是实实在在的过程,尽管这一路上遇到了很多的苦难,但是最后也是成功的度过了艰难时刻,感谢同学们和老师的帮助,我一定会继续努力提高自己的网络攻防能力,提高专业素质

参考资料

posted @ 2025-12-01 09:38  Otlier  阅读(0)  评论(0)    收藏  举报