20232407 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.实验过程

一.Web前端HTML

kali虚拟机上已安装Apache。先使用命令netstat -tupln | grep 80检查端口是否被占用，再用systemctl start apache2开启Apache，用systemctl status apache2.service确认服务状态。从结果中可以看出Apache正常启动。

image

进入kali的/var/www/html目录下，用vi 20232407lyh.html命令创建html文件

image

image

输入以下内容

<!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: Arial, sans-serif;
            background-color: #f0f0f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }
        .container img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
        }
        .container h2 {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group input[type="email"],
        .form-group button[type="submit"] {
            width: 100%;
            padding-top: 10px;
            padding-bottom:10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group button[type="submit"] {
            margin-top:5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .form-group button[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="1.jpg" alt="Profile Picture">
        <h2>注册表单</h2>
        <form action="/submit-form" method="post">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">注册</button>
            </div>
        </form>
        <p>或者通过GET方法获取数据:</p>
        <form action="/get-data" method="get">
            <div class="form-group">
                <label for="search">搜索</label>
                <input type="text" id="search" name="search" required>
                <button type="submit">搜索</button>
            </div>
        </form>
    </div>
</body>
</html>

该HTML文件的效果如下

image

二.Web前端javascipt

在2.1的基础上，删除表单的action和method属性，把注册表单改成登录表单，在登录按钮上加入onclick="submit_login()"的属性，并添加一些script代码。这一段代码会在用户登录时，验证用户名、密码的规则，并在用户成功登录后回显"欢迎+输入的用户名"。

<!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: Arial, sans-serif;
            background-color: #f0f0f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }
        .container img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
        }
        .container h2 {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group button {
            width: 100%;
            padding-top: 10px;
            padding-bottom:10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group button {
            margin-top:5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .form-group button:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        function submit_login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var usernameRegex = /^.{4,}$/;
            var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
            if (!usernameRegex.test(username)) {
                alert('用户名必须在4个字符以上');
                return;
            }
            if (!passwordRegex.test(password)) {
                alert('密码必须是6个字符以上，包含至少一个字母和一个数字');
                return;
            }
            document.write('欢迎 ' + username);
        };
    </script>
</head>
<body>
    <div class="container">
        <img src="1.jpg" alt="Profile Picture">
        <h2>登录表单</h2>
        <!-- 移除了action和method属性，改为登录表单 -->
        <form>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <!-- 移除了邮箱输入框（登录表单通常不需要） -->
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <!-- 登录按钮添加了onclick事件 -->
                <button type="button" onclick="submit_login()">登录</button>
            </div>
        </form>
        <p>或者通过GET方法获取数据:</p>
        <form action="/get-data" method="get">
            <div class="form-group">
                <label for="search">搜索</label>
                <input type="text" id="search" name="search" required>
                <button type="submit">搜索</button>
            </div>
        </form>
    </div>
</body>
</html>

最终实现的效果如下。成功对数据进行校验，并能够返回登录结果

image

image

对于实现的页面，进行注入攻击：在用户名一栏填入<h1>HTML injection succeed.</h1>，成功实现HTML注入。

image

image

在用户名一栏填入<script type="text/javascript"> alert("JavaScript injection succeed.") </script>，成功实现JavaScript注入

image

image

三.Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表

kali虚拟机自带MySQL，输入命令systemctl start mysql打开服务，输入命令systemctl status mysql确认服务已开启。从结果中可以看出MySQL正常启动

image

输入以下命令，完成建库、创建用户、修改密码、建表等操作

mysql
-- 创建数据库
CREATE DATABASE 20232407db;
-- 使用数据库
USE 20232407db;
-- 创建用户
CREATE USER 'user20232407' IDENTIFIED BY '050620Lyh';
-- 授予用户权限
GRANT ALL PRIVILEGES ON 20232407db.* TO 'user20232407';
FLUSH PRIVILEGES;
-- 修改用户密码
ALTER USER 'user20232407' IDENTIFIED BY '050620Lyh!';
-- 创建表
CREATE TABLE onetable (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    pwd VARCHAR(255) NOT NULL
);
-- 插入数据
INSERT INTO onetable (name, pwd) VALUES ('liuyuhang', '20232407lyh');
-- 查看表中所有内容
SELECT * FROM onetable;

image

四.Web后端：编写PHP网页，连接数据库，进行用户认证

在kali中输入命令apt-get install php安装php

image

编写以下php代码，实现连接数据库和用户认证

<?php
$host = 'localhost';
$dbname = '20232407db';
$user = 'user20232407';
$password = '050620Lyh!';
 
//创建数据库连接
$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();
?>

在前端代码中，修改登录表单的属性如下，删除按钮的onclick属性。具体代码如下：

<!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: Arial, sans-serif;
            background-color: #f0f0f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }
        .container img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
        }
        .container h2 {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group button {
            width: 100%;
            padding-top: 10px;
            padding-bottom:10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group button {
            margin-top:5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .form-group button:hover {
            background-color: #0056b3;
        }
    </style>
    <script>
        function submit_login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var usernameRegex = /^.{4,}$/;
            var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
            if (!usernameRegex.test(username)) {
                alert('用户名必须在4个字符以上');
                return;
            }
            if (!passwordRegex.test(password)) {
                alert('密码必须是6个字符以上，包含至少一个字母和一个数字');
                return;
            }
            document.write('欢迎 ' + username);
        };
    </script>
</head>
<body>
    <div class="container">
        <img src="1.jpg" alt="Profile Picture">
        <h2>登录表单</h2>
        <!-- 修改1：添加了action和method属性 -->
        <form id="loginForm" action="http://localhost/20232407lyh.php" method="post">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <!-- 修改2：删除了onclick属性 -->
                <button type="submit">登录</button>
            </div>
        </form>
        <p>或者通过GET方法获取数据:</p>
        <form action="/get-data" method="get">
            <div class="form-group">
                <label for="search">搜索</label>
                <input type="text" id="search" name="search" required>
                <button type="submit">搜索</button>
            </div>
        </form>
    </div>
</body>
</html>

完成上述操作后，查看实现效果。发现可以正常进行用户认证。输入正确用户名和密码的结果如下：

image

输入错误密码如下：

image

五.实现简单的SQL注入和XSS攻击

在用户名中随机输入，密码中输入' OR '1'='1，即可成功登录，实现了SQL注入

image

image

在用户名中输入<script>alert("xss atack succeed.");</script>，密码中输入' OR '1'='1，网页弹出窗口，实现了XSS攻击

image

image

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

搭建WebGoat

image

在网页上注册并登录

image

（1）完成SQL注入

  • 第九个是通过注入看到表中所有用户的数据

    构建查询语句的代码为"SELECT * FROM user_data WHERE first_name = 'John' AND last_name = '" + lastName + "'";

    想要查询所有用户数据，要从后面的条件入手，输入内容为Smith' or '1'='1

    则查询语句为SELECT * FROM user_data WHERE first_name = 'John' and last_name 'Smith' or '1' = '1'

    由于'1' = '1'永真，所以就会返回所有表的数据

image

  • 第十个是数字型SQL注入，目的也是看到表中所有用户的数据

    构建查询语句的代码如下"SELECT * FROM user_data WHERE login_count = " + Login_Count + " AND userid = " + User_ID;

    输入内容为login_count=1,userid=1 OR 1=1

    则最终的查询语句是SELECT * From user_data WHERE Login_Count = 1 and userid= 1 OR 1=1

    由于1=1永真，所以就会返回所有表的数据

image

  • 第十三个是删除日志表，避免留痕

    输入内容为1'; drop table access_log; --

    开头的';'使得查询语句结束，之后写入完整的删表语句，并通过'--'使得后续的内容成为注释，因此就可以执行删表语句

image

（2）完成XSS攻击

点击左边的"Cross Site Scripting"

  • 第七个是反射型XSS攻击

    一共有两个提交框，所以需要测试哪个提交框可以完成攻击。分别尝试在两个框中输入，发现在第一个框中输入时会弹框，说明XSS攻击成功。

image

  • 第十个是基于DOM的XSS攻击，需要先找到在生产过程中留在应用程序中的测试代码的路径

    题目当中告诉了我们"The ‘base route’ in this case is: start.mvc#lesson"，而js文件中写道“‘test/:param’: ‘testRoute’”，因此答案就是“start.mvc#test/”

image

  • 第十一个是基于DOM的XSS攻击

    使用第十节发现的route，执行如下函数，从route中反射参数webgoat.customjs.phoneHome()。

    通过url在新的标签页触发，然后控制台会显示一个响应，输入响应中的随机数完成这个题。

    构造如下url，访问http://127.0.0.1:8080/WebGoat/start.mvc#test/param1=foobar&param2=DOMXSS%3Cscript%3Ewebgoat.customjs.phoneHome()%3C%2Fscript%3E

image

可以看到控制台已经输出了信息，提交-2091151683

image

（3）完成CSRF攻击(我用的DVWA)

可以看到网站的设计意图是让我们修改密码

image

如图所示，当我直接提交的时候，在url中出现了两个参数，一个是password_new参数，一个是password_conf参数，内容和我输入的内容是一模一样的，所以大胆猜测这个网站是不经过加密直接使用GET方法传向服务器的，我们可以直接尝试修改url

image

image

3.问题及解决方案

无

4.学习感悟、思考等

通过本次 Web 综合实验，我对前端、后端以及常见 Web 攻击方式有了系统性的理解。首先在前端部分，我掌握了 HTML 表单的结构、GET 与 POST 的区别，并利用 JavaScript 实现了对用户名和密码的简单校验，也通过回显功能体会到 DOM 操作的灵活性。同时，在尝试注入简单 HTML 与脚本代码时，更直观地认识到了 XSS 漏洞产生的根本原因。在后端部分，我完成了 MySQL 的安装、建库与建表，并通过 PHP 编写了用户登录认证程序，理解了 Web 后端与数据库交互的基本流程。随后，通过构造最简单的 SQL 注入语句，我深刻体会到不安全的字符串拼接对系统造成的危害。最后，使用 DVWA 进一步实践 SQL 注入、XSS、CSRF 等漏洞，使我对 Web 安全攻击方式、利用流程以及防护思路有了更加全面的认识。本次实验让我对 Web 安全的重要性有了更深刻的感触，也提升了实际动手能力。

posted @ 2025-12-07 21:33  20232407刘宇航  阅读(15)  评论(0)    收藏  举报