20145215《網絡對抗》Exp8 Web基礎

時間  2019-11-08
標籤 網絡對抗 exp8 exp web 基礎 欄目 HTML 简体版
原文   原文鏈接

20145215《網絡對抗》Exp8 Web基礎

基礎問題回答

  1. 什麼是表單？
    • 表單是一個包含表單元素的區域，表單元素是容許用戶在表單中（好比：文本域、下拉列表、單選框、複選框等等）輸入信息的元素，表單在網頁中主要負責數據採集功能，一個表單有三個基本組成部分：表單標籤、表單域、表單按鈕；
    • 表單標籤（<form>）：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法；
    • 表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等；
    • 表單按鈕：包括提交按鈕、復位按鈕和通常按鈕，用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。
  2. 瀏覽器能夠解析運行什麼語言？
    • 支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言。
  3. WebServer支持哪些動態語言？
    • JavaScript、ASP、PHP、Ruby等腳本語言，ASP基於IIS WEB SERVER，是微軟的服務器端腳本技術，PHP基於APACHE WEB SERVER，與ASP有幾分相似，都是一種在服務器端執行的嵌入HTML文檔的腳本語言。

實踐內容

目錄

Web前端：HTML基礎

  1. 首先，咱們的Web開發是基於Apache服務器進行的，因此對於Apache的基本操做咱們是應該要掌握的，對於Apache的安裝，直接用指令sudo apt-get install apache2就能夠，因爲實驗機已經安裝好Apache，這裏就不演示了，對於Apache使用的端口咱們也能夠經過sudo vi /etc/apache2/ports.conf指令來進行修改，上次實驗中咱們就是將端口改到了80。廢話很少說，直接使用指令apachectl start打開Apache服務，使用netstat -aptn查看一下端口占用，因爲上次修改了端口文件，因此仍是佔用了80端口：
    javascript

  2. 若是打不開Apache，提示端口被佔用，能夠先使用netstat -tupln |grep 80指令查看80端口被哪些進程佔用，再用kill+進程ID殺死進程，Apache服務開啓後，咱們在瀏覽器中輸入localhost:80進行查看，如圖所示，打開了上次實驗克隆的網頁，說明咱們Apache正常工做：
    php

  3. 以後cd var/www/html進入到Apache的工做目錄下，vi test1.html新建一個含有表單的html，咱們經常使用的登陸頁面通常就是用表單向後臺提交數據，因此能夠編寫一個簡單的登陸頁面，代碼以下：html

<html>  
<head>  
<title>test</title>   
</head> 
<body>           
<table>  
    <form method ="POST" action="#" name="frmLogin"  >  
    <tr>  
    <td>用戶名：</td>  
    <td><input type="text" name="username" value="Your name" size="20" maxlength="20" /></td>  
    <td> </td>  
    <td> </td>  
    </tr>  
    <tr>  
    <td>密  碼：</td>  
    <td><input type="password" name="password" value="Your password" size="20" maxlength="20" /></td>  
    <td> </td>  
    <td> </td>  
    </tr>  
    <tr>  
    <td><input type="checkbox" name="zlogin" value="1">自動登陸</td>  
    </tr>     
    <table>  
    <tr>  
        <td><input type="submit" name="login" value="登陸" /></td>  
            <td><input type="reset" name="rs" value="重置" /></td>  
        </tr>
    </table>    
    </form> 
</table>   
</body>  
</html>

  1. 用瀏覽器打開這個網頁看看效果：
    前端

  2. 頁面比較簡陋，可是基本的登陸操做能夠實現，因爲咱們尚未編跳轉後的頁面，因此在action屬性裏面填的是#，即返回當前頁面，另外選用的method是Post，method屬性分Post和Get兩種，其主要區別有如下幾方面：
    • Get是用來從服務器上得到數據，而Post是用來向服務器上傳遞數據；
    • Get將表單中數據的按照variable=value的形式，添加到action所指向的URL後面，而且二者使用「?」鏈接，而各個變量之間使用「&」鏈接；Post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳遞到action所指向URL；
    • Get是不安全的，由於在傳輸過程，數據被放在請求的URL中，而現在現有的不少服務器、代理服務器或者用戶代理都會將請求URL記錄到日誌文件中，而後放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也能夠在瀏覽器上直接看到提交的數據，一些系統內部消息將會一同顯示在用戶面前，而Post的全部操做對用戶來講都是不可見的；
    • Get傳輸的數據量小，這主要是由於受URL長度限制，而Post能夠傳輸大量的數據，因此在上傳文件只能使用Post；
    • 使用Post傳輸的數據，能夠經過設置編碼的方式正確轉化中文；而Get傳輸的數據卻沒有變化。

  3. 因此出於安全性考慮，咱們通常都選用Post提交數據。java

Web前端：javascipt基礎

  • JavaScript是一種屬於網絡的腳本語言,已經被普遍用於Web應用開發,經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果，一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的。
  • DOM是文檔對象模型，DOM能夠以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構，換句話說，這是表示和處理一個HTML或XML文檔的經常使用方法。舉個例子，要改變頁面的某個東西，JavaScript就須要得到對HTML文檔中全部元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是經過DOM來得到的。
  1. 咱們可使用JavaScript來編寫一個驗證用戶名、密碼的規則，直接在以前的代碼上進行修改，重命名爲login_test.html，代碼以下所示：
