20164305 徐广皓 Exp 8 Web基础

时间  2019-11-24
标签 exp web 基础 栏目 HTML 繁體版
原文   原文链接

1.实践具体要求

  • （1）Web前端HTML(0.5分)
    • 能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。
  • （2）Web前端javascipt(0.5分)
    • 理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。

  • （3）Web后端：MySQL基础：正常安装、启动MySQL，建库、建立用户、修改密码、建表(0.5分)javascript

  • （4）Web后端：编写PHP网页，链接数据库，进行用户认证(1分)php

  • （5）最简单的SQL注入，XSS攻击测试(1分)
    • 功能描述：用户能登录，登录用户名密码保存在数据库中，登录成功显示欢迎页面。

2.基础问题回答

  • （1）什么是表单？
    • 能够收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
  • （2）浏览器能够解析运行什么语言？
    • 支持HTML（超文本标记语言）、XML（可扩展标记语言）以及Python、PHP、JavaScript、ASP等众多脚本语言。
  • （3）WebServer支持哪些动态语言？

    • Active Server Pages

      • Microsoft已开发出一种用于生成称为 Active Server Pages 的动态Web内容的技术,简称 ASP。使用ASP，Web 服务器上的HTML页面能够包含嵌入代码的片断（一般是VBScript或JScript-尽管几乎可使用任何语言）。在将页面发送到客户端以前，Web服务器将读取并执行此代码。

    • Server-side JavaScript

      • Netscape 也有一种服务器端脚本技术，它被称为服务器端 JavaScript，或简称为 SSJS。与 ASP 同样，SSJS 一样容许将代码片断嵌入到 HTML 页面中以生成动态 Web 内容。区别在于 SSJS 使用 JavaScript 做为脚本语言。使用 SSJS，能够预编译网页以提升性能。

    • Java Server pages

      • 想了解 jsp（Java Server Pages） 那么就不得不说一下和他直接相关的，Java Servlet。
      • Java Serlvet（Java Server Side applet) 是在服务器端的 Java 程序，他扩展了服务器的功能，经过运行 由 Serlvet 引擎管理的 JVM 来运行 Java 程序而提供动态更新 HTML 的功能 （使用不一样的技术来实现相似 CGI 程序的功能，但不彻底同于 CGI，Servlet 有本身的约定）。Java Serlvet 的优势很吸引人，具备 Java 语言的优势和平台无关性；由于 Serlvet 在 Web 服务器中运行，因此能够很容易的访问 Web 服务器的资源；支持在 JVM 中运行多线程，每一个请求将对应一个 Serlvet 线程，对比 CGI 建立进程的方式将节省很大的时间和空间资源。可是工程师们向来都是抵制麻烦寻找便利的人群，使用 Java Servlet 编写服务器端页面，不可避免的就是再次须要在 Java 代码中嵌入前端 HTML 代码，这给编码体验形成了很大影响，为了实现工程师友好（增长这门技术对工程师的吸引力），因而和 PHP 在 HTML 中嵌入代码类似，Java servlet 也实现这一特性，容许在 HTML 中嵌入 Java 代码。更进一步，将一些 Java 代码封装起来换一种更加易于理解和使用的语法，就产生了 JSP。JSP 真正运行时，是会被 Servlet 容器给编译成 Java Servlet 代码的，因此实际运行的仍是 Java 程序。JSP 只是一个工程师友好的中间层。

3.Web前端：HTML

1.kali默认已安装Apache，直接使用 service apache2 start 命令打开Apache服务便可。html

  • 此时在浏览器输入127.0.0.1，若是能够打开Apache的默认网页，则开启成功：

2.使用 cd /var/www/html 进入Apache目录下，新建一个简单的含有表单的html文件 simple_form.html ：前端

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 </head>
 6 <body>
 7     <h2>Login Quick</h2>
 8         <form action="login" method="post">
 9             <input placeholder="E-mail" name="Name" class="user" type="email">
10             <br>
11             </br>
12             <input  placeholder="Password" name="Password" class="pass" type="password">
13             <br>
14             </br>
15             <input type="submit" value="Login">
16         </form>
17 </body>
18 </html>
  • 在浏览器尝试打开

4.Web前端：javascipt

1.在原有 simple_form.html 基础上，能够添加一段JavaScript代码，以完成对用户是否填写邮箱和密码的判断。修改后的 login_test.html 以下所示：java

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 </head>
 6 <body>
 7     <h2>Login Quick</h2>
 8         <form action="login" method="post" name="form_login">
 9             <input placeholder="E-mail" name="Email" class="user" type="email" onfocus="if (this.value=='Your email') this.value='';" />
10             <br>
11             </br>
12             <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>
13             <br>
14             </br>
15             <input type="submit" value="Login" onClick="return validateLogin()"/>
16         </form>
17 <script language="javascript">  
18     function validateLogin(){  
19         var sUserName = document.form_login.Email.value ;  
20         var sPassword = document.form_login.Password.value ;    
21         if ((sUserName =="") || (sUserName=="Your email")){  
22         alert("user email!");  
23         return false ;  
24         }  
25         if ((sPassword =="") || (sPassword=="Your password")){  
26         alert("password!");  
27         return false ;  
28         }  
29     }   
30 </script>  
31 </body>
32 </html>

2.在浏览器访问 file:///var/www/html/login_test.html ，若是用户邮箱或密码未填，网页会提示：mysql

5.Web后端：MySQL基础

1.输入 /etc/init.d/mysql start 开启MySQL服务web

2.输入 mysql -u root -p 使用root权限进入，默认的密码是passwordsql

3.输入 update user set password=PASSWORD("newpassword") where user='root'; ，修改密码；输入 flush privileges; 更新权限数据库

4.输入 exit 退出数据库，使用新的密码登陆apache

