2018-2019-2 20165330《網絡對抗技術》Exp8 Web基礎

目錄


實驗內容

返回目錄javascript


基礎問題

  • 什麼是表單php

    • 表單在網頁中主要負責數據採集功能。
    • 一個表單有三個基本組成部分:
      • 表單標籤:這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
      • 表單域:包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
      • 表單按鈕:包括提交按鈕、復位按鈕和通常按鈕;用於將數據傳送到服務器上的CGI腳本或者取消輸入,還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做
  • 瀏覽器能夠解析運行什麼語言css

    • 支持HTML(超文本標記語言)、XML(可擴展標記語言)以及Python、PHP、JavaScript、ASP等衆多腳本語言。
  • WebServer支持哪些動態語言html

    • JavaScript、ASP、PHP、Ruby等腳本語言,ASP基於IIS WEB SERVER,是微軟的服務器端腳本技術,PHP基於APACHE WEB SERVER,與ASP有幾分相似,都是一種在服務器端執行的嵌入HTML文檔的腳本語言。

返回目錄前端


相關知識

  • 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攻擊而變得廣爲人知。

返回目錄java


實驗步驟

Web前端HTML

  • kali默認已安裝Apache,直接使用service apache2 start命令可打開Apache服務。
    image
    如圖所示,若是沒有任何錯誤提示,即代表成功開啓
  • 在瀏覽器輸入127.0.0.1,若是能夠打開Apache的默認網頁,則開啓成功
    image
  • 終端輸入cd /var/www/html進入Apache目錄下,新建一個含有表單的html文件test.html
    image
    • 這裏我對上學期的實驗裏的Eclipse中的登陸界面進行了修改,須要注意!
      • 圖片的路徑名,將相關圖片拷貝到工做目錄/var/www/html中後,直接用./圖片名的方式便可指定圖片的位置。
      • 由於咱們要使用PHP進行後臺編程,因此要將原來的action改爲一個php文件的名字,例如:<form action="login.php" method="post" >
  • test.html的內容以下mysql

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登錄頁面</title>
    <link REL="stylesheet" TYPE="text/css">  
    <style type="text/css">
    html{  
      width: 100%;  
      height: 100%;  
      overflow: hidden;  
      font-style: sans-serif;  
     }
     input{  
      width: 278px;  
      height: 18px;  
      margin-bottom: 10px;  
      outline: none;  
      padding: 10px;  
      font-size: 13px;  
      color:  #DCDCDC; 
      border-top: 1px solid #ffffff;
      border-left: 1px solid #ffffff;  
      border-right: 1px solid #ffffff;  
      border-bottom: 1px solid #ffffff;  
      border-radius: 4px;  
      background-color: transparent;
     }
    .but{  
      width: 300px;  
      min-height: 40px;  
      display: block;  
      background-color: transparent;
      border: 1px solid #a53f51;  
      color: #fff;  
      padding: 9px 14px;  
      font-size: 15px;  
      line-height: normal;  
      border-radius: 5px;  
      margin: 0;  
     }
    </style>
    </head>
    <body style="background-image:url('./2.jpg');background-repeat:no-repeat;background-size:100% 100%;position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);">
    <center>
          <h1 style="color:#fff;font-size: 2em;margin: 0.67em 0;">Login</h1> 
          <form action="login.php" method="post" name="form1"> 
              <input type="text" name="username" placeholder="用戶名"><br/><br/>
              <input type="password" name="password" placeholder="密碼"><br/><br/>
              <input class="but" type="submit" value="登陸">
          </form>  
    </center>  
    </body>
    </html>
  • 在瀏覽器嘗試打開
    imagelinux

Web前端javascipt

  • 在上面的test.html基礎上,添加一段JavaScript代碼,以完成對用戶是否填寫用戶名和密碼的判斷
  • 修改後的login.html以下所示git

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登錄頁面</title>
    <link REL="stylesheet" TYPE="text/css">  
    <style type="text/css">
    html{  
      width: 100%;  
      height: 100%;  
      overflow: hidden;  
      font-style: sans-serif;  
     }
     input{  
      width: 278px;  
      height: 18px;  
      margin-bottom: 10px;  
      outline: none;  
      padding: 10px;  
      font-size: 13px;  
      color:  #DCDCDC; 
      border-top: 1px solid #ffffff;
      border-left: 1px solid #ffffff;  
      border-right: 1px solid #ffffff;  
      border-bottom: 1px solid #ffffff;  
      border-radius: 4px;  
      background-color: transparent;
     }
    .but{  
      width: 300px;  
      min-height: 40px;  
      display: block;  
      background-color: transparent;
      border: 1px solid #a53f51;  
      color: #fff;  
      padding: 9px 14px;  
      font-size: 15px;  
      line-height: normal;  
      border-radius: 5px;  
      margin: 0;  
     }
    </style>
    </head>
    <body style="background-image:url('./2.jpg');background-repeat:no-repeat;background-size:100% 100%;position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);">
    <center>
          <h1 style="color:#fff;font-size: 2em;margin: 0.67em 0;">Login</h1> 
          <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>
  • 在瀏覽器訪問login.html,若是用戶郵箱或密碼未填寫就提交,網頁會報提示
    image
    imageweb

