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

1.实验内容
1.1本周学习内容
Web 前端:负责开发用户所看到的内容。
(1)HTML
(2)JavaScript(Js)
(3)CSS
(4)Web 前端框架
Web 后端:主要使用各种库，API，Web 服务等技术搭建后端应用体系，确保各种 Web服务接口之间的正确通信。比如处理前端用户发起的请求，各种业务逻辑的操作，最后与数据库交互，完成增、删、改、查等数据库操作。
(1)C
(2)Java
(3)PHP
(4)Python
(5)C#
1.2实验内容及要求
(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
暂停Apache服务

查看Apache服务

启动Apache服务

查看Apache服务

2.1.2HTML，表单，GET与POST方法
HTML
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网上应用的标准标记语言。它描述了网页的结构。
表单
在HTML中，表单（Form）是用来收集用户输入的。它可以包含多种输入元素，如文本框、复选框、单选按钮、下拉菜单、提交按钮等。表单允许用户输入数据，然后可以将这些数据发送到服务器进行处理。表单是通过

标签来定义的，并且可以通过设置不同的属性来控制其行为，比如action属性指定了表单数据提交到的URL，method属性指定了数据提交到服务器时所使用的HTTP方法（通常是GET或POST）。
GET方法
GET是HTTP协议中用于请求数据的一种方法。当使用GET方法提交表单时，表单中的数据会被附加到URL的末尾，形成查询字符串。这种方法适合用来请求数据而不是提交数据以改变服务器状态，因为它是非幂等的（即，多次相同的GET请求应该返回相同的结果，不改变服务器状态）。GET请求的数据是可见的（出现在URL中），并且由于URL的长度限制，可以发送的数据量有限。
POST方法
POST是HTTP协议中用于提交数据到服务器的一种方法。与GET不同，POST方法将数据包含在HTTP请求的body中，而不是附加到URL。这使得POST请求可以发送更多的数据，并且数据不会在URL中显示，因此更加安全（尽管它并不提供真正的加密）。POST请求通常用于提交表单数据以更新服务器上的资源，因为它是幂等的（即，多次相同的POST请求可能会改变服务器状态，但每次请求的效果应该是相同的，假设没有其他请求同时修改资源）。
2.1.3编写一个含有表单的HTML

代码如下：

点击查看代码 
<!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: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-container input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form-container input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

    <div class="form-container">
        <h2>登录</h2>
        <form action="#" method="post">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">

            <input type="submit" value="提交">
        </form>
    </div>

</body>
</html>

2.2Web前端javascipt
2.2.1JavaScript的基本功能，DOM
JavaScript的基本功能：
①嵌入动态文本于HTML页面：JavaScript可以动态地生成和修改HTML页面的内容，从而实现页面的动态效果。
②对浏览器事件做出响应：JavaScript能够监听和响应各种浏览器事件，如点击、键盘输入、鼠标移动等，从而提供交互式的用户体验。
③读写HTML元素：通过JavaScript，可以读取和修改HTML文档中的元素，包括它们的属性、样式和内容。
④数据验证：在数据被提交到服务器之前，JavaScript可以进行前端验证，确保用户输入的数据符合预期的格式和范围。
⑤检测访客浏览器信息：JavaScript能够获取访客的浏览器类型、版本、操作系统等信息，从而根据不同的浏览器环境提供不同的内容或功能。
⑥控制cookies：JavaScript可以创建、读取、修改和删除cookies，这对于实现用户会话管理、个性化设置等功能非常重要。
⑦服务器端编程：基于Node.js技术，JavaScript也可以用于服务器端编程，实现后端逻辑和数据处理。
DOM：DOM是W3C（万维网联盟）组织推荐的处理可扩展标志语言的标准编程接口。它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
2.2.2在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
输入合法的用户名和密码

密码为空：

代码如下：

点击查看代码 
<!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: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-container input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form-container input[type="submit"]:hover {
            background-color: #45a049;
        }
        .message {
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
            color: #4CAF50;
        }
    </style>
</head>
<body>

    <div class="form-container">
        <h2>登录</h2>
        <form id="loginForm" action="#" method="post" onsubmit="return validateForm()">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">

            <input type="submit" value="提交">
        </form>

        <div id="welcomeMessage" class="message"></div>
    </div>

    <script>
        // 表单验证函数
        function validateForm() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var welcomeMessage = document.getElementById('welcomeMessage');

            // 用户名和密码不能为空
            if (username === '' || password === '') {
                alert('用户名和密码不能为空！');
                return false;
            }

            // 简单的用户名验证：长度在3个字符之上
            if (username.length < 3 ) {
                alert('用户名长度应在3个字符之上！');
                return false;
            }

            // 简单的密码验证：长度在6到20个字符之间
            if (password.length < 6 || password.length > 20) {
                alert('密码长度应在6到20个字符之间！');
                return false;
            }

            // 如果验证通过，回显欢迎信息
            document.write('欢迎' + username);
            return false; // 防止表单提交
        }
    </script>