5.使用 create database databasename; 创建数据库

6.使用 show databases; 查看存在的数据库

7.使用 use databasename; 使用咱们建立的数据库

8.使用 create table tablename; 创建数据库表，并设置字段基本信息

9.使用 show tables; 查看表信息

10.使用 insert into tablename values('1','2'); 插入数据

11.使用 select * from tablename; 查询表中的数据

12.在MySQL中增长新用户，使用 grant select,insert,update,delete on sql.* to username@localhost identified by "password"; 

13.增长新用户后，使用新的用户名和密码进行登陆

 

6.Web后端：编写PHP网页

1.在 /var/www/html 目录下新建一个PHP测试文件 phptest.php ，简单了解一下它的一些语法

1 <?php
2 echo ($_GET["a"]);
3 include($_GET["a"]);
4 echo "This is my php test page!<br>";
5 ?>

2.在浏览器网址栏中输入 localhost/phptest.php?a=/etc/passwd ，可看到 /etc/passwd 文件的内容

3.利用PHP和MySQL，结合以前编写的登陆网页进行登陆身份认证，修改后的 login.php 和 login.html 代码以下

 1 <html>
 2 <head>
 3 <title>login</title>
 4 </head>
 5 <h1>Login</h1>
 6 <body>
 7 <table>
 8  <form action="login.php" method="GET" name="form_login">
 9 <tr>
10 <td>username:</td>
11 <td><input type="text" name="username" size="20" maxlength="20"onfocus="if (this.value=='You name')this.value='';"/></td>
12 </tr>
13 <tr>
14 <td>password:</td>
15 <td><input type="password" name="password" size="20" maxlength="20"onfocus="if (this.value=='You password')this.value='';"/></td>
16 </tr>
17 <table>
18 <tr>
19 <td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td>
20 <td><input type="reset" name="rs" value="reset"/></td>
21 </tr>
22 </table>
23 </from>
24 </table>
25 
26 <script language="javascript">  
27     function validateLogin(){  
28         var sUserName = document.form_login.username.value ;  
29         var sPassword = document.form_login.password.value ;    
30         if ((sUserName =="") || (sUserName=="Your name")){  
31         alert("user email!");  
32         return false ;  
33         }  
34 
35         if ((sPassword =="") || (sPassword=="Your password")){  
36         alert("password!");  
37         return false ;  
38         }  
39 
40     }   
41 </script>  
42 
43 </body>
44 </html>
 1 <?php
 2 $uname=($_GET["username"]);
 3 $pwd=($_GET["password"]);
 4 echo $uname;
 5 $query_str="SELECT * FROM testtable where username='$uname' and password='$pwd';";
 6 $mysqli = new mysqli("127.0.0.1", "root", "123456", "xgh");
 7 
 8 /* check connection */
 9 if ($mysqli->connect_errno) {
10     printf("Connect failed: %s\n", $mysqli->connect_error);
11     exit();
12 }
13 echo "connection ok!";
14 /* Select queries return a resultset */
15 if ($result = $mysqli->query($query_str)) {
16     if ($result->num_rows > 0 ){
17             echo "<br> {$uname}:Welcome!!! <br> ";
18     } 
19     else {
20         echo "<br> login failed!!!! <br> " ; }
21     /* free result set */
22     $result->close();
23 }
24 $mysqli->close();
25 ?>

4.在浏览器输入 127.0.0.1/login.html 访问本身的登陆界面,并登陆本身的用户名和帐号

但为何只有显示链接成功没有显示欢迎呢？仔细检查一下代码发现搜索的数据表名是错误的没法进行身份验证，因而将代码改过来

 1 <?php
 2 $uname=($_GET["username"]);
 3 $pwd=($_GET["password"]);
 4 echo $uname;
 5 $query_str="SELECT * FROM login_table where username='$uname' and password='$pwd';";
 6 $mysqli = new mysqli("127.0.0.1", "root", "123456", "xgh");
 7 
 8 /* check connection */
 9 if ($mysqli->connect_errno) {
10     printf("Connect failed: %s\n", $mysqli->connect_error);
11     exit();
12 }
13 echo "connection ok!";
14 /* Select queries return a resultset */
15 if ($result = $mysqli->query($query_str)) {
16     if ($result->num_rows > 0 ){
17             echo "<br> {$uname}:Welcome!!! <br> ";
18     } 
19     else {
20         echo "<br> login failed!!!! <br> " ; }
21     /* free result set */
22     $result->close();
23 }
24 $mysqli->close();
25 ?>

再试一下看看，解决了

7.简单SQL注入，XSS攻击测试

1.SQL注入

  • SQL注入原理 是利用现有应用程序，将SQL命令注入到后台数据库引擎执行的能力，能够经过在Web表单中输入SQL语句获得一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

在用户名输入框输入 ' or 1=1# ，密码任意输入，可登录成功

  • 输入的用户名与select语句组合变成 select * from users where username='' or 1=1#' and password='' ,#起到注释做用屏蔽了密码判断语句，而1=1是1，因此可以成功登录。

2.XSS攻击

  • XSS攻击原理 一种常常出如今web应用中的计算机安全漏洞，它容许恶意web用户将代码植入到提供给其它用户使用的页面中。

将图片放在 /var/www/html 目录下，在用户名输入框输入 <img src="tu.jpg" /> ，密码任意，就成功登陆

8.实践总结及体会

虽然上学期进行过关于MYSQL数据库学习，可是在网页编程上遇到了一些困难，原本打算仅依靠学长学姐博客来完成实验，可是发现模仿并不能解决问题，因此又参考网上资料从新编写HTML和PHP文件，最后成功地完成了试验。虽然过程比较艰难，但能成功完成实验仍是颇有收获的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程