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教程