一、实验概述
1.1 实验目标
掌握WEB前端与后端的基本操作，了解WEB基本的攻击手段。
1.2 实验内容
- Web前端HTML：能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。
- Web前端javascipt：理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。
- Web后端SQL：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表.
- Web后端PHP：编写PHP网页，连接数据库，进行用户认证.
- 最简单的SQL注入，XSS攻击测试.
- 登陆后可以发贴；会话管理。
二、实验步骤
2.1 Web前端HTML
STEP1
使用指令service apache2 start，打开Apache服务。
若使用指令后没有出现任何错误提示（即直接出现下一个命令行的输入接口），则成功开启Apache服务。
STEP2
在Kali端，打开浏览器，访问Kali机IP地址，看到以下界面，显示“It works”，即表示Apache服务成功开启。
STEP3
访问Kali主机的/var/www/html目录，此目录是Apache的目录，我们可以在之后的实验步骤中将成品的网站和网站中包含的必备信息（如图片、音频等）放在该目录或该目录的子目录中。
我们建立一个简单的带有表单的html文件。输入vi login.html，使用vi编辑器新建html文件，其内容如下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>20174314王方正</title>
<style type="text/css">
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1 align="center">Login</h1>
<center>
<form action="login.php" method="post" name="form_login">
<div align="center">USERNAME</div> <br></br>
<input id="username" name="username" style="height:35px;width:180px;" /> <br></br>
<div align="center">PASSWORD</div> <br></br>
<input type="password" id="password" name="password" style="height:35px;width:180px;"/> <br></br>
<div class="checkbox">
<label><div align="center"><input type="checkbox" value="remember-me" checked="checked">Remember me</div></label></div> <br></br>
<div align="center">
<input type="submit" style="height:30px;width:100px;" value="登录" onClick="return validateLogin()"/></div>
</form>
</center>
</body>
</html>
此处对使用的代码进行基本的说明。基于html的网页通常以<>表示标签的起始，</>表示标签的结束，可以在标签中修改相关的属性，改变标签内内容物的属性。此网站建立了一个含有背景（background.jpg），标题（Login），提示字样（username、password）、记忆登录（remember me）和按钮（登录）的页面，其中标题、提示字样等采用的居中的对齐方式，背景选择了一张动画图片，并将其置于/var/www/html目录下。
在浏览器输入/var/www/html/login.html，访问刚刚建立的网站，查看效果。
2.2 .Web前端javascipt
STEP1
先前建立的login.html只能实现基本的内容填写，不能实现空内容的判断，JavaScript可以在html的基础之上，实现空内容的判断。
我们新建立login_javascipt.html，在图示位置添加一段代码。
代码如下。
<script language="javascript">
function validateLogin(){
var sUserName = document.form_login.username.value ;
var sPassword = document.form_login.password.value ;
if ((sUserName =="") || (sUserName=="Your name")){
alert("请输入用户名!");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("请输入密码！");
return false ;
}
}
</script>
STEP2
在浏览器访问/var/www/html/login_javascript.html，尝试在登录时将用户名或密码置空，可以看到错误信息的提示。
2.3 Web后端MYSQL
STEP1
输入/etc/init.d/mysql start，开启MYSQL服务。看到OK提示字样，即SQL服务成功开启。
STEP2
输入指令mysql -u root -p，使用root用户进入MYSQL数据库。登录时需要输入登录密码，在图示位置输入默认密码password。
STEP3
特别注意，接下来将大量执行MYSQL语句。根据MYSQL语句的语法特点，每个语句的结尾处需要添加半角分号示意语句结束，否则容易出现错误提示，实验将无法正常完成。
使用指令show databases;，查看数据库的基本信息。可以看到有三个可用的数据库。
使用指令use mysql;，选择名为mysql的数据库使用。可以看到，在选择使用mysql数据库之后，命令行中的none变为了我们选中的数据库。
使用指令select user, password, host from user;，查看当前用户信息。MYSQL语句中的select语句，是一个查找语句，select后是查找的字段，from后是查找的表，故此语句的意思显示user表中user字段、password字段、localhost字段下的全部内容。这里我们可以看到user（即用户名）为root，password（即登录密码）为空，和我们一开始访问MYSQL数据库的情况一致。
使用指令update user set password=PASSWORD("20174314") where user='root';，修改root用户密码。MYSQL语句中的update语句，是一个更新语句，可以将指定字段的内容进行更新，使用where指定某个或某些位置。这里首先确定了在user表中进行修改，修改的内容是将password字段修改为PASSWORD类型的20174314，修改的范围是在user名为root的行修改。有了限制条件和约束，最后就将root的登录密码修改为了20174314。
使用指令输入flush privileges;，更新权限。
使用exit指令退出数据库，之后使用root用户，用我们修改之后的密码进行登录。
登陆成功，至此我们完成了MYSQL用户信息的查询和修改工作。
STEP4
在更新密码登录了root用户之后，我们要开始下一步的工作。
使用指令create database 20174314_database;，建立新的数据库。MYSQL语句中，create语句用于建立新的数据库、新的表、新的字段等。
使用show databases;，查看目前存在的数据库，和之前查询的结果不同，这里我们看到了我们新建立的数据库也被查询到。
使用use 20174314_database;，选中并使用我们新建的数据库。
使用create table login(username VARCHAR(20),password VARCHAR(20));，建立新表login，并在表中新建两个新字段，其中字段username为长度为20的VARCHAR型变量，字段password为长度为20的VARCHAR变量。
使用show tables;，查看当前数据库中的全部表。可以看到我们刚刚建立的新表就在其中。
使用insert into login value('20174314','20174314');，向表中插入数据。MYSQL语句中的insert语句是插入语句，这里选择向login表中插入username为20174314、password为20174314的数据。注意如果插入的数据不全，如共有三个字段而只插入两个数据，则其将会报错而不会未填写的数据置空。
使用select * from login;，查看表中的全部数据。MYSQL语句中的select语句可以进行广泛的查询，例如将字段限定替换为*，则可以查询整个表中的全部数据。
至此，完成了MYSQL中对表和数据库的基本操作。
STEP5
对于MYSQL最后的实践，我们尝试增加新的用户。
使用指令grant select,insert,update,delete on 20174314_database.* to wfz@localhost identified by "20174314";，我们将对20174314_database数据库进行select、insert、update、delete等权限赋予wfz用户，其访问的主机是localhost，登录密码为20174314。
使用指令mysql -u wfz -p，使用我们预设的密码登录MYSQL服务。看到一如之间的命令行界面，则我们建立新用户成功。
2.4 .Web后端PHP
STEP1
在之前提到的/var/www/html目录下，除了可以使用html网页之外，还可以使用php网页进行页面的跳转以及表单的提交等等。
我们建立一个php_test.php网页，简单测试php网页的功能，其网页源代码如下。
<?php echo ($_GET["a"]); include($_GET["a"]); echo "20174314 test"; ?>
打开浏览器，输入localhost/php_test.php，访问我们建立的php网站，查看网页内容。
在浏览器访问localhost/php_test.php?a=/etc/passwd，可以查看/etc/passwd文件的内容。
STEP2
联合之前编写的login.html，进行登录时的身份认证，真正实现网页的功能。
首先，调整login.html的表单提交方式，在图示位置添加标签，用post方式提交表单中的内容，并跳转到login.php网页连接数据库。
然后编写一个login.php，读取表单信息，访问数据库进行连接，并给出连接结果。代码如下。
<?php
$uname=$_POST["username"];
$pwd=$_POST["password"];
echo $uname;
$query_str="SELECT * FROM login where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "wfz", "20174314", "20174314_database");
if ($mysqli->connect_errno) {
printf("连接失败：%s\n", $mysqli->connect_error);
exit();
}
echo "连接成功！";
if ($result = $mysqli->connect_errno){
printf("连接失败：%s\n", $mysqli->connect_error);
exit();
}
else echo"<br>成功进入数据库！";
if ($result = $mysqli->query($query_str)) {
if ($result->num_rows > 0 ){
echo "<br> {$uname}:欢迎使用！<br> ";
}
else {
echo "<br>登录失败！<br> " ;
}
$result->close();
}
$mysqli->close();
?>
STEP3
配置好登录网页之后，我们在浏览器直接访问localhost/login.php，查看访问的结果。
由于login.php验证数据库需要来自login.html网页提交的表单，故而直接打开php网页而不提交表单的情况下，只能连接到数据库，连接将会失败。
访问login.html，输入保存在数据库中的用户名的密码后登陆。不出意外，将会跳转到成功连接的页面，即提交成功。
那么是不是任何人都可以进行访问呢？当然不是，输入一个数据库中不存在的用户名和密码，将会显示登陆失败。
2.5 SQL注入、XSS攻击
STEP1
在login.html网页登录时，将用户名填写为' or 1=1#，密码任意输入，尝试登录。
登录成功。这是由于输入的内容和我们之前填写的MYSQL语句和这里填写的用户名组合成为了select * from users where username='' or 1=1#' and password=''，而#之后的内容都被注释掉了，1=1是一个永真式，故而登陆条件永远成立，无需密码验证即可登录。
STEP2
在login.html网页登录时，将用户名填写为<img src="test.jpg"/>"，密码任意输入，尝试登录。
登录失败，但会显示我们在用户名中填写的图片。此处填写的图片必须存在于/var/www/html下，否则将不会显示。
2.6 发帖、会话管理
STEP1
修改login.php网页的部分内容，在登录成功之后启动会话，控制会话的存活时间为30秒，并在访问成功之后立即跳转到发帖页面post.html。
if ($result->num_rows > 0 ){ //对登录成功之后执行的语句进行修改
session_start(300); //启动会话，并将存活时间设置为30秒
$_SESSION["admin"] = true; //设置登录成功的admin变量
header("Refresh:0;url=post.html");//登录成功之后，立即跳转到post.html页面
}
STEP2
建立发帖的html页面与php页面。html页面基于登录页面修改，实现输入标题、输入内容的功能。php页面主要进行会话管理，如果登录都立即发表帖子，则回显博文内容；如果登录之后长时间（之前设置的30秒）未进行操作，则会话关闭，显示登录超时，并在3秒后跳转到login.html网页。
post.html网页代码如下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>20174314王方正</title>
<style type="text/css">
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form method="post" action="post.php">
<div align="center">WEB基础讨论系统</div>
<div align="center">标题:<input type="text" name="title"></div>
<div align="center">内容:<textarea name="content"></textarea></div>
<div align="center"><input type="submit" value="submit"></div>
</form>
</body>
</html>
post.php网页代码如下。
<?php
$admin = false;
session_start();
if (isset($_SESSION["admin"]) && $_SESSION["admin"] === true){
printf("登录过期，即将返回重新登录！");
header("Refresh:3;url=login.html");
}
else{
$txt=$_POST["content"];
$title = $_POST['title'];
$content = $_POST["content"];
printf("标题:");
echo $title;
echo '<br>';
printf("正文:");
echo $content;
}
?>
发帖页面效果如下。
发帖成功，回显博文内容。
发帖失败，显示即将跳转至登录页面。
整理的流程如下图所示。
三、实验收获感想
3.1 实验问题回答