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

1. 实践内容

  • （1）编写含有表单的前端代码，启用Apache，访问对应网页

  • （2）在前端代码的基础上编写JavaScript验证用户名、密码，登陆后回显用户名，并尝试注入攻击

  • （3）启动MySQL，并进行基础操作

  • （4）编写php网页，使前端的网页可以连接数据库，进行用户认证

  • （5）实现SQL注入，XSS攻击测试

  • （6）安装WebGoat平台，完成SQL注入、XSS、CSRF攻击

2. 实践要求

  • （1）学会使用html，javascript，php前后端语言的功能实现

  • （2）熟悉Apache、MySQL软件的使用

  • （3）掌握并学会进行html注入、javascript注入、SQL注入、XSS攻击

  • （4）能够使用平台实现SQL注入、XSS、CSRF攻击

3. 实践过程

3.1 编写含有表单的前端代码，启用Apache，访问对应网页

（1）首先理解HTML，理解表单，理解GET与POST方法

  • GET方法：一种HTTP请求方法，用于请求从服务器获取数据。

  • POST方法：一种HTTP请求方法，用于向服务器提交数据。

（2）启动Apache服务

  • kali上默认安装好了Apache，只需要启动即可，按照如下命令：

  • 使用命令netstat -tupln | grep 80 检查80端口是否被占用

  • 使用命令systemctl start apache2 启动Apache服务

  • 使用命令systemctl status apache2.service 查看Apache服务状态，显示可以正常启动

image

（3）编写html代码，并访问网页

  • 使用命令cd /var/www/html 进入到kali的/var/www/html目录下

  • 使用命令vi 20232405gym.html创建html文件，并在里面添加编写好的html代码如下

表单提交示例 - GET与POST方法 
<!-- GET方法表单 -->
<div class="form-container">
    <h2>GET方法提交</h2>
    <form action="submit.html" method="get">
        <div class="form-group">
            <label for="username-get">用户名：</label>
            <input type="text" id="username-get" name="username" required placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password-get">密码：</label>
            <input type="password" id="password-get" name="password" required placeholder="请输入密码">
        </div>
        <button type="submit">使用GET提交</button>
    </form>
</div>

<!-- POST方法表单 -->
<div class="form-container">
    <h2>POST方法提交</h2>
    <form action="submit.html" method="post">
        <div class="form-group">
            <label for="username-post">用户名：</label>
            <input type="text" id="username-post" name="username" required placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password-post">密码：</label>
            <input type="password" id="password-post" name="password" required placeholder="请输入密码">
        </div>
        <button type="submit">使用POST提交</button>
    </form>
</div>
  • html的页面样式如下：

image

image

image

3.2 编写JavaScript验证用户名、密码，登陆后回显用户名，并尝试注入攻击

3.2.1 编写JavaScript验证用户名、密码，登陆后回显用户名

    <script>
        // 显示成功信息（存在XSS漏洞：直接使用innerHTML）
        const showSuccess = (username, method) => {
            document.getElementById('success-container').style.display = 'block';
            document.getElementById('welcome-message').innerHTML = '欢迎，' + username + '！';
            document.getElementById('submit-method').textContent = method;
        };

        // GET表单提交处理
        document.getElementById('get-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username-get').value;
            if (username.length < 3) { alert('用户名至少3个字符'); return; }
            const password = document.getElementById('password').value;
            if (password.length < 6) { alert('密码至少6个字符'); return; }
            showSuccess(username, 'GET方法');
            // 模拟GET参数（控制台输出）
            console.log('GET参数:', { username: username });
        });

        // POST表单提交处理
        document.getElementById('post-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username-post').value;
            if (username.length < 3) { alert('用户名至少3个字符'); return; }
            const password = document.getElementById('password').value;
            if (password.length < 6) { alert('密码至少6个字符'); return; }
            showSuccess(username, 'POST方法');
            // 模拟POST数据（控制台输出）
            console.log('POST数据:', { username: username });
        });

        // 返回表单按钮
        document.getElementById('back-button').addEventListener('click', function() {
            document.getElementById('success-container').style.display = 'none';
            document.getElementById('get-form').reset();
            document.getElementById('post-form').reset();
        });
    </script>

  • 用户名和密码的规则通过正则表达式实现：用户名不少于3个字符，密码不少于6个字符

  • 实现的效果如下图

image

image

image

3.2.2 注入攻击实现

