一、实验概述
没有网络安全就没有国家安全，就没有经济社会稳定运行，广大人民群众利益也难以得到保障。在今天这样一个信息化程度高度发达的时代，网络空间安全早已成为了一个炙手可热的话题，也是斗争各方密切关注的领域之一。网络空间安全事关国家长治久安、社会经济发展稳定大局以及广大人民群众的福祉和切身利益，也正因此，网络空间安全加速演变为战略威慑与控制的新领域、意识形态领域斗争的新平台、维护经济社会稳定的新阵地、信息化局部战争的新战场。
作为未来为人民服务事业的接班人，我们所要面临的网络空间安全斗争形势是严峻的、不容乐观的、必须时刻警惕的，掌握必要的网络安全基础知识是使命担当对我们的要求。这次实验的Web基础和下个实验的Web安全都是有关于网络空间安全的内容，从基础铺垫到实践应用，对我们学习网络设计、运营、维护等知识大有裨益。
这次实验内容围绕Apache、HTML、JS、MySQL、PHP展开，具体内容如下。
二、实验内容
(1).Web前端HTML
·能正常安装、启停Apache
kali默认已安装Apache，可直接使用。
执行service apache2 start命令打开Apache服务；
使用netstat -aptn查看端口信息，如果80端口被Apache2监听，则启动成功，如下图所示。
图1
如图1所示，apache2启动成功，监听端口为默认的80端口，使用的协议是tcp6，进程号PID为1320，进程名就叫apache2。
·理解HTML，理解表单，理解GET与POST方法
关于HTML我们都耳熟能详，它是我们通往和接触WEB世界的第一把钥匙，作为超文本标记语言，它超脱了一般文本的范围，能通过各种单双标记对网页中的文本、图片、音视频等内容进行描述，还能实现页面内外跳转。在现代网页技术运用中，HTML会结合其他多种语言共同完成一个网站的设计和运维。
·编写一个含有表单的HTML
<div class="context">
<div class="container">
<h1>Welcome</h1>
<form action="" method="get">
<input type="text" name="userid" placeholder="请输入账号"/>
<input type="password" name="userpw" placeholder="请输入密码"/>
<button form action="">注 册</button>
<button type="submit">登 陆</button>
</form>
</div>
</div>
以上是截取了HTML的表单代码部分，里面包括两个文本输入框和一个提交按钮，表单提交方法是get。将HTML网页连同其CSS文件、图片文件一起放到kali的/var/www/html目录下，这里是apache2的根目录，这样以后在浏览器输入kali的IP地址再加上HTML网页名，就可以在局域网内任何一台终端打开这个HTML网页，如图2、3所示。
图2 Windows端登录
图3 移动端登录
(2).Web前端javascipt
理解JavaScript的基本功能，理解DOM
JS是基于网页行为的编程语言，虽然它是作为基于对象的Web页面脚本语言而出名的，但是它也被用到了很多非浏览器环境中。由它可以定义许多网页事件、函数，从而实现更丰富更全面的网页功能。DOM是文档对象模型，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。
编写JavaScript验证用户名、密码的规则
图4
图4是什么都不输入的情况下，由JS检测后给出的提示，实现这一功能的JS代码如下。
图5
在图5中，框1、2分别是对用户名和密码的检测，在这里验证的是用户名或密码是否为空，思路都是类似的，由var类型元素name1、password分别获取text1和text2的值，这里的text1和text2分别是用户名和密码输入框的id号，在表单代码中定义。然后让name1和password和“”也就是空白相比较，如果相等则返回false，否则返回true，如此来判断用户是否输入了数据。图5中的框3定义了一个检查函数，功能就是检查用户是否输入了用户名和密码，是的话就返回true，否则就是false。
图6
图6所示的代码，和表单提交有关。从图中可以看出，rev函数由onclick事件触发，也就是当鼠标点击指定的button按钮Log in时，rev（）函数会触发，这个函数位于图6两个箭头的交汇处，它就是通过判断check（）函数的真值来决定执行什么事件。图4所示的结果，就是check（）真值为false导致的，因为用户名和密码都为空，根据JS代码可知check（）返回值为真当且仅当用户名和密码都不为空，这时候rev函数才会将表单信息提交给servlet，进行连接数据库的操作并进行后续的身份认证。
function myReload() { document.getElementById("CreateCheckCode").src = document.getElementById("CreateCheckCode").src+ "?nocache="
+ new Date().getTime(); }
<a href="" οnclick="myReload()" style="font-size:18px;color:red;margin-left:20px;">CHANGE</a>
上方红色代码部分定义的函数，由onclick事件触发并作用在蓝色代码部分，用于刷新登陆界面的验证码，图7即为刷新效果。
图7
图8
图8是另一种用户名验证思路，在刚才的登录页面只是验证输入是否为空，图8所示的是注册页面，在这里设计了较严格的验证方法，拿用户名验证来说，如图8左半边所示，共有3个验证项，分别验证用户名是否为空、是否为8位学号、是否包含非法字符。div是一种var类型的元素，它被用来表示一段span区域，如果条件满足它将调用innerHTML函数进行字符串显现，也就是图8右半边所示的那些红字部分。name1是用户所填的表单中text1这个输入框的值，也就是在用户名这一栏中所填的值，验证用户名是否为8位学号以及是否包含非法字符，都是看name1的长度是否为8以及name1中的每一位是否都是0到9之间的整数（包括边界），后者还用到了for循环。图8右半边测试的是包含非法字符，因为在预先的设定中用户名只能是数字而不能是其他。后面对密码进行验证也是非常类似的道理，只要把用户名验证的第二条稍微变一下，把不等于8改成一个谁道谁的区间即可。
图9
之前无论是用户名还是密码的验证，都是只从表单里面取了一个值然后进行各种比较判断，而如果要像图9那样判断两次输入密码是否一致，则要从表单里面取两个值，分别是text2和text3的值，然后让这两个值进行比较进而判断两次输入的密码是否一致。和前面几个验证功能一样，这个功能也是被封装在一个JS函数里面，检测函数在相应的输入框中进行onblur事件检测，当元素失去焦点时触发，也就是输入完成之后切到别的输入框时就会触发检测，如果发现问题就可以纠正。
(3).Web后端
MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
·在Windows上我们之前操作过XAMPP，这是一个功能强大的建站集成软件包。上学期我们曾在这上面进行过数据库操作，比较容易上手。这里简单回顾一下步骤。
图10
开启Apache以及MySQL服务,观察到进程ID以及端口正确监听后即可放心打开MySQL数据库了，点击MySQL后面的“Admin”按钮即可进入数据库。
图11
图11中框1表示新建数据库，框二表示在指定数据库下新建数据表。图11右侧是在指定数据表内新增数据的情形，这个数据表有四个表项，在最后一列“空值”里面填写内容即可完成记录的新增。
图12
图11的插入新记录是在图形化界面自动操作的，最终还是要落实到SQL语句来执行，图12就是SQL语句执行界面，下方有“SELECT*”“SELECT”“INSERT”等按钮，点击就会自动生成相应的SQL语句格式，然后根据自己的需求增删内容最后点击执行，即可成功执行SQL语句。
·本实验重点还是在kali里面完成数据库相关操作。
图13
依次输入命令/etc/init.d/mysql start开启root服务、mysql -u root -p以root身份登录MySQL，在输入密码的时候输入password，这是root用户名的默认密码。这样就可以成功以最高身份进入MySQL服务。root用户的密码虽然说是password，但实际上到后面查看的话root用户默认是没有MySQL登陆密码的，在这里不论密码输什么应该都能登上，我随机试过输入password以外的其他密码，也成功了。
输入show databases;查看MySQL服务器上有哪些数据库。
图14
输入命令的时候切记在后面加上分号，否则就是输入不完整，如图14所示一直出现→这个符号。注意到图14中有名为mysql的数据库，我们要选择的就是它。输入use mysql予以选中。
图15
输入命令select user, password, host from user;查看这一库中名为user的数据表中存储的用户信息。结果如图16所示，只有一个root用户——本地主机，密码为空，而不是password，验证了前面的想法。
图16
输入命令UPDATE user SET password=PASSWORD("19990624") WHERE user='root';将root用户的密码设置为19990624，修改成功，结果如图17所示。
图17
下面可以退出数据库，用新密码重新登陆root用户。使用命令create database login20174313;创建一个新的数据库，然后使用命令use login20174313;进入该库。
使用命令create table user20174313 (username VARCHAR(20),password VARCHAR(20));新建一个名为user20174313的数据表，其中包含两个表项，类型均为VARCHAR，长度为20。执行结果如图18所示。
图18
数据表建成以后，使用命令insert into user20174313 values('20174313','zb');向新表中入数据，从含义上理解就是新建了一条用户名为20174313、密码为zb的用户记录。这条记录要牢记，后面使用php连接数据库验证客户端提供的表单信息时还要用到。
下面可以新增一个新用户zb4313，将当前数据库也就是数据库login20174310的root权限（包括select,insert,update,delete）授权给新用户zb4313。命令是grant select,insert,update,delete on login20174313.* to zb4313@localhost identified by "19990624";通过这条命令，就把名为login20174313的数据库的root权限赋给了一个新用户zb4313，被19990624识别就相当于设置了登录密码。下面可以用新用户身份登录数据库，输入命令mysql -u zb4313 -p。结果如图19所示。
图19
(4).Web后端
编写PHP网页，连接数据库，进行用户认证
<?php
$uname=$_POST["userid"];//中括号里面填login.html表单中用户名的name属性
$pwd=$_POST["userpw"];//中括号里面填login.html表单中密码的name属性
echo $uname;
$query_str="SELECT * FROM user20174313 where username='$uname' and password='$pwd';";//两个引号是数据表表项名称
$mysqli = new mysqli("127.0.0.1", "root", "19990624", "login20174313");//四个引号先后是回送地址，数据库用户名，对应密码，数据库名称
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
echo "connection ok!<br>";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {
if ($result->num_rows > 0 ){
echo "<br>Welcome!!! <br> ";
}
else {
echo "<br> login failed!!! <br> " ; }
/* free result set */
$result->close();
}
$mysqli->close();
?>
上述代码保存为login.php，并放在/var/www/html目录下。此时还要注意把login.html中的form action的提交对象设置为login.php。上述代码中SQL查询语句在数据表中查询时比对的用户名和密码分别是uname和pwd，这两个值在代码的第二三行获取，数据来源是login.html的表单中用户名和密码的name属性。
下面在同一局域网下的另一台主机访问kali的login.html网页，输入不同的登录信息测试PHP的执行结果。
图20
图20的结果显示PHP代码执行到了Welcome！！！——表示用户名密码验证无误、登录成功。这里输入的登录信息就是前面在MySQL中新增的用户记录。
图21
图21显示的是登录失败的结果，这就是输入了错误的登录信息的结果。
图22
图22显示的也是登陆失败的结果，但和图21又有所不同。因为PHP页面第一次返回内容的时候返回的是客户端输入的用户名，图21返回的用户名还是20174313，表示用户名存在但密码错误，图22返回的用户名是好几个1，从MySQL那里走过来我们知道数据库里面没有这个用户名，所以不论密码怎么输都不能成功登录。如果要进一步优化PHP代码，可以区分一下用户名是否存在。
(5).最简单的SQL注入，XSS攻击测试
SQL注入攻击测试
图23
从图23的结果来看，网页返回的用户名是一个正则表达式' or 1=1#，这显然不是一个正经的用户名，而是精心设计的一个SQL注入攻击套路。在登录界面的用户名输入框理输入前面提到的那个正则表达式，采用该表达式即可跳过数据库验证。输入' or 1=1#时，用于在数据库中SELECT用户信息的SQL语句变成了select * from users where username='' or 1=1#' and password='';其中#相当于注释符，会把后面的内容注释掉，也就是不再管密码是什么了。而1=1是永真式，在或语句中这个条件永远成立，所以不管密码是什么，这都能够登录成功。
XSS攻击测试
XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。
这里的测试形式就是，把一张图片放进那个老生常谈的目录/var/www/html下，我放的图片名字叫image.jpg，然后在登录页面的用户名输入框中输入<img src="image.jpg" />，密码随便输即可，这样以后点击登录按钮，在跳转到的PHP网页即可看到自己刚才放置的image.jpg图片。但是这样就不会显示登录成功了，因为放图片确实没有办法绕过数据库验证，可以在此基础上加上SQL攻击测试时输入的那个正则表达式，那个表达式可以绕过数据库验证。所以在登录界面用户名输入框中输入<img src="image.jpg" />'or 1=1#，可以绕过验证成功登录，并且可以看到自己放入apache根目录下的图片。结果如图24所示。
图24
三、实验总结
·基础问题回答
（1）什么是表单？
表单是浏览器收集用户输入信息的工具，用户可以通过表单输入各种类型的数据，浏览器会收集这些信息并发往指定的action。常见的就是登录页面、注册页面的表单。
（2）浏览器可以解析运行什么语言？
呈现给用户的浏览器界面属于前端范畴，浏览器可以解析HTML、CSS、JavaScript等语言。
（3）WebServer支持哪些动态语言
服务器端就是后端范畴，支持PHP、JSP、.NET、数据库语言等。
·实验总结
这次试验我觉得需要特别注意的就是从外面复制到kali里面的图片、文件如果在执行的时候遇到了问题，可能就是因为权限不足导致的，可以用chmod 777 文件名这个格式给赋一下权，这样无论是用户本人、同组用户还是其他用户都能拥有对该文件的全部权限。比如在HTML中要调用的背景图片，复制到kali里面以后在网页中无法显示，就是权限受阻了，直接把权限赋满即可。
这次实验是在结合以往学过的网页设计的知识的基础上进行了开拓创新，既有温故也有知新，温习了网页设计与制作，更新了我对网页设计的认识，拓展了我对于网页设计的知识边界，深化了我对Web安全的理解和重视程度，很有收获！