20212314 2023-2024-2 《网络与系统攻防技术》实验八实验报告

20212314严东波 2024-06-05 21:52:36

1.实验内容

2.实验过程

2.1 Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML
启动服务

systemctl start apache2

sudo chmod 777 /var/www/html
vi /var/www/html/2314.html

前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-form {
            width: 300px;
            padding: 30px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        button[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-form">
        <h2>Login</h2>
        <form action="/login" method="post">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Log in</button>
        </form>
    </div>
</body>
</html>

get方法：参数附加在URL后，通过查询字符串传递；post方法：参数包含在HTTP请求体中，不显示在URL上，下图是get方法看到的URL

2.2 Web前端javascipt
理解JavaScript的基本功能，理解DOM
在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击：利用回显用户名注入HTML及JavaScript

账号和密码不为空即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <style>
        /* 省略样式代码 */
    </style>
</head>
<body>
    <div class="login-form">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Log in</button>
        </form>
        <p id="message"></p>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            // 简单验证：用户名和密码都不能为空
            if (username && password) {
                document.write( 'Welcome, ' + username + '!');
            } else {
                document.getElementById('message').textContent = 'Please enter both username and password.';
            }
        });
    </script>
</body>
</html>

利用回显用户名注入HTML

<p>231411111111111</p>

利用回显用户名注入JavaScript

<script> alert("XSS Attack!") </script>

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

systemctl start mysql

sudo mysql -u root -p
创建数据库
create database fir;
创建用户和密码
CREATE USER 'ydb'@'localhost' IDENTIFIED BY '2314';
赋予权限
GRANT ALL PRIVILEGES ON fir TO 'ydb'@'localhost'; 
刷新
FLUSH PRIVILEGES;
使用数据库
use fir;
创建表
CREATE TABLE login ( username VARCHAR(10) NOT NULL, password VARCHAR(20) NOT NULL );
插入数据
insert into login values('ydb','2314');

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

2314.php

<?php

$servername = "localhost";
$username = "ydb";
$password = "2314";
$dbname = "fir";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 获取用户输入的用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];

// 直接从数据库中检索用户凭据
$sql = "SELECT * FROM login WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 用户认证成功，设置会话变量并重定向到主页
    echo "{$username} Welcome!";
} else {
    // 用户认证失败，显示错误信息
    echo "Invalid username or password";
}

$conn->close();
?>