Exp 8 Web基础 ————20164316张子遥
一、实践目标
1.Web前端HTML
能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。
2.Web前端javascipt
理解JavaScript的基本功能,理解DOM。编写JavaScript验证用户名、密码的规则。
3.Web后端:MySQL基础:正常安装、启动MySQL,建库、创建用户、修改密码、建表
4.Web后端:编写PHP网页,连接数据库,进行用户认证
5.最简单的SQL注入,XSS攻击测试
功能描述:用户能登陆,登陆用户名密码保存在数据库中,登陆成功显示欢迎页面。
二、实践具体步骤
(一)、Web前端HTML
1.使用命令 netstat -aptn | grep 80 检查80端口有没有被占用,发现未被占用输入 service apache2 start 打开apache2
2.浏览器输入 localhost 检测apache有没有正常工作
3.输入 sudo vi/etc/apache2/ports.conf 查看apache端口情况,为了区分,更改端口号为 4316
4.重启Apache服务,并检查端口状态
5.浏览器中输入 localhost:4316 ,登录到Apache首页验证其可用
6.进入apache2的存储html文件的文件夹 /var/www/html 新建 4316zzy.html 文件,从网上查了一下qq邮箱的源码
7.保存后在浏览器访问: localhost:4316/4316.html ,大体能看出网页表单内容,但是明显乱码,应该是编码方式的不同导致了乱码。
(二)、Web前端javascipt
JavaScript是一种属于网络的脚本语言,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
1.使用javascript创建一些简单的用户名密码的验证规则(用户名不能为空以及对密码长度做出6-16位限制)
<head> <title>用户登录</title> <meta charset="utf-8">//unicode:万国码,utf-8:unicode的升级版。 <script language="javascript"> function check(Form){ var Username=Form.user.value; var pwd=Form.pw.value; if((Username == "")||(pwd == "")) { alert("用户名或密码为空") return false; } if(pwd.length > 16 || pwd.length < 6) { alert("密码长度应在6-16位"); return false; } For.submit(); } </script> </head> <body> <form name="Form" method="post" action="Login.php"> <p>用户名:<input type="text" name="user"></p> <p>密 码:<input type="password" name="pw"></p> <input type="botton" value="提交" onclick="check(Form)"> </form> </body> </html>
2.登入浏览器,输入 localhost:4316/4316try.html 进行测试。
(1)用户名或密码不能为空
(2)密码长度做出6-16位的限制
(三)、Web后端:MySQL基础
1.开启sql服务: /etc/init.d/mysql start ,同时使用root身份登陆: mysql -u root -p ,输入密码,默认为p@ssw0rd,随后进入mysql
2.输入命令 use mysql; 选择mysql数据库,输入命令查看mysql库中的user表 select user, password, host from user; ,表中存储着用户名、密码与权限
3.输入命令 update user set password=PASSWORD("toor") WHERE user='root'; 更换密码为toor。然后利用 flush privileges; 更新权限, quit 退出后再进入mysql能够使用更改后的密码成功进入。
4.使用命令 CREATE SCHEMA `4316_ZZY`; 创建名为 4316_ZZY 的库,最开始mysql报错了error(1064),上网查资料后发现是mysql的保留字,当使用了mysql保留字,需要用反引号将其引起来,也就是键盘数字1旁边的键(` `)...
5.使用下列命令创建新表
CREATE TABLE `4316_ZZY`.`users` ( `userid` INT NOT NULL COMMENT '', `username` VARCHAR(45) NULL COMMENT '', `password` VARCHAR(256) NULL COMMENT '', `enabled` VARCHAR(5) NULL COMMENT '', PRIMARY KEY (`userid`) COMMENT '');
6.输入命令 use 4316_ZZY
打开表;输入命令添加用户名与密码均为20164316的用户
insert into users(userid,username,password,enabled) values(1,'20164316',password("20164316"),"TRUE");
7.输入命令 show tables 可以看到在4316_ZZY库里创建的表,输入命令 select * from users; 能够看到users表里的具体数据,发现password好像不对...
8.由于password错了,所以输入命令 update user set password='20164316zzy' WHERE userid=1; 进行修改,再输入命令 select * from users; 看到users表里的具体数据里,password已经修改成功
(四)、Web后端:编写PHP网页,连接数据库
1.使用命令 grant select,insert,update,delete on 数据库名.* to 用户名@localhost, identified by "密码"; 这句话的意思是将对某数据库的所有表的select,insert,update,delete权限授予某ip登录的某用户。
2.编写登录网页的代码 4316try2.html
<html> <head> <title>login</title> </head> <h1>Login</h1> <body> <table> <form action="4316try2.php" method="GET" name="4316_ZZY"> <tr> <td>username:</td> <td><input type="text" name="username" size="20" maxlength="20"onfocus="if (this.value=='You name')this.value='';"/></td> </tr> <tr> <td>password:</td> <td><input type="password" name="password" size="20" maxlength="20"onfocus="if (this.value=='You password')this.value='';"/></td> </tr> <table> <tr> <td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td> <td><input type="reset" name="rs" value="reset"/></td> </tr> </table> </from> </table> <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("user email!"); return false ; } if ((sPassword =="") || (sPassword=="Your password")){ alert("password!"); return false ; } } </script> </body> </html>
3.参考了老师给的代码,编写 4316try2.html
<?php $uname=($_GET["username"]); $pwd=($_GET["password"]); echo $uname; $query_str="SELECT * FROM testtable where username='$uname' and password='$pwd';"; $mysqli = new mysqli("127.0.0.1", "zzy", "4316zzy", "4316_ZZY"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: %s\n", $mysqli->connect_error); exit(); } echo "connection ok!"; /* Select queries return a resultset */ if ($result = $mysqli->query($query_str)) { if ($result->num_rows > 0 ){ echo "<br> {$uname}:Welcome!!! <br> "; } else { echo "<br> login failed!!!! <br> " ; } /* free result set */ $result->close(); } $mysqli->close(); ?>
4.登入浏览器,输入 localhost:4316/4316try2.html 进行测试。正确的用户为20164316,密码为20164316zzy,也就是之前在users表里的数据
(1)登陆成功界面
(2)登陆失败界面(输入错误的密码)
(五)、最简单的SQL注入,XSS攻击测试
①SQL注入
SQL注入攻击:可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
1.在登录界面用户名处输入 ' or 1=1# ,任意密码,发现可以成功登录
原因:在代码中有这个语句select * from users where username='' or 1=1#' and password=''
#是注释符,将其后面的内容给注释掉了,只剩下前面的1=1,恒成立,就可以成功登录了。
②XSS攻击测试
XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
1.先将图片保存在 /var/www/html 下
2.在用户名输入框输入 <img src="zzy.jpg" /> ,任意密码,成功登陆。
3.看了一下代码,是因为代码中有一句是打印用户名的意思,如果注释掉这句的话,就不会出现图片了。
三、实践基础问题回答
(1)什么是表单
- 表单:表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:
- 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作
(2)浏览器可以解析运行什么语言
- 超文本标记语言:HTML
- 可扩展标记语言:XML
- 脚本语言:ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等。
(3)WebServer支持哪些动态语言
- 常用的三种动态网页语言有ASP(ActiveServerPages),JSP(JavaServerPages),PHP(HypertextPreprocessor)。
四、实践总结与体会
因为之前学习过关于web和MySQL的简单知识,所以在这次实验过程中,遇到的问题也比较少,遇到的一些简单问题也可以直接通过网上查询能够解决。这次实验的连贯性比较重要,以及在PHP与和html代码编写过程中的与数据库的联系也需要注意,能够在实践过程中查找问题,发现问题,解决问题,对自己的能力也有很大的提升。