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

1.实验内容

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攻击。

1.2本周学习内容

（1）web的几种攻击方式

SQL注入、XSS攻击、CSRF攻击

（2）burpsuite工具的使用

2.实验过程

2.1 Web前端HTML

2.1.0 安装、启停Apache

sudo apt-get install apache2

查看主机端口占用情况，我的没有显示有端口占用
sudo apt install net-tools
netstat -aptn

使用service apache2 start命令打开Apache服务

此时在浏览器输入 127.0.0.1，如果可以打开Apache的默认网页，则表示开启成功！

查看Apache状态，显示开启状态
sudo systemctl status apache2

关闭apache，并查看状态，显示关闭
sudo systemctl stop apache2 //关闭

2.1.1 理解HTML，理解表单，理解GET与POST方法

HTML：HTML（HyperText Markup Language）是超文本标记语言，它是构建网页和网页应用的标准标记语言。HTML通过标签（tags）来定义不同类型的内容，如文本、图片、链接等，这些标签可以嵌入到网页中，并由浏览器进行解析和显示。
表单：表单是网页中用于收集用户输入信息的区域。表单通常包含各种输入字段（如文本输入框、密码框、单选按钮、复选框、下拉列表等），以及一个提交按钮。当用户填写完表单并点击提交按钮时，表单中的数据会被发送到服务器进行处理。
GET方法：是HTML表单的默认方法，主要用于从服务器获取数据。将表单中的数据以variable=value的形式添加到action属性所指向的URL后面，并使用“?”连接，各个变量之间使用“&”连接。GET请求的URL举例：

POST方法：主要用于向服务器传递数据。与 GET 方法不同，POST 方法的数据不会附加在 URL 后面，而是放在 HTTP 请求的主体（body）中。这种方式允许客户端发送更多的数据，包括二进制数据，且数据不会暴露在 URL 中，相对更安全。数据传输方式是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action属性所指向的URL。POST请求举例：

2.1.2 编写一个含表单的HTML

先在记事本写好含表单的登陆页面html代码，我的如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="20222411康灿然" />
    <title>Title</title>
</head>
<style type="text/css">
    .divForm{
        position: absolute;/*绝对定位*/
        width: 300px;
        height: 200px;
        text-align: center;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -150px;
    }
</style>
<body>
<div class="divForm">
    <h1 align="center">欢迎登录</h1>
    <form name="form1" method="post" action="index.php">
        <table border = "0">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username" value="" /></td>
            </tr>
            <tr>
                <td>密&nbsp&nbsp&nbsp&nbsp码：</td>
                <td><input type="password" name="userpwd" value="" /></td>
            </tr>
            <tr>

                <td></td>
                <td><input type="submit" value="提交" onClick="return checkForm()"/> <input type="reset" value="重填" /></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

cd /var/www/html 进入html的文件夹
touch 20222411login.html 创建html文件
vi 20222411login.html 进入编辑页面，将html代码粘贴进去

service apache2 start 打开Apache服务
使用浏览器打开制作的网页，在浏览器输入localhost/20222411login.html
可跳转到自己的登陆界面

可提交表单，实现跳转

2.2 Web前端javascipt

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

JavaScript的基本功能：JavaScript是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言。它由以下三部分组成：
ECMAScript：描述了该语言的语法和基本对象；
文档对象模型（Document Object Model，简称DOM））：描述处理网页内容的方法和接口；
浏览器对象模型（Browser Object Model，简称BOM））：描述与浏览器进行交互的方法和接口。
JavaScript可以通过修改HTML元素和CSS样式，实现动态内容的展示和交互效果，使网页更加生动和吸引人。它通过响应用户的操作和事件实现各种交互功能，例如表单验证、按钮点击、菜单导航等，提升用户体验和互动性。它有丰富的内置函数和对象，可以进行数据处理、计算和逻辑判断，实现复杂的业务逻辑和算法。此外，JavaScript可以发起网络请求，与服务器进行数据交互，实现异步加载数据、AJAX操作和RESTful API的调用。
DOM：DOM（Document Object Model）即文档对象模型，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。
总之，就是为了让JavaScript可以对文档中的标签、属性、内容等进行访增删改操作。

2.2.1编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”

在login.html加上一段JavaScript正则表达式，来判断用户是否填写了用户名和密码。我设定的规则为：用户名须为6-12位字母/数字/中文，密码为1-20位纯数字。代码如下：