<html>  
<head>  
<title>test</title>   
</head> 
<body>           
<table>  
    <form method ="POST" action="#" name="frmLogin"  >  
    <tr>  
    <td>用戶名：</td>  
    <td><input type="text" name="username" value="Your name" size="20" maxlength="20" onfocus="if (this.value=='Your name') this.value='';" /></td>  
    <td> </td>  
    <td> </td>  
    </tr>  
    <tr>  
    <td>密  碼：</td>  
    <td><input type="password" name="password" value="Your password" size="20" maxlength="20" onfocus="if (this.value=='Your password') this.value='';" /></td>  
    <td> </td>  
    <td> </td>  
    </tr>  
    <tr>  
    <td><input type="checkbox" name="zlogin" value="1">自動登陸</td>  
    </tr>     
    <table>  
    <tr>  
        <td><input type="submit" name="login" value="登陸" onClick="return validateLogin()"/></td>  
            <td><input type="reset" name="rs" value="重置" /></td>  
        </tr>
    </table>    
    </form> 
</table>   
 
<script language="javascript">  
    function validateLogin(){  
        var sUserName = document.frmLogin.username.value ;  
        var sPassword = document.frmLogin.password.value ;    
        if ((sUserName =="") || (sUserName=="Your name")){  
            alert("請輸入用戶名!");  
            return false ;  
        }  
       
        if ((sPassword =="") || (sPassword=="Your password")){  
            alert("請輸入密碼!");  
            return false ;  
        }  
    
    }   
</script>  
</body>  
</html>
  1. 其實很簡單，就編了一個驗證的函數，若是輸入的用戶名或者密碼爲空時，就彈出相應的對話框，而後在點擊登陸按鈕時調用執行一遍這個函數，能夠打開看看效果：

Web後端：MySQL基礎

  • 在web開發中咱們要用到後臺數據庫，而MySQL就是一個數據庫管理系統，相似的還有SqlServer、oracle等等，因爲MySQL是開放的，不收費，因此通常中小型網站的開發都選擇MySQL做爲網站數據庫。

  1. 先輸入/etc/init.d/mysql start指令開啓mysql服務，輸入mysql -u root -p，並根據提示輸入密碼，默認密碼爲p@ssw0rd，進入MySQL，注意：在MySQL中輸入命令後面都要帶一個分號做爲命令結束符：
    mysql

  2. 咱們能夠對密碼進行修改：輸入use mysql;，選擇mysql數據庫；輸入update user set password=PASSWORD("新密碼") where user='root';，修改密碼；輸入flush privileges;，更新權限；
    linux

  3. 接着輸入quit退出MySQL，從新進入，使用新密碼登陸成功，說明修改爲功：
    git

  4. 咱們先使用create database 庫名;創建一個數據庫；使用show databases;查看存在的數據庫；使用use 庫名;使用咱們建立的數據庫：
    web

  5. 接着使用create table 表名 (字段設定列表);創建數據表，數據表是數據庫中一個很是重要的對象，一個數據庫中可能包含若干個數據表；使用show tables查看存在的數據表：
    sql

  6. 使用insert into 表名 values('值1','值2','值3'...);插入數據；使用select * from 表名查詢表中的數據：

  7. 咱們還能夠在MySQL中增長新用戶，使用grant select(insert,update,delete) on 數據庫.* to 用戶名@登陸主機 identified by "密碼";指令，如圖所示，增長新用戶以後，退出，從新使用新用戶名和密碼進行登陸，登陸成功說明增長新用戶成功：

Web後端：PHP基礎

  • PHP是一種通用開源腳本語言，語法吸取了C語言、Java和Perl的特色，主要適用於Web開發領域。它能夠比CGI或者Perl更快速地執行動態網頁。用PHP作出的動態頁面與其餘的編程語言相比，PHP是將程序嵌入到HTML文檔中去執行，執行效率比徹底生成HTML標記的CGI要高許多；PHP還能夠執行編譯後代碼，編譯能夠達到加密和優化代碼運行，使代碼運行更快。
  1. 咱們能夠在/var/www/html目錄下新建一個PHP測試文件，簡單瞭解一下它的一些語法：
<?php
  echo ($_GET["a"]);
  include($_GET["a"]);
  echo "This is lxm php test page!<br>";
?>

  1. 瀏覽器打開localhost:80/lxm_test.php?a=/etc/passwd可看到/etc/passwd文件的內容，注意PHP變量大小寫敏感：

  2. 簡單測試完成後，咱們能夠利用PHP和MySQL結合以前編的登陸網頁進行簡單的用戶身份認證，這裏能夠參考老師給的代碼編寫login.php，代碼以下所示：

<?php

$uname=($_GET["username"]);
$pwd=($_GET["password"]);

/* echo $uname; */

$query_str="SELECT * FROM users where username='{$uname}' and password='{$pwd}';";

/* echo "<br> {$query_str} <br>";*/