</body>
</html>

2.2.3尝试注入攻击：利用回显用户名注入HTML及JavaScript。
注入HTML


注入JavaScript

2.3Web后端
启动数据库服务并安装安全脚本


使用root用户连接数据库

查看数据库

创建一个名为gbc的用户

创建并使用数据库

建立包含studentid、password两个字段表user，插入用户名和密码，并查看

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

代码如下

点击查看代码 
<?php  
  
// 设置数据库服务器的名称  
$servername = "localhost";  
  
// 设置连接数据库的用户名  
$username = "root";  
  
// 设置连接数据库的密码  
$password = "20222402";  
  
// 设置要连接的数据库名  
$dbname = "20222402gbc";  
 
// 使用mysqli创建一个新的数据库连接  
$conn = new mysqli($servername, $username, $password, $dbname);  
  
// 检查连接是否成功  
if ($conn->connect_error) {  
    // 如果连接失败，输出错误信息并停止脚本执行  
    die("连接数据库失败: " . $conn->connect_error);  
}  
  
// 使用null合并运算符从POST请求中获取用户名，如果POST请求中没有该值，则将其设置为空字符串  
$username = $_POST['username'] ?? '';  
  
// 使用null合并运算符从POST请求中获取密码，如果POST请求中没有该值，则将其设置为空字符串  
$password = $_POST['password'] ?? '';  
  
// 创建一个SQL查询语句，用于从user表中查找与给定用户名和密码匹配的用户  
$sql = "SELECT * FROM user WHERE username = '$username' AND password = '$password'";  
  
// 执行SQL查询并获取结果  
$result = $conn->query($sql);  
  
// 检查查询结果中的行数是否大于0，即是否找到了匹配的用户  
if ($result->num_rows > 0) {  
    // 如果找到了匹配的用户，输出登录成功的消息  
    echo " 欢迎 ! 登陆成功！";  
} else {  
    // 如果没有找到匹配的用户，输出用户名或密码错误的消息  
    echo "用户名或密码错误！";  
}  
  
// 关闭数据库连接  
$conn->close();  
?>

创建HTML文件
代码如下

点击查看代码 
<form method="post" action="20222402.php">
        <h2>登录</h2>
        <label for="username">name:</label>
        <input type="text" id="username" name="username" >
        
        <label for="password">password:</label>
        <input type="password" id="password" name="password" >
        
        <input type="submit" value="提交">
    </form>

用户名和密码正确

用户名和密码错误

2.5最简单的SQL注入，XSS攻击测试

成功

SQL注入：
用户名输入，提交

2.6在DVWA完成SQL注入、XSS、CSRF攻击
SQL注入
输入User ID显示对应的name，并且输入的ID值在URL栏中

判断是否存在注入

存在注入点

XSS攻击
URL栏中的default为传输的值，利用default传入xss攻击

CSRF攻击:
修改一次密码，看到URL栏有新密码

直接改变URL栏中password的值

直接修改成功
3.问题及解决方案

  • 问题1：在网页和数据库连接时失败
  • 问题1解决方案：没有启动Apache服务，重新启动后成功
    4.学习感悟、思考等
    本次实验涵盖了Web前端与后端的基础知识，以及常见的Web安全漏洞攻击（如SQL注入、XSS攻击、CSRF攻击等）。通过对这些概念的学习与实际操作，我对Web开发和Web安全的理解有了更为深入的认识。
    通过本次实践操作，我对Web的前端，后端以及攻防技术有了更深入的了解。在DVMA平台上，我能够更直观地了解SQL注入、XSS、CSRF等常见漏洞的利用方法，以及如何通过各种手段进行攻击与防御。
    总之，通过这次实验，我不仅学会了Web开发的基本技能，还深入了解了Web安全的基本知识和常见漏洞攻击的原理与防范措施，对课上学习的内容有了更深入的理解。
posted @ 2024-12-19 15:42  nonosuperman  阅读(1)  评论(0)  编辑  收藏  举报