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端口

2.systemctl stop apache2关闭Apache

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>

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

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

2.2Web前端javascipt

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

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

1.在2.1的html代码中添加下列

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

刷新页面返回顶部

话梅味的博客