2018-2019 20165226 Exp 8 Web基礎

2018-2019 20165226 Exp 8 Web基礎

目錄

---

1、實驗內容說明及基礎問題回答

2、實驗過程

• 1.Web前端：HTML
• 2.Web前端j：avascipt
• 3.Web後端：MySQL基礎
• 4.Web後端：編寫PHP網頁
• 5.最簡單的SQL注入，XSS攻擊測試

3、總結與體會

---

---

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分)

功能描述：用戶能登錄，登錄用戶名密碼保存在數據庫中，登錄成功顯示歡迎頁面。

二、基礎問題回答

（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)

• ASP全名ActiveServerPages，是一個WEB服務器端的開發環境，利用它能夠產生和執行動態的、互動的、高性能的WEB服務應用程序。ASP採用腳本語言VBScript（Javascript）做爲本身的開發語言。
• JSP是Sun公司推出的新一代網站開發語言，Sun公司藉助本身在Java上的不凡造詣，將Java從Java應用程序和JavaApplet以外，又有新的碩果，就是JSP，JavaServerPage。JSP能夠在Serverlet和JavaBean的支持下，完成功能強大的站點程序。
• PHP是一種跨平臺的服務器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法,並耦合PHP本身的特性,使WEB開發者可以快速地寫出動態產生頁面。

返回目錄

---

---

2、實驗過程

1.Web前端：HTML

• 安裝、啓動Apache
  • 安裝：sudo apt-get install apache2

  • 啓動：service apache2 start
    

  • 查看端口占用狀況：netstat -aptn
    

  • 瀏覽器登陸到Apache首頁驗證其可用
    

  • Apache的工做目錄是/var/www/html，能夠測試apache是否可讀取工做目錄下的文件vi /var/www/html/test.txt，而後隨意輸入一串字符，瀏覽器打開127.0.0.1:80/test.txt，可看到test.txt的內容
    

• 編寫一個HTML做爲前端的登陸頁面

  • get 與 post

    ①get是從服務器上獲取數據，post是向服務器傳送數據
    ②get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
    ③對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
    ④get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。
    ⑤get安全性很是低，post安全性較高。可是執行效率卻比Post方法好。

  • 編寫一個含有表單的HTML
    

  • 網頁效果如圖
    

• 編寫一個PHP做爲登陸成功的返回頁面
  • PHP安裝：sudo apt-get install php
  • 安裝完成後測試php是否可正常工做
    • vi /var/www/html/test.php編輯內容爲<?php include($_GET["a"]); ?>
    • 在瀏覽器中輸入127.0.0.1:80/test.php?a=/etc/passwd可看到/etc/passwd文件的內容，以下圖所示
      

  • 編寫PHP網頁
    

  • 網頁效果如圖
    

2.Web前端javascipt

JavaScript是一種普遍用於客戶端Web開發的腳本語言，經常使用來給HTML網頁添加動態功能，好比響應用戶的各類操做。
文檔對象模型(Document Object Model，簡稱DOM，是W3C組織推薦的處理可擴展標誌語言的標準編程接口。
在網上借鑑了一個編寫驗證用戶名和密碼的規則：用戶名密碼不能爲空，密碼長度在5-10之間

• 其中新增代碼以下

<meta charset="utf-8"/>
<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 > 10 || pwd.length < 5)
  {
    alert("密碼長度應該在 5 - 10 位");
    return false;
  }
  Form.submit();
}
</script>

• 修改後
  

• 測試結果
  

3.Web後端：MySQL基礎

• 安裝apt-get install mysql
  • 報錯
    
  • 說明以前已經更新安裝好

• 啓動/etc/init.d/mysql start，成功
  

• 登錄mysql -u root -p 默認密碼p@ssw0rd

• 查看基本信息show databases;
  

• 更改用戶密碼、權限並從新登陸
  • 輸入use mysql;選擇使用mysql這個數據庫
  • 輸入select user, password, host from user;查看當前用戶信息
  • 輸入update user set password=PASSWORD("20165226") where user='root';更改密碼
  • 輸入flush privileges;更改權限
  • 輸入exit退出，而後使用新密碼從新登陸mysql -u root -p
    
• 建立數據庫、表並插入數據

  • create database 數據庫名稱;建立數據庫
    

  • 輸入show databases;查看存在的數據庫；輸入use lxs使用剛建立的數據庫lxs。

  • 輸入create table user (username VARCHAR(20),password VARCHAR(20));建立一個名爲user的數據表，表中包含VARCHAR類型的兩個字段：username和password

    這裏使用的是varchar類型而非char類型，他們的差異以下：

    char類型指定大小後會預分配固定大小，不論是否使用空間都被佔用
    varchar類型用多少佔多少，只是不能超過括號中指定的上限

  • 輸入show tables;查看全部的表，能夠發現剛剛新建的user

  • 輸入insert into user values('20165226','20165226');向表中username`` password兩個字段插入數據，即用戶名爲20165226，密碼爲20165226
    

• 爲當前主機登陸的用戶lxs受權
  • 輸入grant select,insert,update,delete on lxs.* to lxs@localhost identified by "20165226";將對某數據庫的全部表的select,insert,update,delete權限授予當前主機localhost登陸的用戶lxs，20165226是登陸密碼
  • 輸入exit退出，而後使用新密碼從新登陸lxs用戶mysql -u lxs -p
  • 登陸成功，說明用戶建立成功

4.Web後端：編寫PHP網頁

• 利用PHP和MySQL，結合以前編寫的登陸網頁進行登陸身份認證，修改後的Login.php代碼以下

<?php
$uname=$_POST["user"];
$pwd=$_POST["pw"];
echo $uname;
$query_str="SELECT * FROM user where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "lxs", "20165226", "lxs");

/* 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> Welcome~ <br> ";
    } 
    else {
        echo "<br> login failed! <br> " ; }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

• 在瀏覽器輸入127.0.0.1/test.html訪問本身的登陸界面
• 輸入用戶名和密碼進行認證

  • 成功
    

  • 失敗

    • 輸入錯誤密碼
      

    • 輸入錯誤帳戶
      

5.最簡單的SQL注入，XSS攻擊測試

• SQL攻擊

  • 在用戶名輸入框中輸入' or 1=1#，密碼隨便輸入，即可以登錄成功
    

  • 輸入的用戶名' or 1=1#提交到後臺後，被做爲SQL語句中的第一個參數填入，使SQL語句變成select * from users where username='' or 1=1#' and password='',#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件永遠成立，因此可以成功登錄。所以，要想避免SQL注入，應當限制用戶在用戶名中輸入'、#等特殊符號。

• XSS攻擊測試
  • XSS表示Cross Site Scripting(跨站腳本攻擊)，經過插入惡意腳本，實現對用戶瀏覽器的控制
  • 在/var/www/html目錄下事先保存一個圖片文件20165226.png
  • 在登陸網頁的用戶名窗口中輸入<img src="20165226.png"/>,密碼隨意
  • 即便登陸不成功但仍能看到圖片
    

3、總結與體會

本次實驗融合了以前的web編程、數據庫等知識，學習瞭如何在kali鏈接建立並調用數據庫，實現了一個最基礎的網頁登陸功能，挺有意思的。
返回目錄