# 20232321 2025-2026-1 《网络与系统攻防技术》实验8实验报告
1.实验内容
- (1)创建一个具有GET与POST方法,表单的HTML网页
- (2)在(1)的基础上添加JavaScript验证用户名、密码的规则,并尝试注入攻击
- (3)创建一个数据库
- (4)创建PHP网页,让(2)的网页连接数据库,可以进行用户认证
- (5)对(4)的网页进行SQL注入和XSS攻击测试
- (6)安装DVWA或WebGoat平台,并完成SQL注入、XSS、CSRF攻击。
2.实验目的
搭建WEB网页,进行前后端开发,体验注入攻击。
3.实验环境
3.1安装kali镜像的虚拟机,配置如下

4.实验过程
4.1Web前端HTML
4.1.1HTML的理解
- HTML(HyperText Markup Language,超文本标记语言)是用于构建网页结构的标记语言。它通过一系列标签定义网页的内容和布局,告诉浏览器如何展示文本、图片、链接、表单等元素。
- 表单是 HTML 中用于收集用户输入数据的组件,允许用户输入文本、选择选项、上传文件等,然后将数据提交到服务器进行处理(如登录、注册、搜索等)。
- GET 和 POST 是 HTTP 协议中两种常用的数据提交方法,用于客户端(浏览器)向服务器发送数据,核心区别在于数据传输方式和使用场景。
4.1.2HTML的实现
查看80端口是否开放,如图80端口开放。
netstat -tupln | grep 80

不需要额外安装,kali中自带了Apache。直接启动Apache,并确认服务状态,可以看见apache2处于active(活跃)状态。
systemctl start apache2
systemctl status apache2.service

