20164319 刘蕴哲 Exp 8 Web基础_html-js-css

概述【实验内容】 Web前端HTML 能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML Web前端javascipt 理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。 Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表 Web后端：编写PHP网页，连接数据库，进行【实验内容】

Web前端HTML

能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML

Web前端javascipt

理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。

Web后端：MysqL基础：正常安装、启动MysqL，建库、创建用户、修改密码、建表

Web后端：编写PHP网页，连接数据库，进行用户认证

最简单的sql注入，XSS攻击测试

功能描述：用户能登陆，登陆用户名密码保存在数据库中，登陆成功显示欢迎页面。

【实验要点】

Web前端

编程言语：HTML/CSS/JavaScript(Js)

运行环境：浏览器

编程用途：在浏览器内部的动态，美观展示形式

Web后端

编程语言：PHP/JsP/.NET...

运行环境：应用服务器/中间件

编程用途：对前端提交的数据进行处理并返回相应的HTML网页内容

数据库编程

编程语言：PHP/JsP/.NET相应的库，sql语言

运行环境：数据库服务器

编程用途：基本的数据增、删、改、查

WebServer:

首先掌握Apache的基本 *** 作,安装、启停

配置修改（如监听端口）

前端编程：

熟悉HTML+JavaScript。

了解表单的概念

编写不同的HTML网页，放入到Apache工作目录，从浏览器访问。

后端编程：

了解GET/POST方法的不同

尝试使用GET/POST方法传输用户在浏览器中的输入，并在后台用PHP读出参数，根据讲出参数的不同，返回不同的内容给浏览器。

数据库编程

MysqL的安装、启停

MysqL客户端登陆

在MysqL客户端中练习基本sql *** 作：建库、建表、数据增、删、改、查
在PHP中调用MysqL库进行相应数据库 *** 作

sql注入

即通过把sql命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的sql命令。

就是利用现有应用程序，将（恶意的）sql命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

XSS攻击

跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆。故将跨站脚本攻击缩写为XSS。

XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞由于被骇客用来编写危害性更大的phishing攻击而变得广为人知。

【实验步骤】

[part.1]Web前端HTML

kali默认已安装Apache，直接使用命令打开

service apache2 start

在浏览器输入127.0.0.1，打开Apache的默认网页如图

进入Apache目录/var/www/HTML，新建一个含有表单的HTML文件form.HTML，用终端编辑该文件，写入以下PHP编写的含有表单的HTML

<HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"><Title>登陆页面</Title></head><body style="background-image:url(‘./login.jpg‘);background-repeat:no-repeat;background-size:100% 100%;position: absolute;top: 40%;left: 50%;transform: translate(-50%,-50%);"><center>   <p >用户登录界面</p>      <form action="login.PHP" method="post" name="form1">           <input type="text" name="username" placeholder="用户名" onfocus="if this.value=‘‘;"><br/><br/>          <input type="password" name="password" placeholder="密码" onfocus="if this.value=‘‘;"><br/><br/>          <input class="but" type="submit" onClick="return valIDateLogin()" value="确认">      </form>  </center></body></HTML>

在打开写好的文件，打开登录页面

[part.2]Web前端javascipt

添加一段JavaScript代码，对用户是否填写用户名和密码进行判断

<HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"><Title>登陆页面</Title></head><body style="background-image:url(‘./login.jpg‘);background-repeat:no-repeat;background-size:100% 100%;position: absolute;top: 40%;left: 50%;transform: translate(-50%,-50%);"><center>   <p >用户登录界面</p>      <form action="login.PHP" method="post" name="form1">           <input type="text" name="username" placeholder="用户名" onfocus="if this.value=‘‘;"><br/><br/>          <input type="password" name="password" placeholder="密码" onfocus="if this.value=‘‘;"><br/><br/>          <input class="but" type="submit" onClick="return valIDateLogin()" value="确认">      </form>  </center><script language="JavaScript">    function valIDateLogin(){        var sUsername = document.form1.username.value ;        var sPassword = document.form1.password.value ;          if ((sUsername =="") || (sUsername=="Your email")){        alert("用户名不能为空!");        return false ;        }        if ((sPassword =="") || (sPassword=="Your password")){        alert("密码不能为空!");        return false ;        }    }   </script> </body></HTML>

