2017-2018-2 《網絡對抗技術》20155322 Exp8 web基礎

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

[-= 博客目錄 =-]

1-實踐目標

1.1-網絡欺詐防範

本實踐的目標理解經常使用網絡欺詐背後的原理，以提升防範意識，並提出具體防範方法。javascript

返回目錄php

1.2-實踐內容

  • Web前端HTML(0.5分)
    能正常安裝、啓停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTML。html

  • Web前端javascipt(0.5分)
    理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規則。前端

  • Web後端：MySQL基礎：正常安裝、啓動MySQL，建庫、建立用戶、修改密碼、建表(0.5分)java

  • Web後端：編寫PHP網頁，鏈接數據庫，進行用戶認證(1分)mysql

  • 最簡單的SQL注入，XSS攻擊測試(1分)web

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

課題負責人須要完成：登錄後能夠發貼；會話管理。
返回目錄數據庫

1.3-實踐要求

  • 基礎問題回答
    • 什麼是表單
    • 瀏覽器能夠解析運行什麼語言。
    • WebServer支持哪些動態語言
  • 實驗總結與體會
  • 實踐過程記錄
  • 報告評分 1.5分
    • 報告總體觀感 0.5分
    • 報告格式範圍，版面整潔 加0.5。
    • 報告排版混亂，加0分。
  • 文字表述 1分
    • 報告文字內容很是全面，表述清晰準確 加1分。
    • 報告邏輯清楚，比較簡要地介紹了本身的操做目標與過程 加0.5分。
    • 報告邏輯混亂表述不清或文字有明顯抄襲可能 加0分

返回目錄apache

2-實踐過程

2.1 Web前端HTML

本實驗使用的環境是Kali2，默認已安裝Apache，直接使用service apache2 start命令打開Apache服務便可，輸入在瀏覽器輸入127.0.0.1能夠查看Apache是否已經啓動:

下面咱們開始編寫前端HTML文件，下面是我找別人的一個demo：

<html>
<head>
<title>CryptoTeam</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

    <h2>This is a Login Form</h2>
        <form action="login" method="post">
            <input placeholder="E-mail" name="Name" class="user" type="email">
            <br>
            </br>
            <input  placeholder="Password" name="Password" class="pass" type="password">
            <br>
            </br>
            <input type="submit" value="Login">
        </form>

</body>
</html>

咱們把這個文件放到/var/www/html下，由於這個是Apache目錄默認目錄。
簡單分析一下段代碼：

  1. head部分使用meta標籤設置屬性，通常都是自動生成的（在某些IDE中），須要注意的是charset屬性若是須要中文的話就得改爲utf-8
  2. body部分很簡單，一個form裏面三個input標籤，分別是email框、pwd框和submit按鈕，主要靠type屬性區分。
    保存後直接雙擊或者再瀏覽器輸入127.0.0.1/文件名.html就能夠了。如圖：

返回目錄

2.2 Web前端javascipt

下面咱們添加javascipt，主要功能是檢測email框或者pwd框是否輸入爲空：

<script language="javascript">  
    function validateLogin(){  
        var sUserName = document.form_login.Email.value ;  
        var sPassword = document.form_login.Password.value ;    
        if ((sUserName =="") || (sUserName=="Your email")){  
        alert("user email!");  
        return false ;  
        }  

        if ((sPassword =="") || (sPassword=="Your password")){  
        alert("password!");  
        return false ;  
        }  

    }   
</script>

我直接把這一段加到html文件的form標籤的下面，分析一下代碼：

  1. script標籤以內的爲javascipt代碼部分
  2. 功能名叫validateLogin，使用的話須要在標籤中設置事件，下面會提到。
  3. var sUserName定義變量，document.form_login.Email.value是一個方法，表示把這個document中名叫form_login表單的名叫Email的input的value賦值給sUserName下面一句話同理。
  4. if ((sUserName =="") || (sUserName=="Your email")) 若是某一項（這裏爲sUserName）爲空，使用alert方法彈窗報錯，返回false，下面一個同理

比較直觀的邏輯，由於這裏涉及到對錶單的輸入進行操做，因此咱們須要對以前表單的一些屬性進行修改：

<form action="login" method="post" name="form_login">
            <input placeholder="E-mail" name="Email" class="user" type="email" onfocus="if (this.value=='Your email') this.value='';" />
            <br>
            </br>
            <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>
            <br>
            </br>
            <input type="submit" value="Login" onClick="return validateLogin()"/>
        </form>

如上，你們比較一下就能夠發現：

  1. input-Email和input-Password標籤中多了 onfocus屬性（事件），onfocus ="if (this.value=='Your email') this.value='';"，意思是在對象得到焦點時發生this.value=='Your email'事件
  2. input-submit標籤多了onClick屬性（事件） onClick="return validateLogin()"，意思是點擊事件發生後傳值。
  3. method="post"：form的提交方法爲post，後面寫後端的時候要注意這個！
    也比較直觀，咱們試一下：

    bingo~

返回目錄

2.3 Web後端

下面咱們來進行後端編程，輸入/etc/init.d/mysql start 開啓MySQL服務

輸入mysql -u root -p使用root權限進入，默認的密碼是你用戶的pwd，咱們登陸進取後能夠改密碼：

嗯，出現了一點小問題，看錯誤提示，說沒有選擇數據庫，那咱們就選一個再改：

輸入flush privileges;，更新權限,而後退出exit從新登陸一下：


看起來貌似沒問題了，咱們新建一個數據庫create database 數據庫名稱;，以後能夠用show databases;查看:

使用use 數據庫名稱;使用咱們建立的數據庫，而後在裏面建立一個數據表create table 表名 (字段設定列表);

插入數據insert into 表名 values('值1','值2','值3'...);：