Web後端:MySQL基礎:正常安裝、啓動MySQL,建庫、建立用戶、修改密碼、建表

  • 開啓MySQL服務:/etc/init.d/mysql start
    image
  • 輸入mysql -u root -p使用root權限進入,默認密碼爲password
    image
  • 查看基本信息:show databases;
    image
  • 修改密碼
    • use mysql;(這裏的mysql是上一步中查詢到的數據庫名稱)
    • select user, password, host from user;(mysql庫中的user表中存儲着用戶名、密碼與權限)
    • UPDATE user SET password=PASSWORD("新密碼") WHERE user='root';
    • 更新權限:flush privileges;
    • 退出:quit;
  • 創建數據庫:create database 數據庫名稱;
    image
  • 查看存在的數據庫:show databases;
    image
  • 使用上面新建立的數據庫:use zyx;
  • 創建數據庫表:create table 表名 (字段設定列表);(並設置字段基本信息)
    image
  • 查看錶信息:show tables;
    image
  • 插入數據:insert into 表名 values('值1','值2','值3'...);
    image
  • 查詢表中的數據:select * from 表名;
    image
  • 增長新用戶:grant select,insert,update,delete on 數據庫.* to 用戶名@登陸主機(能夠是localhost,也能夠是遠程登陸方式的IP) identified by "密碼";(意思是將對某數據庫的全部表的select,insert,update,delete權限授予某ip登陸的某用戶)
    image
  • 增長新用戶後,使用新的用戶名和密碼進行登陸:mysql -u zyx -p
    image
    登錄成功,即說明增長新用戶成功。

Web後端:編寫PHP網頁,鏈接數據庫,進行用戶認證

  • /var/www/html目錄下新建一個PHP測試文件phptest.php

    <?php
    echo ($_GET["a"]);
    include($_GET["a"]);
    echo "This is my php test page!<br>";
    ?>
  • 在瀏覽器網址欄中輸入localhost:80/phptest.php?a=/etc/passwd,可看到/etc/passwd文件的內容
    image
  • 利用PHP和MySQL,結合前面編寫的登陸網頁進行登陸身份認證(注意要與前端action指定的php名稱對應,注意對應本身的庫名和表名),修改後的login.php代碼以下:

    <?php
    $uname=$_POST["username"];
    $pwd=$_POST["password"];
    echo $uname;
    $query_str="SELECT * FROM login_table where username='$uname' and password='$pwd';";
    $mysqli = new mysqli("127.0.0.1", "zyx", "158138", "zyx");
    
    /* 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> {$uname}:Welcome login!! <br> ";
      } 
      else {
          echo "<br> login failed!!!! <br> " ; }
      /* free result set */
      $result->close();
    }
    $mysqli->close();
    ?>
  • 在瀏覽器輸入127.0.0.1/login.html訪問本身的登陸界面
  • 輸入用戶名和密碼進行認證,成功登陸以下圖所示
    image

最簡單的SQL注入,XSS攻擊測試

  • SQL注入
    • 在瀏覽器輸入127.0.0.1/login.html訪問本身的登陸界面
    • 在用戶名輸入框輸入' or 1=1#,密碼任意輸入,可登錄成功
      image
    • 咱們輸入的用戶名和咱們代碼中的select語句組合起來變成了select * from users where username='' or 1=1#' and password=''#至關於註釋符,把後面的內容都註釋掉;而1=1是永真式,即這個條件永遠成立,因此無論密碼是否輸入正確,都可以成功登錄!
  • XSS攻擊
    • 將一張圖片放在/var/www/html目錄下,命名爲1.jpg
    • 在瀏覽器輸入127.0.0.1/login.html訪問本身的登陸界面
    • 在用戶名輸入框中輸入<img src="1.jpg" />,密碼隨意輸入,就能夠讀取到圖片
      image

返回目錄


實驗總結與體會

  • 本次實驗有對以前所學知識的整合深化和應用。在前端後臺編程這裏,在上學期的web安全課程中就有接觸過,對數據庫MySQL也有一些基本的瞭解,此次實驗也很好的幫咱們回顧了上學期可能快要忘記的一些知識,經過實踐更好的進行了理解和掌握!

參考資料

相關文章
相關標籤/搜索