<script type="text/javascript">
    function checkForm() { // 定义JavaScript函数名
        var username = form1.username.value.trim(); // 获取并去除用户名两侧空白
        var userpwd = form1.userpwd.value.trim(); // 获取并去除密码两侧空白

        // 判断表单用户名值是否合法（不能为空且长度为4-12位字符）
        if (username === "" || username.length < 4 || username.length >99 ) {
            alert("用户名必须为4-12位字符"); // 弹窗警告
            return false; // 返回值false，阻止表单提交
        }

        // 判断表单密码值是否合法（不能为空，长度为6-20位，且包含字母和数字）
        var pwdPatternLength = /^[a-zA-Z0-9]{6,20}$/; // 检查长度和字符类型（字母或数字）
        var pwdPatternLetter = /[a-zA-Z]/; // 检查是否包含字母
        var pwdPatternNumber = /[0-9]/; // 检查是否包含数字

        if (userpwd === "" || !pwdPatternLength.test(userpwd) || !pwdPatternLetter.test(userpwd) || !pwdPatternNumber.test(userpwd)) {
            alert("密码必须为6-20位且同时包含字母和数字"); // 弹窗警告
            return false; // 返回值false，阻止表单提交
        }

        return true; // 如果验证通过，返回true
    }
</script>

vi 20222411login.html 进入编辑页面添加代码

使用浏览器打开制作的网页，在浏览器输入localhost/20222411login.html
什么都不填

只填用户名，且不符合要求

用户名符合要求，密码不符合要求

编写一个在用户点击登陆按钮后回显“欢迎+输入的用户名”的PHP页面
PHP是一种流行的服务器端编程语言，常用于Web开发。它被设计用于快速开发动态网站，并能够与HTML紧密集成。PHP可以生成动态页面内容、连接数据库、处理表单数据等。它还可以在命令行下运行脚本。PHP代码通常嵌入在HTML中，在服务器端执行，然后将渲染后的页面发送给客户端。
先在记事本写好代码，我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome!</title>
</head>
<body>
<h1 align="center">欢迎!<?php echo $_POST['username'];?></h1>

</body>
</html>

cd /var/www/html 进入html的文件夹
touch index.php 创一个用于接收用户登陆数据的文件
vi index.php 进入编辑页面，将代码粘贴进去

在浏览器输入localhost/20222411login.html，输入正确格式的用户名和密码后点击登录，成功跳转到欢迎界面

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

进入20222411login.html编辑页面，先把最大字数限制改成99

尝试XSS攻击（跨站脚本攻击）：
XSS即跨站脚本攻击，原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。这些恶意网页程序通常是JavaScript。
准备一段脚本，注入在输入框中，随着登录信息一起提交表单

直接以该脚本作为用户名

点击提交，回显恶意脚本内容，攻击成功！这段脚本已经成功嵌入到页面当中。当受害浏览器访问这个页面的时候，这段脚本也将被认为是页面的一部分，从而得到执行，即弹出对话框显示受害浏览器的Cookie信息。

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

kali虚拟机自带mysql，输入systemctl start mysql开启MySQL服务
输入mysql -u root -p使用root权限进入，需要输入密码（就是你登录的密码）

建立数据库：CREATE DATABASE 20222411DB;
创建用户，设定密码：
CREATE USER 'kcr'@'localhost' IDENTIFIED BY '20222411';
‘kcr’(user)：用户名
‘localhost’(host):指定该用户在哪个主机上可以登陆，如果是本地用户可用localhost；如果想让该用户可以从任意远程主机登陆，可以使用通配符%
‘20222411’(password):登陆密码。密码可以为空，如果为空则该用户登陆无需输入密码。
将数据库20222411DB的所有权限授予当前用户：grant all privileges on 20222411DB.user_info to kcr@localhost identified by "20222411";

进入20222411DB数据库：use20222411DB;

在数据库中创建表user_info：create table user_info (username VARCHAR(50),password VARCHAR(50));
插入数据：insert into user_info values('kcr','20222411');
查看数据：select * from user_info;

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

前端和后端代码如下：
2411login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20222411login2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .login-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .login-container h1 {
            margin-bottom: 20px;
        }
        .login-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .login-container input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>登录界面2</h1>
        <form action="login.php" method="post">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required>
            <br>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
            <br>
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>