$mysqli = new mysqli("127.0.0.1", "root", "lxm5215", "lxm_test");

/* 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> Wellcome login Mr/Mrs:{$uname} <br> ";
    } else {
        echo "<br> login failed!!!! <br> " ;
    }

    /* free result set */
    $result->close();
}


$mysqli->close();

?>

  1. 這裏作幾點說明，如圖所示圈出的部分，第一個password那個地方老師給的代碼是調用了password函數對密碼進行了加密，可是若是數據庫裏密碼沒有加密的話，最後輸入的值比對確定不會相等，登錄不成功，因此要把password那個函數去掉，第二個127.0.0.1是本機地址，root是MySQL的用戶名，lxm5215是我以前設置的登陸密碼，lxm_test是數據庫的庫名。

  2. 先將以前編的登陸網頁的login_test.html代碼中form的action屬性由#改爲login.php，即登陸後跳轉到login.php，再在火狐瀏覽器中輸入localhost:80/login_test.html訪問本身的登陸頁面：

  3. 在登陸頁面中輸入數據庫中存有的用戶名和密碼並點擊登陸進行用戶認證，若是登陸成功，顯示以下所示畫面：

  4. 若是登陸失敗，以下圖所示：

  5. 咱們還能夠再編一個更加友好的頁面welcome.php，再在login.php中加一行代碼header("Refresh:3;url=welcome.php");，實如今3秒以後跳轉到welcome.php頁面：

  6. 最終登陸成功後以下圖所示：

SQL注入

  • SQL注入，就是經過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。具體來講，它是利用現有應用程序，將（惡意的）SQL命令注入到後臺數據庫引擎執行的能力，它能夠經過在Web表單中輸入（惡意）SQL語句獲得一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。

  1. 在用戶名輸入框中輸入' or 1=1#，密碼隨便輸入，這時候的合成後的SQL查詢語句爲select * from lxmtable where username='' or 1=1#' and password=''，#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件確定恆成立，因此可以成功登錄：

  2. 咱們還能夠經過SQL注入將用戶名和密碼保存在數據庫中，可是得修改一下以前的代碼，由於咱們以前編的代碼中if ($result = $mysqli->query($query_str))這條判斷語句不容許多條sql語句執行，因此將它改爲if ($result = $mysqli->multi_query($query_str))便能實現執行多個sql語句，接着在用戶名輸入框中輸入';insert into lxmtable values('zn','5214','17888811781');#，拆開來看就是SELECT * FROM lxmtable WHERE username='';、insert into lxmtable values('zn','5214','17888811781');，接着登陸，出現以下所示頁面：

  3. 咱們能夠在數據庫中查詢一下是否真的添加成功，如圖所示說明插入成功：

  4. 接着使用新插入的用戶名和密碼進行登陸，登陸成功：

XSS攻擊測試

  • XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫爲XSS。XSS是一種常常出如今web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。好比這些代碼包括HTML代碼和客戶端腳本。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型的漏洞因爲被駭客用來編寫危害性更大的phishing攻擊而變得廣爲人知。對於跨站腳本攻擊，黑客界共識是：跨站腳本攻擊是新型的「緩衝區溢出攻擊「，而JavaScript是新型的「ShellCode」。

  1. 咱們能夠進行一個簡單的測試，在用戶名輸入框中輸入<img src="5230henshuai.png" />20145215</a>讀取/var/www/html目錄下的圖片：

  2. 點擊登陸後咱們能夠看到圖片：

發帖和會話管理的實現

  1. 咱們能夠利用PHP實現會話管理，這部分的詳細代碼參考ltc同窗的代碼，將代碼依舊放在/var/www/html目錄下，在瀏覽器中輸入http://localhost:80/logIn.php，進行登陸：

  2. 登陸成功後如圖所示：

  3. 點擊start a new post!發帖，進入以下界面：

  4. 提交以後跳轉到以下界面，能夠選擇查看發過的帖子、繼續發帖、返回或者退出登陸：

  5. 這個時候點擊CHECK查看發過的帖子，可是卻什麼內容都沒有，因爲這個操做是經過從data.txt文件中讀取以前發帖時保存的記錄來查看發帖內容，可是在/var/www/html目錄下根本沒有找到這個文件，這就說明以前建立也沒有成功，後面發現/var/www/html底下文件默認的都是屬於root的，其餘用戶沒有權限進行操做，因此咱們能夠先使用touch data.txt建一個data.txt文件，再對該文件進行加權：

  6. 再次發帖查看，能夠成功顯示以前的發帖歷史：

實驗總結與體會

  • 此次實驗學的東西主要是和web有關，內容較多，大多數都比較基礎，以前的課程中也涉及過一部分。不少東西仍是挺有意思的，像sql注入、XSS攻擊等，雖然目前不少網站都對這些攻擊有所防範，可是對一些較高級的sql注入攻擊手段仍是沒能很好的解決，這些都值得咱們去深刻研究。此次實驗也給咱們提了個醒，咱們之後在進行一些web開發時，不能只考慮功能，仍是要儘可能去避免一些常見的攻擊手段，以此來提升咱們的安全性。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程