OK，進行到這裏沒問題了

下面是額外的操做，若是你想使用其餘用戶登陸的話，能夠將這個數據庫受權給另一個用戶：
grant select,insert,update,delete on 數據庫名.* to 用戶名@登陸主機 identified by "密碼";
解釋一下命令，
grant，受權；
select,insert,update,delete，是權限的類別；
數據庫名.*，是數據庫xxx下的全部表；
to 用戶名@登陸主機，用戶名你本身的，能夠是遠程用戶，登陸主機能夠寫本機localhost，也能夠是遠程IP地址；
identified by "密碼"，至關於設置登陸密碼；
這樣寫的大概意思就是告訴MySQL，那個登陸名是xxx，密碼是xxx，地址是xxx的能夠操做個人xxx數據庫，容許的操做是select,insert,update,delete。
登陸一下MySQL試一試：

沒問題。

下面是寫PHP文件，對於咱們的前端HTML文件來講，通常只進行前端上的操做，進行數據的處理雖然也能夠，可是會使得文件十分臃腫，而且因爲其餘人訪問HTML文件時是會下載你的這個文件的，處理數據的操做會被人家看到，而且數據處理通常是要放在服務器這邊跑的……
那麼咱們再copy一下別人的代碼（懶）：

<?php
$uname=$_POST["Email"];
$pwd=$_POST["Password"];
echo $uname;
$query_str="SELECT * FROM users_table where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "testuser", "123456", "test5322");


if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
echo "connection ok!";

if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){
            echo "<br> {$uname}:Welcome!!! <br> ";
    } 
    else {
        echo "<br> login failed!!!! <br> " ; }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

雖然是copy，可是咱們仍是要看懂這個操做的原理的，繼續進行分析：

  1. 爲PHP文件開頭和結尾；
  2. $uname=$_POST["Email"]; 將使用post方法的名叫Email的input的值賦給uname，下面同理；
  3. echo $uname; 在界面輸出 uname的值；
  4. $query_str="SELECT * FROM users_table where username='$uname' and password='$pwd';";定義一個SQL語句的string，在users_table表中查找username='$uname' and password='$pwd ；
  5. $mysqli = new mysqli("127.0.0.1", "testuser", "123456", "test5322"); 地址，用戶，密碼，數據庫名；
  6. if ($mysqli->connect_errno) 報錯用，沒鏈接上就報錯；
  7. if ($result = $mysqli->query($query_str)) 判斷query($query_str)的結果是否爲真，爲真則 echo "
    {$uname}:Welcome!!!
    "; 不然就 echo "
    login failed!!!!
    " ;

很直觀的代碼，咱們試試吧，在瀏覽器地址輸入127.0.0.1/login.php：

嗯？不對嗎？檢查一下用戶和密碼：

好像沒錯啊，試試用root用戶：


好像仍是錯了？
回頭檢查一下，找到緣由：在受權的時候我受權成數據表而不是數據庫了……，趕忙改過來，其實能夠用grant all將全部權限都給出去的。

而後咱們試試登陸127.0.0.1/test5322_index.html看看，由於以前的頁面只有前端沒後端，沒法處理數據：

嗯哼，找不到file，多是我某個地方的文件名輸入錯了，check一下代碼：

<form action="login" method="post" name="form_login">

在HTML文件中找到表單的action屬性，發現這個是以前我隨便輸入action，由於那時沒有後端文件，在有login.php文件後，也要將相應的action屬性改成action="login.php"再試試：

bingo

返回目錄

2.4 SQL注入&XSS攻擊測試

  • SQL注入，咱們直接用' or 1=1#吧，直接在用戶名中輸入：

    這……這一波碰巧防止了咱們的注入啊23333，一看就知道是前端的問題，check一下HTML文件，發現：
<input placeholder="E-mail" name="Email" class="user" type="email" onfocus="if (this.value=='Your email') this.value='';" />

這裏的input標籤的類別屬性是type="email"，怪不得只能輸入email呢，這裏咱們爲了實現SQL注入就僞裝它不安全的使用了type="text"這個類別吧！
這樣的話咱們再輸入' or 1=1#就不會報錯了，這樣的話傳值後咱們後端生成的SQL語句爲：select * from users where username=' ' or 1=1 #' and password=' '
其中username=' '爲假，1=1爲真，用or鏈接，username=' ' or 1=1就爲真了，而後再註釋掉' and password=' '，MySQL理解爲：

select * from users where username=' ' or 1=1

這固然是永真的，因此MySQL就：

  • XSS攻擊
    咱們直接XSS一張圖片，在用戶名中輸入<img src="test.jpg" />：

    bingo，不細說，至關因而將代碼植入到頁面中，其餘用戶在登陸的時候會加載這段代碼，形成各類影響吧，主要的問題仍是構造這段代碼。
    相關的知識網上不少，畢竟是熱門攻擊手法，之後有機會開單篇學習。

返回目錄

2.5 基礎問題回答

  • 什麼是表單？
    表單在網頁中主要負責數據採集功能。一個表單有三個基本組成部分：
    表單標籤：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
    表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
    表單按鈕：包括提交按鈕、復位按鈕和通常按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。
  • 瀏覽器能夠解析運行什麼語言？
    支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言。
  • 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開發者可以快速地寫出動態產生頁面。

返回目錄

3-參考資料&實踐體會

實踐體會

此次試驗比較簡單，我是照着同窗的博客作的，由於這個時間段碰上大創答辯、共建結題和國賽半決賽，因此決定這樣寫。
作實驗加上問題的解決一共花了一個半小時，由於比較熟悉HTML和JS，之前也搭建過網站和博客，遇到問題解決的也快。

參考資料

返回目錄

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程