进入/var/www/html目录下新建20232321_test.html文件,使用下列命令编写HTML文件,在文件夹中找到该文件双击打开。
vi 20232321_test.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20232321罗乙又网安实验8</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 30px auto;
padding: 0 20px;
}
.section {
background: #f8f9fa;
padding: 25px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.form-group {
margin-bottom: 18px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
}
input[type="text"],
input[type="password"],
input[type="search"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
.explanation {
background: #e9f7fe;
padding: 15px;
border-radius: 6px;
margin-top: 20px;
}
h3 {
color: #0066cc;
margin-top: 0;
}
</style>
</head>
<body>
<h1>20232321罗乙又网安实验8</h1>
<!-- POST登录功能 -->
<div class="section">
<h2>用户登录</h2>
<form action="" method="post">
<div class="form-group">
<label for="login-username">用户名</label>
<input type="text" id="login-username" name="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="login-password">密码</label>
<input type="password" id="login-password" name="password" placeholder="请输入密码" required>
</div>
<button type="submit">登录</button>
</form>
</div>
<!-- GET搜索功能 -->
<div class="section">
<h2>内容搜索(使用GET方法)</h2>
<form action="" method="get">
<div class="form-group">
<label for="search-keyword">搜索关键词</label>
<input type="search" id="search-keyword" name="query" placeholder="请输入要搜索的内容" required>
</div>
<button type="submit">搜索</button>
</form>
</div>
</body>
</html>

4.2 Web前端JavaScript
4.2.1 对JavaScript的基本功能和DOM的理解
- JavaScript是一种编程语言,主要用于给网页添加交互性,让网页从 “静态展示” 变成 “动态响应”。简单来说,JavaScript 是 “工具”,负责编写逻辑、处理交互、发送请求等。
- DOM是浏览器对网页结构的 “抽象表示”。简单说,就是浏览器会把 HTML 文档解析成一个由 “节点” 组成的树状结构(DOM 树),每个 HTML 标签、文字、属性等都会变成树中的一个节点。简单来说,就是将网页结构转化为 JS 可操作的对象,让 JavaScript能 “控制” 网页。

4.2.2 在(1)的基础上添加用户密码规则
添加 用户名验证:至少4位和密码验证:6-20位,至少含字母和数字的规则,当正常登录时会在用户点击登陆按钮后回显“欢迎+输入的用户名”。
<script>
// 登录验证函数
function validateLogin() {
// 获取输入值和错误提示元素
const username = document.getElementById('login-username').value.trim();
const password = document.getElementById('login-password').value.trim();
const usernameError = document.getElementById('username-error');
const passwordError = document.getElementById('password-error');
const welcomeMsg = document.getElementById('welcome-message');
// 重置提示信息
usernameError.textContent = '';
passwordError.textContent = '';
welcomeMsg.textContent = '';
// 验证规则
let isValid = true;
// 用户名验证:至少4位
const usernameReg = /^.{4,}$/;
if (!usernameReg.test(username)) {
usernameError.textContent = '用户名至少需为4位';
isValid = false;
}
// 密码验证:6-20位,至少含字母和数字
const passwordReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/;
if (!passwordReg.test(password)) {
passwordError.textContent = '密码需为6-20位,至少包含1个字母和1个数字';
isValid = false;
}
// 验证通过则回显欢迎信息(未防注入,用于测试)
if (isValid) {
// 注意:此处直接插入HTML,存在XSS注入风险,仅用于实验测试
welcomeMsg.innerHTML = `欢迎 ${username}`;
// 阻止表单默认提交(仅用于前端演示,实际开发需保留提交逻辑)
return false;
}
return isValid;
}
</script>
-
当用户名位数为3位,没有4位,显示提示词
![image]()
-
当密码为3位,不为6-20位,显示提示词
![image]()
-
当密码不含字母,显示提示词
![image]()
-
当正常登录时会回显“欢迎+输入的用户名”。
![image]()
4.2.3尝试注入攻击
-
(1)HTML 注入成功
用户名输入框输入:<h1> 管理员 </h1>
密码输入abc123
![image]()
-
(2)JavaScript 注入
用户名输入框输入:<script>alert('javaScript注入成功!')</script>
密码输入abc123
![image]()
4.3 Web后端MySQL基础
kali中自带MySQL不需要下载。使用systemctl start mysql打开MySQL服务,systemctl status mysql确认服务状态。
systemctl start mysql
systemctl status mysql

使用下述命令启动MySQL,建库、创建用户、修改密码、建表
#启动mysql
mysql
# 创建数据库
CREATE DATABASE 20232321_data;
#使用数据库
USE 20232321_data;
# 创建用户'user20232321' 设置密码为a123456
CREATE USER 'user20232321' IDENTIFIED BY 'a123456';
# 授予用户权限
GRANT ALL PRIVILEGES ON 20232321_data.* TO 'user20232321';
FLUSH PRIVILEGES;
# 修改用户密码为b123456
ALTER USER 'user20232321' IDENTIFIED BY 'b123456';
# 创建表
CREATE TABLE testtable (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
pwd VARCHAR(255) NOT NULL
);
# 插入数据
INSERT INTO testtable (name, pwd) VALUES ('luoyiyou', 'a123456');
# 查看表中所有内容
SELECT * FROM testtable;

2.4 Web后端编写PHP网页
2.4.1编写PHP文件
<?php
$host = 'localhost';
$dbname = '20232321_data';
$user = 'user20232321';
$password = 'b123456';
//创建数据库连接
$conn = new mysqli($host, $user, $password, $dbname);
//检查连接是否成功
if ($conn->connect_error) {
die("数据库连接失败: " . $conn->connect_error);
}
//获取POST数据
$username = $_POST['username'];
$password = $_POST['password'];
//使用查询语句进行查询
$sql = "SELECT * FROM testtable WHERE name='$username' AND pwd='$password'";
$result = $conn->query($sql);
//检查是否有匹配的记录
if ($result->num_rows > 0) {
echo "欢迎登录成功: " . $username . "!";
} else {
echo "用户名或密码错误";
}
//关闭结果集和预处理语句
$result->close();
$stmt->close();
//关闭数据库连接
$conn->close();
?>
2.4.2修改登录逻辑,进行用户认证
根据4.3中我数据库20232321_data的user20232321用户下存储的内容只有用户:luoyiyou
密码:a123456
在用户和密码与数据库中存储的一致时登录成功

在用户和密码与数据库中存储的一致时登录失败。

连接数据库成功,可以正常进行用户认证。
4.5 SQL注入与XSS注入
实现SQL注入,数据库20232321_data的user20232321用户下存储的内容只有用户:luoyiyou
密码:a123456。可是我们输入任意用户名,密码输入' OR '1'='1。发现结果也可以正常登录。

实现XSS攻击
当输入用户名' OR 1=1 # <img src=x onerror="alert('XSS攻击成功!你的Cookie:' + document.cookie)"> 。输入任意密码,甚至不符合要求。也可以登录成功,表明XSS攻击成功。

4.6 安装DVWA或WebGoat平台,并完成SQL注入,XSS,CSRF攻击
安装DVWA
sudo apt install dvwa

开启dvwa(注意没有空格喔)
dvwa-start

初始用户为:admin
初始密码为:password

到DVMA Security更改为low。

4.6.1 SQL注入部分
判断注入点:输入1,正常输出id为1的信息。

获取数据库名:输入1' UNION SELECT 1,database()-- ,可获取数据库名为dvwa。

获取表名:输入 1'UNION SELECT 1,group_concat(table_name) FROM information_schema.tables WHERE table_schema=database()-- 可获取表名有guestbook、access_log、security_log、users。

获取账号密码:输入1' UNION SELECT user,password FROM users--
可以看见admin用户的密码加密为5f4dcc3b5aa765d61d8327deb882cf99

在网上找到了一些MD5的解密网站,解密后得到密码为password

4.6.2 XSS部分
-
XSS(Dom)
选择下拉菜单中的选项,URL 会变为http://localhost/dvwa/vulnerabilities/xss_d/?default=English ,其中default参数是用户可控输入。
![image]()
我访问下面这个网站就可以出现,大家也可以调整default=后面的值进行攻击
http://localhost/dvwa/vulnerabilities/xss_d/?default=></option><script>alert('DOM XSS弹窗成功')</script>
,可以通过控制URL来控制弹窗显示,DOM XSS攻击成功。
![image]()
-
XSS(Reflected)
输入<script>alert('XSS攻击成功!')</script>,可以看见注入成功

- XSS(Stored)
随便填写name,在Message填写,点击 “Sign Guestbook” 提交。出现注入成功的提示符。点击左上角的刷新然后又出现了注入成功的提示符。如果每次刷新都会有注入成功的弹窗,那么可以认为存储型XSS攻击注入成功。
![image]()
![image]()
4.6.3 CSRF
DVWA 中的CSRF(跨站请求伪造) 漏洞测试,核心是利用用户已认证的身份,诱导其在不知情的情况下执行非预期操作(如修改密码、提交表单等)。
在 CSRF 页面输入新密码(如123456),点击 “Change”,观察浏览器地址栏的请求 URL:
http://localhost/dvwa/vulnerabilities/csrf/password_new=123456&password_conf=123456&Change=Change#
此时我在Test Creadentials中使用123456登录是可以登录成功的,说明现在的密码就是123456.


使用上述 URL,将password_new和password_conf改为攻击者指定的密码,我指定密码为20232321attack.生成一个新的URL。想办法让被攻击的人点击这个假的URL,由于我做测试,所以我假装被自己骗了,想打开这个网页看看
http://localhost/dvwa/vulnerabilities/csrf/password_new=20232321attack&password_conf=20232321attack&Change=Change

此时我在Test Creadentials中使用123456登录无法登录,我的密码就已经被修改了。而使用我指定的20232321attack就可以登录。所以不要点不知名的链接。


5.问题及解决方案
-
问题1:在使用PHP网页时不管输入正确还是错误都显示一样的报错,查询后了解到这是因为没有连接上数据库
![image]()
-
问题1解决方案:不要使用file登录,将php文件放入var/www/html中,在火狐搜索器中使用
http://localhost/20232321php.htm登录 -
![image]()
6.学习感悟、思考等
通过本次 Web 前后端开发与网络攻击测试实验,我对网络安全的重要性有了更为深刻的认知,也切实体会到 “攻防一体” 的技术逻辑与实践价值。
在实验的前端开发环节,我初步掌握了网页交互的基础原理。在后端 MySQL 数据库配置与 PHP 用户认证功能的开发中,让我熟悉了数据存储与交互的核心流程。在 DVWA 平台的实操中,从 SQL 注入获取数据库表名,每一次成功的攻击测试都让我警醒。这些攻击手段并非高深莫测的技术,更多的是利用了被攻击者的侥幸好奇心理以及开发者不规范编码习惯。
作为未来可能涉足开发或安全领域的学习者,规范编码习惯、建立 “安全左移” 的思维,将防护措施融入开发全流程,是避免安全漏洞的关键。












浙公网安备 33010602011771号