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

時間 2019-11-18

標籤網絡對抗技術 exp8 exp web 基礎欄目 HTML 简体版

原文原文鏈接

原理與實踐說明

1.實踐內容

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

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

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

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

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

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

2.基礎問題回答

1.什麼是表單？web

表單在網頁中主要負責數據採集功能。一個表單有三個基本組成部分：sql

表單標籤：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。數據庫

表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。apache

表單按鈕：包括提交按鈕、復位按鈕和通常按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。

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

支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言。

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開發者可以快速地寫出動態產生頁面。

實踐過程

Web前端HTML

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

編寫web程序：

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

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

</head>

<body>

    <h2>Angel of Dead</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目錄默認目錄。
簡單分析一下段代碼：

head部分使用meta標籤設置屬性，通常都是自動生成的（在某些IDE中），須要注意的是charset屬性若是須要中文的話就得改爲utf-8

body部分很簡單，一個form裏面三個input標籤，分別是email框、pwd框和submit按鈕，主要靠type屬性區分。

保存後直接雙擊或者再瀏覽器輸入127.0.0.1/文件名.html就能夠了。如圖：

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標籤的下面，分析一下代碼：

script標籤以內的爲javascipt代碼部分

功能名叫validateLogin，使用的話須要在標籤中設置事件，下面會提到。

var sUserName定義變量，document.form_login.Email.value是一個方法，表示把這個document中名叫form_login表單的名叫Email的input的value賦值給

sUserName下面一句話同理。

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>

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

input-Email和input-Password標籤中多了 onfocus屬性（事件），onfocus ="if (this.value=='Your email') this.value='';"，意思是在對象得到焦點時發生

this.value=='Your email'事件

input-submit標籤多了onClick屬性（事件） onClick="return validateLogin()"，意思是點擊事件發生後傳值。

method="post"：form的提交方法爲post

Web後端

輸入/etc/init.d/mysql start 開啓MySQL服務

輸入mysql -u root -p使用root權限進入

新建一個數據庫create database 數據庫名稱;，以後能夠用show databases;查看:

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

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

寫PHP文件

<?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", "EST5319");


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();
?>

爲PHP文件開頭和結尾；

$uname=$_POST["Email"]; 將使用post方法的名叫Email的input的值賦給uname，下面同理；

echo $uname; 在界面輸出 uname的值；

$query_str="SELECT * FROM users_table where username='$uname' and password='$pwd';";定義一個SQL語句的string，在users_table表中查找

username='$uname' and password='$pwd ；

$mysqli = new mysqli("127.0.0.1", "testuser", "123456", "test5322"); 地址，用戶，密碼，數據庫名；

if ($mysqli->connect_errno) 報錯用，沒鏈接上就報錯；

if ($result = $mysqli->query($query_str)) 判斷query($query_str)的結果是否爲真，爲真則 echo "{$uname}:Welcome!!! "; 不然就 echo "ogin failed!!!! " ;

測試一下。瀏覽器進入127.0.0.1/login.php

成功。

將以前的html文件中的代碼form action的設定定位login.php。

進入127.0.0.1/simple_form.html