20145221高其_Web基礎

時間 2019-12-11

標籤 web 基礎欄目 HTML 简体版

原文原文鏈接

20145221高其_Web基礎

實踐目標

（1）Web前端HTML
（2）Web前端javascipt
（3）Web後端：MySQL基礎：正常安裝、啓動MySQL，建庫、建立用戶、修改密碼、建表
（4）Web後端：編寫PHP網頁，鏈接數據庫，進行用戶認證
（5）最簡單的SQL注入，XSS攻擊測試
（6）發帖和會話管理

Apache

Apache就是一個Web服務器，經過該軟件能夠經過本機IP和預設的端口來訪問該服務器上的網頁
開啓apache服務：service apache2 start
若是沒有安裝，請先安裝：sudo apt-get install apache2
相關重要存儲位置：
- /etc/apache2/apache2.conf：存儲apache2的配置
- /var/www/html：存儲網頁
- /var/log/apache2/error.log：存儲報錯信息
介於以前默認設置爲80端口，特將端口改成：5221
查看端口占用狀況以下：
開啓後能夠登陸本地主頁查看網址是否正常：http://127.0.0.1:5221
若是正常，便可繼續執行，該步驟是整個實驗的基礎，保證Web服務正常開啓

前端編程

這一部分在上劉老師《網絡安全編程基礎》課程中，已經學習過html的簡單語法，對錶單也有一個大體的瞭解
因此在這裏編寫了一個簡單的表單界面
- 前端代碼（含js）
其中action部分表示的是，在點擊submit提交後將會轉向哪一個請求，就上面這個代碼來看，由於本地尚未這個php文件，因此點擊後確定是Not Found

後端編程 PHP

通常來講咱們有用到最多的就是javascript和php兩種腳本語言了

javascript

是一種腳本語言，通常能夠寫在html中<head>部分，響應用戶的各類操做
和java比較相似，只不過全部的變量聲明都是用var來進行
下面給出一個簡單的javascript腳本例子

<script language="javascript">  
    function isEmpty(){  
        var id = document.login.usrname.value ;  
        var pwd = document.login.password.value ;    
        if (id ==""){  
            alert("請輸入用戶名!");  
            return false ;  
        }
       
        if (pwd ==""){  
            alert("請輸入密碼!");  
            return false ;  
        } 
    }   
</script>

上述代碼的功能是：編寫驗證用戶名和密碼的規則，好比用戶名和密碼不能爲空

php

PHP，一個嵌套的縮寫名稱，是英文超級文本預處理語言（PHP:Hypertext Preprocessor）的縮寫。PHP 是一種 HTML 內嵌式的語言，PHP與微軟的ASP很有幾分類似，都是一種在服務器端執行的嵌入HTML文檔的腳本語言，語言的風格有相似於C語言，如今被不少的網站編程人員普遍的運用。
一個簡單的php測試代碼：

?php
  echo ($_GET["A"]);
  include($_GET["A"]);
  echo "this is my first php page!<br>";
?>
20145221

效果如圖所示：

MYSQL & 後端

MYSQL

安裝：apt-get install mysql-server mysql-client mysql-workbench
啓動：/etc/init.d/mysql start
登陸mysql，並輸入密碼：p@ssw0rd
此處能夠修改本身的密碼：update user set password=PASSWORD("新密碼") where user='root';
輸入exit，從新進入便可
搭建數據庫
- 首先，建立數據庫：creat database gq;
- 查看數據庫：show databases;
- 使用數據庫：use gq;
- 接着，在數據庫中建立數據表：create table info (usrname VARCHAR(10), password VARCHAR(64), email VARCHAR(20), type VARCHAR(10));
- 查看數據表：show tables;
- 添加數據，格式：insert into 表名 values('值1','值2','值3'...);
- 查看數據表：select * from info
- 注：能夠根據須要增添更多記錄javascript

後端

測試

此時咱們能夠編寫一個簡單的php進行驗證，與前端代碼配套，能夠提取出用戶名、密碼、身份類別信息：

<?php
    echo ($_GET["usrname"]);
    echo ($_GET["password"]);
    echo ($_GET["identity"]);
    echo "<br>php page 5221!<br>";
?>

注：進行簡單驗證後說明，點擊「登陸」後能夠正常跳轉到php腳本，說明代碼應該沒什麼問題，接下來就應該往其中添加一些有實際意義的代碼了。php

編寫

咱們須要用php腳本語言來鏈接數據庫與前端輸入，將輸入結果傳入到後臺（php腳本），而且連接相應的數據庫，利用SQL語句讀取數據庫中的記錄，與輸入進行比對，成功便可正常登陸。

<?php

$uname=($_GET["usrname"]);
$pwd=($_GET["password"]);
$type=($_GET["identity"]);

/* echo $uname; */

$query_str="SELECT * FROM info where usrname='{$uname}' and password=password('{$pwd}') and type='{$type}';";

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

$mysqli = new mysqli("127.0.0.1", "root", "20145221", "gq");

/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
echo "connection ok!<br> ";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){
        echo "Wellcome login Mr/Mrs:{$uname} <br> ";
    } else {
        echo "login failed!!!! <br> " ;
    }

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

$mysqli->close();
?>