<?php
session_start();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $usrname = $_POST["username"];
    $pwd = $_POST["password"];
    $mysqli = new mysqli("localhost", "kcr", "20222411", "20222411DB");
    if ($mysqli->connect_errno) {
        echo "数据库连接失败: " . $mysqli->connect_error;
        exit();
    }
    $query = "SELECT * FROM user_info WHERE username='$usrname' AND password='$pwd'";

    $result = $mysqli->query($query);
    if ($result === false) {
        echo "MySQL query error: " . $mysqli->error;
        $mysqli->close();
        exit();
    }
    if ($result->num_rows > 0) {
        echo "欢迎, {$usrname}! <br>";
    } else {
        echo "{$usrname} 登录失败! <br>";
    }
    $result->close();
    $mysqli->close();
} else {
    echo "请使用表单提交登录信息。";

}
?>

保持数据库和apache开启状态，在火狐浏览器输入html本地网址：http://localhost/2411login.html
输入正确的账号密码：

点击登录，显示欢迎kcr

输入错误账户密码，点击登录，显示登录失败

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

2.5.0 SQL注入

SQL注入是一种常见的网络黑客技术，SQL注入攻击通过从客户端到应用程序的SQL查询语句中注入查询或插入的恶意代码。如果处理不当，让恶意代码注入应用程序可能会对数据完整性和安全性等产生严重影响。
在用户名输入框输入' or 1=1#，密码随意输入，点击登录

可以看到，虽然输入的账号密码明显错误，登录却成功了

当我们输入账号为' or 1=1#时，筛选条件就变为

 $query = "SELECT * FROM user_info WHERE username='' or 1=1#' AND password='$pwd'";
    $result = $mysqli->query($query);

符号#会将后面部分注释掉，而前面的'' or 1=1是永真式，用这个条件进行筛选，肯定能筛选出结果，也就会被判定为登录成功了

2.5.1 XSS攻击

在用户名输入<script>alert(1)</script>，密码随便输，攻击成功

2.6 Webgoat平台的SQL注入、XSS、CSRF攻击

2.6.0下载webgoat

Webgoat是用于进行WEB漏洞实验的应用平台，需要自行下载
参考下载教程：手把手教你在kali-Linux 2020.3安装webgoat_kali安装webgoat-CSDN博客
下载链接：https://github.com/WebGoat/WebGoat/releases
下载得到jar文件

将文件复制到虚拟机上
启动webgoat：java -jar webgoat-2023.8.jar

复制链接到火狐打开

进入login页面，需要我们注册账号并登录

2.6.1 SQL注入攻击

点开左边列表A3中的SQL injection

第9题：

题目要求我们通过下面的下拉框选择相关的数据，检索出users表中的所有用户信息，我们无需知道任何特定的用户名就可以得到完整的列表。

首先，我们查看原代码是让我们输入lastName

其次，我们查看该字段的格式为’ “+ lastName +” ’

输入的内容将会代替 “+ lastName +”，例如我们输入Smith，则last_name = ’ Smith '；
明确如何使得查询条件为永真：
我们要通过注入查询所有用户的信息，那么就要保证无论什么情况WHERE后的语句都为真，1 = 1 就可以解决这个问题；
寻找注入方式：我们在输入的数据中插入‘’会发生什么呢？例如我们输入“ 1’ = '1 ”，那么last_name = ‘1’ = ‘1’，很明显，存在问题，查看全部的SQL语句，发现 SELECT * FROM users WHERE first_name = ‘John’ AND last_name = ‘1’ = ‘1’，出现了语法错误；
明确连接条件：如何才能让1=1成为一个单独的条件呢？我们考虑将OR注入进行，输入“ ’ OR ‘1’ = '1 ”，SQL语句变成了：SELECT * FROM users WHERE first_name = ‘John’ AND last_name = ’ ’ OR ‘1’ = ‘1’。很好，我们成功将OR ‘1’ = '1’注入了进去；
明确注入内容与格式：前面的’‘号中没有输入，那么我们就随意注入一个名字进去。例如题目中的Smith，输入“Smith’ OR ‘1’ =’ 1 ”。SQL语句为：SELECT * FROM users WHERE first_name = ‘John’ AND last_name = 'Smith ’ OR ‘1’ = ‘1’，注入成功！
通过答案：