20222318 2024-2025-1 《网络与系统攻防技术》实验八实验报告
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
在kali虚拟机上输入命令netstat -tupln | grep 80检查端口是否被占用，发现没有，说明http服务是关闭的。
再用systemctl start apache2开启Apache，用systemctl status apache2确认服务状态，图中看出Apache正常启动。
进入/var/www/html目录下，输入命令vi 20222408msy.html创建并编辑html文件，复制以下html代码。这个html文件包含两个表单，涉及GET、POST方法，但是没有进一步处理。
html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单示例</title>
<style>
/* 整体页面 body 样式 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3eaf6; /* 更换背景颜色 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* 容器样式，采用左右分栏布局 */
.container {
display: flex;
width: 800px;
height: 500px;
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* 左侧栏样式，放置图片和一些说明文字 */
.left-section {
flex: 1;
background-color: #3498db; /* 新的左侧栏背景色 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
padding: 30px;
text-align: center;
}
.left-section img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 20px;
}
.left-section h2 {
font-size: 24px;
margin-bottom: 10px;
}
/* 右侧栏样式，放置表单内容 */
.right-section {
flex: 1;
background-color: #fff;
padding: 40px;
}
/* 表单组通用样式 */
.form-group {
margin-bottom: 25px;
position: relative;
}
/* 标签样式 */
.form-group label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 15px;
font-weight: bold;
color: #555;
}
/* 输入框样式 */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
width: calc(100% - 115px); /* 根据标签宽度等调整输入框宽度 */
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
transition: border-color 0.3s ease;
}
/* 输入框聚焦时样式 */
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus {
border-color: #3498db;
}
/* 提交按钮样式 */
.form-group button[type="submit"] {
width: calc(100% - 115px);
padding: 12px 0;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.form-group button[type="submit"]:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<div class="left-section">
<img src="1.jpg" alt="Profile Picture">
<h2>欢迎注册</h2>
<p>在这里开启您的新体验</p>
</div>
<div class="right-section">
<form action="/submit-form" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">注册（Post）</button>
</div>
</form>
<form action="/get-data" method="get">
<div class="form-group">
<label for="search">搜索</label>
<input type="text" id="search" name="search" required>
<button type="submit">搜索（Get）</button>
</div>
</form>
</div>
</div>
</body>
</html>
在文件系统中找到该html文件，双击打开后效果如下：
2.2 Web前端javascipt
-
JavaScript：一种广泛用于网页开发的高级编程语言，具有动态性、交互性，能为网页添加动态效果、实现交互逻辑，还可用于服务器端编程等。
-
DOM：即文档对象模型，是 HTML 和 XML 文档的编程接口，将网页文档表示为树状结构，通过它 JavaScript 等脚本语言可动态访问和操作网页内容及结构。
（1）在2.1的基础上，编写JavaScript验证用户名、密码的规则在用户点击登陆按钮后回显“欢迎+输入的用户名”.
加入javascript代码块后的html代码如下：
加入javascript后的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单示例</title>
<style>
/* 整体页面 body 样式 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3eaf6; /* 更换背景颜色 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* 容器样式，采用左右分栏布局 */
.container {
display: flex;
width: 800px;
height: 500px;
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* 左侧栏样式，放置图片和一些说明文字 */
.left-section {
flex: 1;
background-color: #3498db; /* 新的左侧栏背景色 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
padding: 30px;
text-align: center;
}
.left-section img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 20px;
}
.left-section h2 {
font-size: 24px;
margin-bottom: 10px;
}
/* 右侧栏样式，放置表单内容 */
.right-section {
flex: 1;
background-color: #fff;
padding: 40px;
}
/* 表单组通用样式 */
.form-group {
margin-bottom: 25px;
position: relative;
}
/* 标签样式 */
.form-group label {
display: inline-block;
width: 100px;
text-align: right;
margin-right: 15px;
font-weight: bold;
color: #555;
}
/* 输入框样式 */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
width: calc(100% - 115px); /* 根据标签宽度等调整输入框宽度 */
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
transition: border-color 0.3s ease;
}
/* 输入框聚焦时样式 */
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus {
border-color: #3498db;
}
/* 提交按钮样式 */
.form-group button[type="submit"] {
width: calc(100% - 115px);
padding: 12px 0;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.form-group button[type="submit"]:hover {
background-color: #2980b9;
}
</style>
<script>
function submit_login(event) {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var usernameRegex = /^.{4,}$/;
var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
if (!usernameRegex.test(username)) {
alert('用户名必须在4个字符以上');
event.preventDefault(); // 阻止表单默认提交
return;
}
if (!passwordRegex.test(password)) {
alert('密码必须是6个字符以上，包含至少一个字母和一个数字');
event.preventDefault(); // 阻止表单默认提交
return;
}
document.write('欢迎 ' + username);
};
</script>
</head>
<body>
<div class="container">
<div class="left-section">
<img src="1.jpg" alt="Profile Picture">
<h2>欢迎登录</h2>
<p>在这里开启您的新体验</p>
</div>
<div class="right-section">
<form action="javascript:void(0);" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button onclick="submit_login(event)" type="submit" >登录（Post）</button>
</div>
</form>
<form action="javascript:void(0);" method="get">
<div class="form-group">
<label for="search">搜索</label>
<input type="text" id="search" name="search" required>
<button type="submit">搜索（Get）</button>
</div>
</form>
</div>
</div>
</body>
</html>
最终实现的效果如下（因为换成了登录，所以把邮箱去掉了）。
填入空表单直接点击登录后：
输入符合要求的用户名，不输入密码直接点击登录后：
正确按照格式输入账号密码（不需要输入已注册的账号，此处还没有数据库，无法和后台进行比对是否存在该用户），再点击登录后：
（2）尝试注入攻击：利用回显用户名注入HTML及JavaScript。
- 在用户名处输入
<h1>lzf</h1>，输入任意符合要求的密码。
成功实现HTML注入。
- 在用户名一栏填入
<script type="text/javascript"> alert("lzf") </script>，输入任意符合要求的密码，成功实现JavaScript注入。（alert里双引号单引号都可以，javascript语法并不严格）
2.3 Web后端 ：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
- Kali自带mysql（又或是之前做实践提前下了）。输入
systemctl start mysql启动mysql服务。输入命令systemctl status mysql确认服务已开启。
- 输入以下命令，完成建库、创建用户、修改密码、建表等操作。
mysql建库
mysql
-- 创建数据库
CREATE DATABASE 20222318db;
-- 使用数据库
USE 20222318db;
-- 创建用户
CREATE USER '20222318' IDENTIFIED BY 'LZF';
-- 授予用户权限
GRANT ALL PRIVILEGES ON 20222318db.* TO '20222318';
FLUSH PRIVILEGES;
-- 修改用户密码（虽然这里并没改，但是语法是这个）
ALTER USER '20222318' IDENTIFIED BY 'LZF';
-- 创建表（图中的箭头是指回车了，请继续输入，SQL语句一定要以分号结尾，如果不小心多打了一个回车也没事，就是要写个分号）
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 ('longzhenfeng', '20222318lzf');
-- 查看表中所有内容
SELECT * FROM onetable;
顺带一提：为了防止密码不符合html文件所要求的密码，后面又改了一下密码（）；
2.4 Web后端：编写PHP网页，连接数据库，进行用户认证
先输入命令apt-get install php下载php。PHP 是一种广泛使用的开源通用脚本语言，尤其适用于 web 开发领域，在 Kali 虚拟机中下载 PHP 后，可以用于渗透测试、开发安全工具、搭建特定的测试环境等。
PHP 代码需要在 PHP 解释器的环境中才能被执行。下载并安装 PHP 后，系统会安装 PHP 解释器以及相关的库和模块，这些组件共同构成了 PHP 的运行环境。当你访问一个.php文件时，服务器会将该文件交给 PHP 解释器进行处理，PHP 解释器会解析文件中的代码，并根据代码的逻辑生成相应的 HTML 输出，然后返回给客户端浏览器。
在 Kali 虚拟机中写 PHP 代码通常需要创建一个以.php为后缀的文件，而下载 PHP 是为了让系统能够解释和执行这个文件。
在/var/www/html目录下输入命令``编写以下php代码，实现连接数据库和用户认证。（图中目录不对的问题在问题与解决方案部分提到了）
PHP代码
<?php
$host = 'localhost';
$dbname = '20222318db';
$user = 'user20222318';
$password = '2318LZF';
//创建数据库连接
$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 onetable 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();
?>
在html代码中，修改登录表单的属性如下，删除按钮的onclick属性。
浙公网安备 33010602011771号