然后打开文件form.HTML，进入登录页面，不输入用户名点击“确认”，d出提示框

输入随意用户名，不输入密码点击“确认”，d出提示框

[part.3]Web后端：MysqL基础：正常安装、启动MysqL，建库、创建用户、修改密码、建表

开启MysqL服务

使用root权限进入，默认密码为“password”

查看基本信息，修改密码

show database;    //查看信息use MysqL;          //这里的MysqL是上一步中查询到的数据库名称select user,password,host from user;   //MysqL库中的user表中存储着用户名、密码与权限UPDATE user SET password=PASSWORD("新密码") WHERE user=‘root‘; flush privileges;    //更新权限quit;                   //退出

接下来是正确的步骤，注意修改新密码的地方格式和新密码要填写正确，不然会出现问题：

这里之前我的MysqL出了问题，修改密码的时候出错，导致退出之后登陆不上，我使用修改权限的方法跳过了MysqL的密码验证，如下在新的窗口可以使用“MysqL -u root”直接进入：

重新进入修改了新密码之后，就可以正常用新密码进入MysqL了，接下来依次使用指令：

create database lyz;       //建立数据库lyzshow databases;            //查看存在的数据库use lyz;                        //使用上面新创建的数据库create table login;         //建立数据库表login并设置字段基本信息show tables;                //查看表信息insert into login values(‘lyz‘,‘1997929‘);     //插入数据insert into login values(‘xxx‘,‘123456‘);     //插入数据select * from login;         //查询表中的数据grant select,insert,update,delete on lyz.* to @L_404_0@(也可以是远程登录方式的IP) IDentifIEd by "1997929";                   //增加新用户对数据库的所有表的权限MysqL -u lyz -p              //使用新的用户名和密码进行登录

登陆成功。

[part.4]Web后端：编写PHP网页，连接数据库，进行用户认证

在/var/www/HTML目录下新建一个PHP测试文件test.PHP

<?PHPecho ($_GET["a"]);include($_GET["a"]);echo "This is my PHP test page!<br>";?>

在浏览器网址栏中输入localhost:80/PHPtest.PHP?a=/etc/passwd,可看到/etc/passwd文件的内容

利用PHP和MysqL，结合前面编写的登录网页进行登录身份认证（注意要与前端action指定的PHP名称对应，注意对应库名和表名），修改后的文件login.PHP如下：

在浏览器输入127.0.0.1/form.HTML（这里填写的HTML文件是part.2里面修改过的HTML文件），访问自己的登录界面

输入用户名和密码进行认证，成功登录：

[*sql注入*]

在浏览器输入127.0.0.1/form.HTML,访问自己的登录界面，在用户名输入框输入‘ or 1=1#,密码任意输入，可登陆成功

(我们输入的用户名和我们代码中的select语句组合起来变成了select * from users where username=‘‘ or 1=1#‘ and password=‘‘,#相当于注释符，把后面的内容都注释掉；而1=1是永真式，即这个条件永远成立，所以不管密码是否输入正确，能成功登陆****************************************注释参考了张雨欣的博客内容，有很多值得学习的地方)

[*XSS攻击*]

将一张图片放在/var/www/HTML目录下，重命名为login.jpg,在浏览器输入127.0.0.1/form.HTML,访问自己的登录界面

在用户名输入框中输入<img src="login.jpg" />,密码随意输入，就可以读取到图片

【实验感悟】

本次实验让我运用JavaScript的方法结合PHP编程，对网页HTML的代码编写，和数据库MysqL的使用有了更深一步的了解。实验中的问题主要存在于对MysqL的使用，MysqL权限设置和建库的时候，出了一些问题，通过修改脚本文件，执行面密 *** 作得到了解决；还有就是火狐浏览器代理服务器权限的问题，开启了Apache服务之后，会存在网页链接失败的情况，修改浏览器设置之后成功解决。其他问题主要存在于对HTML代码的编写和不熟悉，文件代码的不正确导致的。

总结

以上是内存溢出为你收集整理的20164319 刘蕴哲 Exp 8 Web基础全部内容，希望文章能够帮你解决20164319 刘蕴哲 Exp 8 Web基础所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1088549.html