登陸成功測試效果：
登陸失敗測試效果：
爲了能讓登陸失敗的用戶能夠從新返回登陸界面，能夠在php中定義這樣一段代碼：header("Refresh:3;url=login.html");，能夠實現3秒後從新跳回login.html（最終代碼見後文連接）html

簡單SQL注入與XSS

SQL注入

SQL本是查詢語句，能夠實現對數據庫的增、刪、改、查等操做，是操做數據庫數據的直接手段，可是SQL語句是存在缺陷的，根據前文中SQL的編寫過程能夠體會，當輸入某些特定格式的字符串的時候，會利用語法避開一些檢查，一般也叫這樣的密碼爲「萬能密碼」

獲取權限

在用戶名輸入框中輸入' or 1=1#，密碼隨便輸入，這時候的合成後的SQL查詢語句爲select * from info where usrname='' or 1=1#' and password='' and type=''，#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件確定恆成立，因此可以成功登錄：
只要弄懂sql語句查詢語法或者上網搜索，就能夠找到不少這樣的萬能密碼

刪除用戶

既然sql語句能夠增刪查改，那咱們也能夠經過某個格式，將表中的記錄刪掉：
- ';DELETE FROM info WHERE usrname='gq';#
- 由於上述語句是2句，因此得改改php代碼：if ($result = $mysqli->multi_query($query_str))，固然原來的寫法本就是防範SQL注入的一種方法
將該SQL注入語句輸入用戶名，密碼隨便輸入，點擊登陸，會提示失敗（由於此時的目的並非登陸獲取權限，而是刪除gq這條記錄）
查看數據庫，比對先後的不一樣，刪除結果：
- 顯然，若是再用以前的帳戶密碼是登陸不上去了前端

XSS

XSS又叫CSS (Cross Site Script) ，跨站腳本攻擊。它指的是惡意攻擊者往Web頁面裏插入惡意html代碼，當用戶瀏覽該頁之時，嵌入其中Web裏面的html代碼會被執行，從而達到惡意的特殊目的。XSS屬於被動式的攻擊，由於其被動且很差利用，因此許多人常呼略其危害性。
簡單的XSS實踐：
- 用戶名輸入：<img src="5221.jpg">gq</a>
- 密碼隨意，但要保證該圖片物理位置和網頁在同一個文件夾下

發帖和會話管理

咱們能夠利用PHP實現會話管理，代碼託管地址：點擊此處
在瀏覽器中輸入http://127.0.0.1:80/logIn.php，進行登陸：
登陸成功後：
點擊start a new post，能夠開始發帖
提交內容後，會進入test.php頁面，再次點擊CHECK能夠查看會話記錄：
- 經過上述代碼，能夠查看到會把會話記錄寫進data.txt，可是我點擊一次後並無相關記錄的顯示，想一想多是權限問題並不能直接在/var/www/html文件夾下生成文件，因此前後執行命令，新建該文件並賦予可操做的最高權限：touch data.txt和chmod 777 data.txt便可
- 再次點擊CHECK，看見以下圖所示的會話記錄：

總結

代碼託管

本次實驗全部代碼託管地址：web基礎

什麼是表單

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

瀏覽器能夠解析運行什麼語言

HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言。
超文本標記語言：HTML
可擴展標記語言：XML
腳本語言：ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等

WebServer支持哪些動態語言

ASP語言，PHP語言和JSP語言
- ASP：即Active Server Pages，是MicroSOft公司開發的服務器端腳本環境，可用來建立動態交互式網頁並創建強大的web應用程序。
- PHP：即Hypertext Preprocessor，是一種通用開源腳本語言。語法吸取了C語言、Java和Perl的特色，主要適用於Web開發領域。PHP獨特的語法混合了C、Java、Perl以及PHP自創的語法。
- JSP：即Java Server Pages，其根本是一個簡化的Servlet設計。JSP技術有點相似ASP技術，它是在傳統的網頁HTML文件中插入Java程序段和JSP標記，從而造成JSP文件，)。用JSP開發的Web應用是跨平臺的，既能在Linux下運行，也能在其餘操做系統上運行。

實驗感想

本次的實驗能夠算是一個小的web服務系統。系統雖小，五臟俱全。整個實驗涵蓋了前端html代碼編寫、javascript代碼編寫、php代碼編寫、sql語句執行、apache服務調試、mysql系統搭建……
知識點不少，須要瞭解的東西也很多，但整體來講就是一根主線：apache(html)<——>php<——>mysql，apache負責搭建web服務掛載html網頁，mysql負責數據庫的維護，php負責爲前兩者「搭橋牽線」，使前端與後臺數據可以交互，弄清楚這層關係，對這個實驗也就有了一個總體的把握
涉及到《網絡攻防》這門課的知識，我想說的是《web基礎》實驗內容是網絡攻防中web類的基礎，若是不掌握一些基本的web相關知識與語法，不接觸web類基礎的編程，是沒法理解一些攻防原理的，就像本次簡單的SQL注入和XSS攻擊，這些都是基於語法的漏洞來實現攻擊的，因此要夯實web基本功
就實驗內容來講，和上學期劉老師的《網絡安全編程基礎》最後一個大實驗仍是很類似的，那個實驗的要求是要用apache(jsp)<——>xml<——>JDBC<——>Access，不管是從代碼仍是從邏輯上都比此次的要複雜一些，此次感受一個php就能解決不少事情，可見php的功能確實強大，實際實現中應該用php的較多吧！