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攻击。
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.2 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代码，实现数据库连接与登录：
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实操也提升了我的动手实践能力。
尽管遇到了不少问题，花了不少时间，最后都成功地解决了。总而言之这次实验让我受益匪浅。