（1）html注入攻击

  • 在用户名中输入<h1 style="color:red; font-size:50px">黑客入侵</h1>，返回黑客入侵的恐吓提示

image

  • 在用户名输入<button onclick="location.href='https://钓鱼网站'">点击领奖</button>，返回一个跳转到钓鱼网站的按钮

image

3.3 启动MySQL，并进行基础操作，实现web后端

  • （1）启动MySQL

  • kali中自带MySQL，所以使用命令service mysql start直接启动，之后使用命令systemctl status mysql查看启动状态

image

  • （2）进行数据库基本操作

  • 根据下面的命令输入，进行数据库的建库、创建用户、修改密码、建表等操作

mysql 开启mysql
CREATE DATABASE 20232405db; 创建数据库
USE 20232405db; 使用数据库
CREATE USER 'user20232405' IDENTIFIED BY '20232405'; 创建用户并设置密码
GRANT ALL PRIVILEGES ON 20232405db.* TO 'user20232405'; 授予用户权限
ALTER USER 'user20232405' IDENTIFIED BY '20232405gym'; 修改密码
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 ('gym', '20232405'); 插入数据
SELECT * FROM onetable; 查看表中数据

image

3.4 编写php网页，使前端的网页可以连接数据库，进行用户认证

  • （1）编写php代码，将其放在和html文件同步目录下，实现用户输入的认证
<?php
// 数据库配置（根据实际情况修改）
$servername = 'localhost';  // 数据库地址
$dbusername = 'user20232405';  // 数据库用户名
$dbpassword = '20232405gym';  // 数据库密码
$dbname = '20232405db';  // 数据库名

