Web前后端开发与网络安全测试实验报告
1. 实验内容
(1) Web前端HTML
能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。
(2) Web前端javascript
理解JavaScript的基本功能,理解DOM。
在(1)的基础上,编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击:利用回显用户名注入HTML及JavaScript。
(3) Web后端:MySQL基础
正常安装、启动MySQL,建库、创建用户、修改密码、建表
(4) Web后端:编写PHP网页
连接数据库,进行用户认证
(5) 基础攻击测试
最简单的SQL注入,XSS攻击测试
(6) 安全平台实践
安装DVWA或WebGoat平台,并完成SQL注入、XSS、CSRF攻击。
2. 实验过程与分析
2.1 Web前端HTML
2.1.1 Apache Web服务器的安装与配置
使用命令systemctl start apache2可启动Kali虚拟机中自带的Apache服务,systemctl status apache2.service可确认Apache状态。

2.1.2 HTML表单功能实现
进入/var/www/html目录下新建20232321zjz.html文件,使用vi编写HTML文件,在文件夹中找到该文件双击打开。

2.2 Web前端 JavaScript
2.2.1 JavaScript表单功能实现
在原代码的基础上进行修改,增加对于用户名和密码的限制规则。

成功结果如下:

2.2.2 注入攻击
(1)注入HTML
在用户名输入框中输入:管理员
“管理员”会被回显到页面.

(2)JavaScript注入
在用户名输入框中输入:

2.3 Web后端MySQL
使用命令systemctl start mysql启动kali虚拟机自带的MySQL,通过命令systemctl status mysql可查看服务的启用情况。从结果中可以看出MySQL正常启动。

输入以下命令,完成建库、创建用户、修改密码、建表等操作。
Mysql
创建数据库:CREATE DATABASE 20232410db;
使用数据库:USE 20222408db;
创建用户:CREATE USER 'user20232410' IDENTIFIED BY '050416zjz';
授予用户权限:GRANT ALL PRIVILEGES ON 20232410db.* TO 'user20232410';FLUSH PRIVILEGES;
修改用户密码:ALTER USER 'user20232410' IDENTIFIED BY '050416zjz!';
创建表:CREATE TABLE onetable (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
pwd VARCHAR(255) NOT NULL
);
插入数据:INSERT INTO onetable (name, pwd) VALUES ('zhujingze', '20232410zjz');
查看表中所有内容:SELECT * FROM onetable;

2.4 使用PHP连接数据库
PHP是为一种编写后端的语言,用于处理前端提交的表单数据。下载php工具:

原目录下新建一个php文件,编写php代码,实现数据库连接与登录:
<?php
$response = ['success' => false, 'message' => '' ];
// 仅允许POST请求(避免直接访问空白)
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {$response['message'] = '非法请求:仅支持POST方法';echo json_encode($response, JSON_UNESCAPED_UNICODE);exit;
}
// 1. 获取并验证POST数据(防空值)
$username = trim($_POST['username'] ?? '');
$password = trim($_POST['password'] ?? '');
if (empty($username) || empty($password)) {$response['message'] = '用户名或密码不能为空';echo json_encode($response, JSON_UNESCAPED_UNICODE);exit;
}
// 2. 创建数据库连接
$conn = new mysqli($host, $user, $db_password, $dbname);
if ($conn->connect_error) {$response['message'] = '数据库连接失败:' . $conn->connect_error;echo json_encode($response, JSON_UNESCAPED_UNICODE);exit;
}
// 3. 保留原SQL拼接逻辑
$sql = "SELECT * FROM onetable WHERE name='$username' AND pwd='$password'";
$result = $conn->query($sql);
// 检查查询是否成功
if (!$result) {$response['message'] = 'SQL查询错误:' . $conn->error;$conn->close();echo json_encode($response, JSON_UNESCAPED_UNICODE);exit;
}
// 4. 验证登录结果
if ($result->num_rows > 0) {$response['success'] = true;$response['message'] = '登陆成功!';
} else {$response['message'] = '用户名或密码错误';
}
// 5. 关闭资源
$result->close();
$conn->close(); // 关闭数据库连接
// 6. 返回JSON结果
echo json_encode($response, JSON_UNESCAPED_UNICODE);
exit;
?>
登录成功如图:

2.5 基础攻击测试
2.5.1 SQL注入
随机输入用户名,密码输入' OR '1'='1,即可成功登录。

2.5.2 XSS攻击
用户名输入< script>alert("xss atack succeed.");< /script>,密码不变。正常应该弹出"xss atack succeed.",但是我这里没有反应。查询AI,得到回复是firefox有识别此类XSS攻击的能力,并且会自动进行屏蔽。
2.6 使用WebGoat平台,并完成SQL注入、XSS、CSRF攻击
2.6.1 完成SQL注入攻击
我做了9,10,11,12,13五题
(1)第九题
一个简单的永真条件加引号闭合即可

(2)第十题
同理

(3)第十一题
同理

(4)第十二题
这题的关键是分号闭合,并且在输入中自己编写sql代码,完成薪水的修改。

(5)第十三题
这题依旧需要分号闭合,同时还需要用到“--”注释功能,注释掉最后的引号。

2.6.2 完成XSS攻击
我完成了7,10,11题
(1)第七题
该部分是反射型XSS攻击,需要通过XSS攻击显示弹框或在终端打印信息。
输入。注入成功:

(2)第十题
此题根据AI的提示,得出答案可在js目录下寻找。

(3)第十一题
在URL中输入http://127.0.0.1:8080/WebGoat/start.mvc#test/,打开控制台,查找随机数:

可以看到为504614711。
输入后成功通关:

2.6.3 完成CSRF攻击
我完成了第八题:创建一个新的账号作为攻击者,登录后在此界面点击提交即可成功,

3. 问题及解决
问题一:
由于不熟悉html与php语言,不熟悉web的相关知识,花了很长时间在调代码上。前端始终无法连接后端。
问题解决一:
借助AI修改与其他同学的代码,成功学习了相关的知识。
问题二:
在进行XSS注入攻击时没有弹出相应的窗口。
问题解决二:
查询资料发现应该是firefox浏览器拥有检测XSS攻击的能力,自动进行了过滤,因此无法得出正确结果。
问题三:
在做第十三题时,由于存在最后的单引号,我没有注意到,导致一直出错。
问题解决三:
使用“--”注释掉单引号。
4. 学习感悟
本次实验覆盖Web前后端开发与网络安全测试,从搭建Apache、MySQL环境,编写HTML 表单、PHP后端认证,到实践 SQL注入、XSS等攻击与防御,让我直观理解了Web开发核心流程与网络攻防安全隐患。通过WebGoat实操也提升了我的动手实践能力。
尽管遇到了不少问题,花了不少时间,最后都成功地解决了。总而言之这次实验让我受益匪浅。