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实操也提升了我的动手实践能力。
尽管遇到了不少问题，花了不少时间，最后都成功地解决了。总而言之这次实验让我受益匪浅。