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

1.实验内容

总结一下本周学习内容，不要复制粘贴

2.实验过程

2.1Web前端HTML

sudo systemctl status apache2检查Apache状态

Kali Linux已经预装了Apache，但是Apache服务当前是停止状态。
sudo systemctl start apache2启动Apache服务
sudo systemctl enable apache2设置Apache开机自启
sudo systemctl status apache2检查状态确认已启动
sudo netstat -tulpn | grep :80查看是否在监听80端口
curl http://127.0.0.1/测试Apache是否正常工作

Apache已经成功启动并正常运行。
然后创建实验文件
进入到/var/www/html目录，创建一个表单

20232403

HTML表单与GET/POST方法

<h2>GET方法表单</h2>
<form action="process.php" method="GET">
    用户名: <input type="text" name="username"><br>
    密码: <input type="password" name="password"><br>
    <input type="submit" value="GET提交">
</form>

<h2>POST方法表单</h2>
<form action="process.php" method="POST">
    用户名: <input type="text" name="username"><br>
    密码: <input type="password" name="password"><br>
    <input type="submit" value="POST提交">
</form>

<h2>Apache控制</h2>
<p>启动Apache: <code>sudo systemctl start apache2</code></p>
<p>停止Apache: <code>sudo systemctl stop apache2</code></p>
<p>重启Apache: <code>sudo systemctl restart apache2</code></p>

<h2>理解要点</h2>
<p>1. GET: 数据在URL中可见</p>
<p>2. POST: 数据在URL中不可见</p>

创建处理表单的PHP文件

访问表单页面：

测试GET方法：

测试POST方法：

从结果可以理解GET与POST的区别
GET数据在URL中可见，可以被收藏、分享，而POST数据不在URL中，更安全，适合传输密码等敏感信息。

2.2Web前端javascipt

javascipt验证规则代码：

JavaScript验证实验

JavaScript表单验证

<form id="loginForm">
    <div>
        <label>用户名(3-10位字母数字):</label>
        <input type="text" id="username">
        <div id="userError" class="error"></div>
    </div>
    
    <div>
        <label>密码(6-12位):</label>
        <input type="password" id="password">
        <div id="passError" class="error"></div>
    </div>
    
    <div>
        <button type="submit">登录</button>
        <button type="button" onclick="testXSS()">测试XSS</button>
    </div>
</form>

<div id="result"></div>

<script>
    // 获取DOM元素
    const form = document.getElementById('loginForm');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const userError = document.getElementById('userError');
    const passError = document.getElementById('passError');
    const result = document.getElementById('result');
    
    // 表单提交事件
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交
        
        // 清除之前的错误信息
        userError.textContent = '';
        passError.textContent = '';
        
        let isValid = true;
        
        // 验证用户名: 3-10位字母数字
        const usernameValue = username.value.trim();
        const userRegex = /^[A-Za-z0-9]{3,10}$/;
        if (!userRegex.test(usernameValue)) {
            userError.textContent = '用户名必须是3-10位字母数字';
            isValid = false;
        }
        
        // 验证密码: 6-12位
        const passwordValue = password.value;
        if (passwordValue.length < 6 || passwordValue.length > 12) {
            passError.textContent = '密码必须是6-12位';
            isValid = false;
        }
        
        // 如果验证通过，显示欢迎信息
        if (isValid) {
            // 故意使用innerHTML不转义，存在XSS漏洞
            result.innerHTML = '欢迎，' + usernameValue + '！';
        }
    });
    
    // XSS测试函数
    function testXSS() {
        // 预置XSS攻击代码
        username.value = '<script>alert("XSS攻击成功！")<\/script>';
        password.value = 'test123';
        
        // 提交表单
        form.dispatchEvent(new Event('submit'));
        
        alert('已注入XSS代码，观察欢迎信息区域的变化！');
    }
</script>

结果测试：

正常情况：
输入：用户名：john123，密码：123456

测试验证规则：
输入用户名：ab（太短）
输入密码：123（太短）

测试XSS攻击：

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

检查并启动MariaDB
sudo systemctl start mariadb
创建实验数据库
CREATE DATABASE web_lab;
使用这个数据库
USE web_lab;
创建用户表
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) UNIQUE,
password VARCHAR(50)
);
插入3条测试数据
INSERT INTO users (username, password) VALUES
('admin', 'admin123'),
('user1', 'pass123'),
('test', 'test123');
查看数据是否插入成功
SELECT * FROM users;