// 连接数据库
$conn = new mysqli($servername, $dbusername, $dbpassword, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取表单提交的数据
$username = $_REQUEST['username'];  // $_REQUEST 同时接收GET和POST数据
$password = $_REQUEST['password'];

// 从数据库查询用户信息
$sql = "SELECT * FROM onetable WHERE name = '$username' AND pwd = '$password'";
$result = $conn->query($sql);

// 处理查询结果
if ($result->num_rows > 0) {
    // 登录成功
    $user = $result->fetch_assoc();
    echo "欢迎".$username;
} else {
    // 登录失败
    echo "unknown user";
}

// 关闭数据库连接
$conn->close();
?>
  • （2）修改前端的html，在form中添加id，并把action改为目标php文件，使其能和php连接
    <!-- GET方法表单 -->
    <div class="form-container">
        <h2>GET方法提交</h2>
        <form id="get-form" action="20232405gym.php" method="get">
            <div class="form-group">
                <label for="username-get">用户名：</label>
                <input type="text" id="username-get" name="username" required placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password-get">密码：</label>
                <input type="password" id="password-get" name="password" required placeholder="请输入密码">
            </div>
            <button type="submit">使用GET提交</button>
        </form>
    </div>

    <!-- POST方法表单 -->
    <div class="form-container">
        <h2>POST方法提交</h2>
        <form id="post-form" action="20232405gym.php" method="post">
            <div class="form-group">
                <label for="username-post">用户名：</label>
                <input type="text" id="username-post" name="username" required placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password-post">密码：</label>
                <input type="password" id="password-post" name="password" required placeholder="请输入密码">
            </div>
            <button type="submit">使用POST提交</button>
        </form>
    </div>
  • (3)进行用户认证，根据之前插入数据库中的数据输入（name=gym，pwd=20232405）

image

image

3.5 实现SQL注入，XSS攻击测试

3.5.1 SQL注入

（1）字符型SQL注入

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

  • 该SQL注入的原理是，空输入和1=1恒为真，就会永远认证成功

image

（2）注释型SQL注入

  • 实现在已知用户名的前提下，跳过密码登录。只需要在正确的用户名后面加上'-- ，例如gym'-- ，密码随便输入，即可实现注入攻击跳过密码

  • 该SQL注入的原理是，SQL中-- 是实现注释的语句，在用户名后面加上-- 会把后面密码的输入直到下一个分号的部分给注释掉，即实现了只认证用户名登录

image

3.5.2 XSS攻击

  • 用户名输入<img src=x onerror=alert("觉得王老师帅的扣1")>，密码输入上面（1）中的' OR '1'='1，即实现了XSS攻击

image

3.6 在WebGoat平台上，实现SQL注入、XSS、CSRF攻击

  • 根据最后参考资料中的“如何搭建WebGoat靶场”配置好环境并登录

image

3.6.1 SQL注入（(A3)Injection的SQL Injection(Intro)的9-13题）

  • （1）第9题

  • 分析可得该题目是字符型注入，需要注意引号闭合，同时要在最后使用or产生恒等条件。因此答案为Smith' or '1'='1

image

  • （2）第10题

  • 分析可得该题目是数字型注入，无需注意引号闭合，只需要在最后产生恒等条件，所以Login_Count中任意填入，User_ID后跟上数字型的恒等条件。因此答案为login_count=1,userid=1 or 1=1

image

  • （3）第11题

  • 分析可得该题目是字符型注入，需要注意引号闭合，同时最后要产生恒等条件。因此答案为Employee Name:Smith,Authentication TAN:3SL99A' OR '1'='1

image

  • （4）第12题

  • 分析可得该题目需要通过把能够修改数据的语句作为查询的参数来实现修改数据，即需要在正常查询的参数后面加上修改的语句。因此答案为 Employee Name：Smith,TAN：3SL99A'; UPDATE employees SET SALARY = 100000 WHERE LAST_NAME = 'Smith

image

  • （5）第13题

  • 分析可得该题目是字符型注入，要求在闭合引号后进行表的删除操作。因此答案为1'; drop table access_log; --，最后用--注释掉最后面的多余的一个引号

image

3.6.2 XSS攻击（(A3)Injection的Cross Site Scripting的7、10、11题）

  • （1）第7题

  • 先随便提交一些数据，发现需要进行的是javascript的注入

image

  • 使用常用的javascript注入语句<script>alert('xss attack 20232405')</script>输入后成功攻击

image

  • （2）第10题

  • 本题是属于DOM型的XSS，并根据提示在页面源代码中找线索，通过各种寻找发现在GoatRouter.js文件中出现了路由信息

image

  • 最后结合题干要求，认为答案是start.mvc#test/

image

  • （3）第11题

  • 本题是DOM的XSS攻击，需要从route中反射参数webgoat.customjs.phoneHome()，通过url在新的标签页触发并给出控制台显示一个随机数。构造一个urlhttp://127.0.0.1:8080/WebGoat/start.mvc#test/<img src=x onerror="webgoat.customjs.phoneHome()">，输入后在控制台中找到了随机数173728063，输入后即可成功，但是要注意该随机数有条件限制，不能退出控制台后再输入

image

image

3.6.3 CSRF攻击（(A10)Server-side Request Forgery的Cross-Site Request Forgeries的3、4、7、8题）

  • （1）第3题

  • 先点击一下提交键，发现跳转到了一个原始界面的输出

image

  • 对提交查询请求的referer进行修改，referer是表示这个请求从哪个网站来的

4. 问题及解决方案

  • 问题一：在进行html和javascript注入攻击的时候，一直无法实现成功。
    image

  • 解决一：通过查询资料和注入攻击的原理，并且分析我的代码后发现，我的代码中使用了alert('欢迎 ' + username);实现回显输出，但是这么写就导致不会触发XSS，进而无法注入。后来通过询问AI得到的方法是，将alert()改为直接写入DOM的innerHTML/document.write

  • 问题二：在SQL注入攻击时，使用gym'--无法注入成功

  • 解决二：通过查找资料发现，MySQL标准中要求注释语句--后要跟一个空格，所以改为gym'-- 后实现了注入

5. 学习感悟、思考等

这次的Web安全实验中，我实际体会了HTML注入、JavaScript注入、SQL注入、XSS攻击及CSRF攻击等多种典型Web攻击手段。通过模拟真实攻击场景，我清晰理解了各类攻击的实现逻辑，更意识到Web应用若对用户输入数据、客户端提交信息很可能被攻击者利用，引发一系列风险，并直接影响了用户的信息安全。

在实现攻击的过程中，我也间接学习了防御的方法，对于HTML与JavaScript注入，可以通过检验输入格式、过滤特殊字符的方法；对于SQL注入，可以使用参数化查询、预编译语句等方法；对于XSS攻击，需要结合输入过滤、输出编码及CSP策略；对于CSRF攻击，可以通过验证Token、检查Referer字段等方式保护请求的合法性。

此次学习实践让我深入学习了Web安全的基础攻防技能。这些知识将帮助我在未来的开发工作中规避常见安全隐患，为系统与用户安全筑牢防线。

参考资料

如何搭建 WebGoat 靶场
webgoat全关教程手册

posted on 2025-12-07 11:42  20232405高一鸣  阅读(0)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3