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.1Web前端HTML
2.1.1正常安装、启停Apache
1.kali自带了Apache，无需安装即可使用。
netstat -tupln | grep 80检测80端口是否被占用，systemctl start apache2 启动Apache，再次netstat -tupln | grep 80对比可以看到Apache已经启用并使用了80端口
2.systemctl stop apache2关闭Apache
2.1.2理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML
1.HTML，表单，GET与POST方法简介如下
HTML是一种用于创建网页结构和内容的标记语言，它通过一系列标签来定义文本、图像、链接等元素的组织和展示方式。
表单是HTML中用于收集用户输入的重要组件，它提供文本框、复选框、下拉菜单等交互元素，使得用户能够向服务器提交数据以供处理。
GET与POST方法是表单提交数据的两种HTTP请求方式：GET方法将表单数据附加在URL末尾发送，适合获取非敏感信息且数据量较小的场景；而POST方法将数据封装在HTTP请求体中传输，更适合提交大量数据或敏感信息，如用户登录凭证和文件上传等操作。
2.cd /var/www/html进入文件夹，vim创建并编辑html文件，内容如下
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>GET和POST最小实现</title><style>/* 基础样式重置 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f5f7fa;line-height: 1.6;padding: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;}h1 {color: #2c3e50;margin-bottom: 20px;text-align: center;}/* 表单容器样式 */.form-container {background-color: white;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);padding: 25px;margin-bottom: 30px;width: 100%;max-width: 500px;border-top: 4px solid;}.get-form {border-top-color: #3498db;}.post-form {border-top-color: #9b59b6;}/* 表单元素样式 */form {display: flex;flex-direction: column;gap: 15px;}label {font-weight: 600;color: #2c3e50;margin-bottom: 5px;}input {padding: 12px;border: 2px solid #ddd;border-radius: 6px;font-size: 16px;transition: border-color 0.3s;}input:focus {border-color: #3498db;outline: none;}button {background-color: #3498db;color: white;border: none;padding: 12px 20px;border-radius: 6px;font-size: 16px;font-weight: 600;cursor: pointer;transition: background-color 0.3s;margin-top: 10px;}.get-button {background-color: #3498db;}.get-button:hover {background-color: #2980b9;}.post-button {background-color: #9b59b6;}.post-button:hover {background-color: #8e44ad;}/* 方法标签样式 */.method-label {display: inline-block;padding: 4px 12px;border-radius: 20px;font-size: 0.9rem;font-weight: bold;margin-bottom: 15px;}.get-label {background-color: #e8f4fc;color: #2980b9;}.post-label {background-color: #f9e8fc;color: #9b59b6;}/* 响应式调整 */@media (max-width: 600px) {.form-container {padding: 20px;margin-bottom: 20px;}h1 {font-size: 1.5rem;}}</style>
</head>
<body><h1>GET和POST方法测试</h1><div class="form-container get-form"><div class="method-label get-label">GET方法</div><form method="GET" action="/process"><div><label for="searchQuery">搜索内容：</label><input type="text" id="searchQuery" name="query" placeholder="请输入搜索内容"></div><button type="submit" class="get-button">提交查询 (GET方法)</button></form></div><div class="form-container post-form"><div class="method-label post-label">POST方法</div><form method="POST" action="/process"><div><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名"></div><div><label for="email">邮箱：</label><input type="email" id="email" name="email" placeholder="example@domain.com"></div><button type="submit" class="post-button">提交表单 (POST方法)</button></form></div><div style="text-align: center; color: #7f8c8d; margin-top: 20px; max-width: 500px;"><p>GET方法将数据附加在URL中，适合搜索查询等场景</p><p>POST方法将数据放在请求体中，适合提交敏感信息</p></div>
</body>
</html>
systemctl start apache2启动Apache服务，在kali浏览器中输入http://localhost/20232309_1.html即可打开，界面如下
测试可知GET方法会将输入的数据附加在url中，而POST方法则不会
2.2Web前端javascipt
2.2.1理解JavaScript的基本功能，理解DOM
2.2.2在2.1的基础上，编写JavaScript验证用户名、密码的规则，在用户点击登陆按钮后回显“欢迎+输入的用户名”
1.在2.1的html代码中添加下列