Exp 8 Web基礎

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分)
（4）Web后端：編寫PHP網頁，連接數據庫，進行用戶認證(1分)
（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服務即可。

此時在瀏覽器輸入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 如下所示：

 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 ，如果用戶郵箱或密碼未填，網頁會提示：

5.Web后端：MySQL基礎

1.輸入 /etc/init.d/mysql start 開啟MySQL服務

2.輸入 mysql -u root -p 使用root權限進入，默認的密碼是password

3.輸入 update user set password=PASSWORD("newpassword") where user='root'; ，修改密碼；輸入 flush privileges; 更新權限

4.輸入 exit 退出數據庫，使用新的密碼登錄

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文件，最后成功地完成了試驗。雖然過程比較艱難，但能成功完成實驗還是很有收獲的。

posted @ 2019-05-11 21:16 111134 閱讀(206) 評論(0) 收藏舉報

刷新頁面返回頂部

醉落