一、实践目标
1.1实践内容
- Web前端: HTML
- Web前端: Javascipt
- Web后端: MySQL基础
- Web后端: 编写PHP网页
- SQL注入: XSS攻击测试
1.2实践要求
- Web前端: HTML能正常安装、启停Apache
- 理解HTML，理解表单，理解GET与POST方法
- 编写一个含有表单的HTML
- Web前端: Javascipt
- 理解JavaScript的基本功能，理解DOM
- 编写JavaScript验证用户名、密码的规则
- Web后端: MySQL
- 基础正常安装、启动MySQL，建库、创建用户、修改密码、建表
- Web后端: 编写PHP网页
- 连接数据库，进行用户认证
- 最简单的SQL注入: XSS攻击测试
- 用户能登陆，登陆用户名密码保存在数据库中，登陆成功显示欢迎页面
二、基础知识
- GET/POST
- GET把参数包含在URL中，POST通过request body传递参数；
- GET产生一个TCP数据包；POST产生两个TCP数据包；
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- SQL注入
- 通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串达到欺骗服务器执行恶意的SQL命令，即利用现有应用程序，将(恶意的)SQL命令注入到后台数据库引擎执行的能力，可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句；
- 输入的用户名' or 1=1#中#相当于注释符，把后面的内容都注释掉，1=1是永真式，条件永远成立，和代码中select语句组合后变成select * from login5314_table where username='' or 1=1# ' and password=''，不管密码是否输入正确，都能够成功登录。
- XSS攻击
- 跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆，XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中，比如这些代码包括HTML代码和客户端脚本，攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)，这种类型的漏洞由于被黑客用来编写危害性更大的phishing攻击而变得广为人知。
三、实践步骤
3.1 Web前端HTML
kali默认已安装Apache，可直接使用
service apache2 start
命令打开Apache服务
使用
netstat -aptn
查看端口信息，如果80端口被Apache2监听，则启动成功。
图中显示80端口已经呗apache2监听。
如果80端口被其它应用占用，可以使用 netstat -tupln | grep 80 查看占用80端口的应用PID, 然后 kill processID(进程ID) 关闭此进程，再次开启Apache即可；也可以通过修改ports.conf的方法，把Apache的默认端口从80改为其他的未被占用的端口。
测试1：浏览器打开 127.0.0.1 ，可正常打开Apache介绍网页
测试2：使用命令
vi /var/www/html/test.txt
随意输入字符串,浏览器打开 127.0.0.1/test.txt 可看到test.txt的内容
html编程
访问Apache工作目录 cd /var/www/html ，新建一个4310.html文件
这里直接使用上学期web课程的部分代码及图片，未作修改（需将权限改为其他人可读才能正常访问）
代码如下所示
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { background-size: 2000px; } form { width:100%; height:700px; margin-top: 0px; background:#008B8B; } div { display:inline-block; padding-top: 80px; padding-right: 20px; } h2 { font-family: "微软雅黑"; font-size: 40px; color:black; } #log { color:blue; } </style> <script language="javascript"> function mycheck() { var name=""; var name1=""; name=login.user.value; name1=login.pw.value; if(name.length==0) { alert("用户名称不能为空！！"); return false; } else if(name1.length==0) { alert("密码称不能为空！！"); return false; } else{ alert("登入成功"); document.login.action = "http://www.baidu.com" } } </script> </head> <body background="微信图片_20191210154908.jpg" > <form name="login" onsubmit="mycheck()"> <center> <div> <h2> 登录注册界面！ </h2> <p> 用户名:<input type="text" name="user"/> </p> <p> 密 码:<input type="password" name="pw"/> </p> <p> <input id=log type="submit" value="登录" /> </p> <p> 还没有账号？<a href="注册.html">立即注册</a> </p> </div> </center> </form> </body> </html>
在网页中输入
127.0.0.1/4310.html
得到如下页面
3.2Web前端javascipt
原理：JavaScript是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
使用JavaScript来编写一个验证用户名、密码的规则，用户名及其密码不能为空，登陆成功会跳转至百度（上述代码中已包括此功能）
效果测试如图：
3.3MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表.
使用
/etc/init.d/mysql start
启动mysql服务
使用root权限进入mysql，使用指令
mysql -u root -p
其默认密码为 password
输入指令
show databases;
查看当前数据库的信息
输入指令
use mysql
选择使用mysql这个数据库
输入指令
select user ， password, host from user;
查看当前用户的信息。
输入
update user set password=PASSWORD("20174310srq") WHERE user='root';
更改用户名root的密码
修改成功
退出后使用新密码重新登陆，同时使用指令
create database login20174310;
创建web网页所使用的数据库。创建成功后对其内容进行设置
use login20174310;
使用之前创建的数据库。
建立数据库表（用来存储用户名及密码）
create table user20174310 (username VARCHAR(20),password VARCHAR(20));
使用指令
show tables;
查看当前已有表
使用
insert into user20174310 values('20174310','srq');
插入数据。
使用指令
select * from user20174310;
查询表中的数据
增加新用户，将数据库login20174310的root权限（包括select,insert,update,delete）授权给当前用户
grant select,insert,update,delete on login20174310.* to root@localhost identified by "123456";
(grant select,insert,update,delete on 数据库.* to 用户名@登录主机(可以是localhost,也可以是远程登录方式的IP) identified by "密码";)
随后退出当前用户，重新进入。
登录成功。
3.4Web后端：编写PHP网页，连接数据库，进行用户认证。
新建一个PHP测试文件，在 /var/www/html/ 文件夹下，新建一个 vim 4310.php，输入如下内容
<?php $user=($_POST["user"]); $psw=($POST["pw"]); echo "welcome"; echo $user; ?>
在浏览器网址栏中输入 127.0.0.1/4310.php ，可看到文件的内容:
利用PHP和mysql，上学期含表单的代码找不着了，所以写了一个比较简单的前端代码。
更改后的登陆页面代码为
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>20174310</title> <style type="text/css"> body { background-image: url(微信图片_20191210154908.jpg); background-repeat: no-repeat; } </style> </head> <body> <h2 align="center">20174310</h2> <center> <form action="login.php" method="post" name="user20174310"> <div align="center">账 号</div> <br></br> <input id="username" name="username" style="height:35px;180px;" /> <br></br> <div align="center">密 码</div> <br></br> <input type="password" id="password" name="password" style="height:35px;180px;"/> <br></br> <div class="checkbox"> <label><div align="center"><input type="checkbox" value="remember-me" checked="checked">记住密码</div></label></div> <br></br> <div align="center"> <input type="submit" style="height:30px;100px;" value="登录"></div> </form> </center> </body> </html>
其中要注意一些对应关系，在<header>里面，action后面一定是php的文件名称，name一定是在数据库中建立的表格名称。
新建一个login.php文件，代码如下：
<?php $uname=$_POST["username"]; $pwd=$_POST["password"]; echo $uname; $query_str="SELECT * FROM user20174310 where username='$uname' and password='$pwd';"; $mysqli = new mysqli("127.0.0.1", "root", "123456", "login20174310"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: %s ", $mysqli->connect_error); exit(); } echo "connection ok!!!!"; /* Select queries return a resultset */ if ($result = $mysqli->connect_errno) { printf("Connect failed: %s ", $mysqli->connect_error); exit(); } else echo"<br>Success into database!"; if ($result = $mysqli->query($query_str)) { if ($result->num_rows > 0 ){ echo "<br> {$uname}:Welcome!!!20174310srq <br> "; } else { echo "<br> login failed!!!! <br> " ; } /* free result set */ $result->close(); } $mysqli->close(); ?>
在mysqli里面的格式中，分别对应的是ip地址，数据库用户名，密码，数据库。
在浏览器中输入 127.0.0.1/4310.html 访问自己的登录界面.
登陆成功
登录不成功
3.5 SQL注入攻击
在浏览器输入 127.0.0.1/4310.html 访问自己的登录界面
在用户名输入框输入 ' or 1=1# ，密码任意输入，可登陆成功
采用正则表达式跳过了验证，这是因为，我们输入的用户名在数据库中都会转换成SQL语句中的select语句，而输入' or 1=1#时，语句变成了
select * from users where username='' or 1=1#' and password=''
#相当于注释符，会把后面的内容注释表，而1=1是永真式，所以这个条件永远成立，不管密码是否输入正确，都能够登陆成功。
3.6XXS攻击
跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。故将跨站脚本攻击缩写为XSS。XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞由于被骇客用来编写危害性更大的phishing攻击而变得广为人知
将一张图片放在 /var/www/html 目录下，命名为20174310.jpg
在浏览器输入 http://127.0.0.1/4310.html 访问学生信息管理系统
在"姓名"输入框中输入 <img src="20174310.jpg" /> ，密码随意输入
可以访问存储的相应图片。
四、基础问题回答
什么是表单？
- 表单用于收集不同类型的用户输入，起到了数据采集功能
- 表单元素：不同类型的 文本框、复选框、单选按钮、提交按钮等等
- Action 属性：指定了后台服务器处理这个表单的脚本，或者简单理解为点击提交后显示的页面，如果省略 action 属性，则 action 会被设置为当前页面
- Method 属性：规定在提交表单时所用的 HTTP 方法（GET 或 POST）
- Name 属性：如果要正确地被提交，每个输入字段必须设置一个 name 属性
浏览器可以解析运行什么语言？
- 超文本标记语言：HTML
- 可扩展标记语言：XML
- 脚本语言：ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等。
WebServer支持哪些动态语言？
- 支持的动态网页语言有ASP，JSP，PHP。
五、实践总结
上学期选修了一门web课程，所以对web有了一定的基础，同时学过一些爬虫的知识，对正则表达式也有一定的了解，但对于后端代码接触的是Java为主，PHP还是第一次接触，所以编写后端代码有一定的难度，对web还是不够熟悉，平时要加强这方面的学习，同时对于一些攻击方法也是第一次了解，对web安全的学习任重道远。