Exp 8 Web基礎 20164302 王一帆

時間  2019-11-20
標籤 exp web 基礎 欄目 HTML 简体版
原文   原文鏈接

 

1.實踐具體要求

（1）Web前端HTML(0.5分)javascript

         能正常安裝、啓停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTML。php

（2）Web前端javascipt(0.5分)html

         理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規則。前端

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

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

（5）最簡單的SQL注入，XSS攻擊測試(1分)sql

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

2.基礎問題回答

（1）什麼是表單？apache

　　  表單在網頁中主要負責數據採集功能。一個表單有三個基本組成部分：表單標籤、表單域、表單按鈕編程

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

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

　　  表單按鈕：包括提交按鈕、復位按鈕和通常按鈕；用於將數據傳送到服務器上的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開發者可以快速地寫出動態產生頁面。

3.實踐過程

3.1Web前端：HTML基礎

（1）kali默認已安裝Apache，使用 service apache2 start 命令打開Apache服務

2）在瀏覽器輸入 127.0.0.1 能夠打開Apache的默認網頁

（3）進入 /var/www/html 目錄下（即Apache目錄下），新建一個簡單的含有表單的html文件，4302.html。

 代碼以下：

<html>
<head>
<title>CryptoTeam</title>
<!-- Meta tag Keywords -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tag Keywords -->
</head>

<body>
<!-- main -->
<!--//header-->
    <h2>Login Quick</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>
<!--//main-->
</body>
</html>

（4）在瀏覽器中打開

3.2Web前端：JavaScript基礎

（1）在原有 4302.html的基礎上，添加一段JavaScript代碼，以完成對用戶是否填寫郵箱和密碼的判斷。修改後的20164302.html

<html>
<head>
<title>CryptoTeam</title>
<!-- Meta tag Keywords -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tag Keywords -->
</head>

<body>
<!-- main -->
<!--//header-->
    <h2>Login Quick</h2>
        <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>
<!--//main-->
<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>  

</body>
</html>

（2）在瀏覽器訪問 http://127.0.0.1/20164302.html ，若用戶郵箱或密碼未填寫就直接提交，網頁會呈現以下提示

3.3Web後端：MySQL基礎

（1）執行 /etc/init.d/mysql start 命令，開啓MySQL服務

（2）輸入 mysql -u root -p 使用root權限進入，默認的密碼是 password 

（3）使用 create database 數據庫名稱; 創建數據庫

（4）使用 show databases; 查看存在的數據庫

（5）使用 use 數據庫名稱; 使用咱們建立的數據庫

（6）使用 create table 表名 (字段設定列表); 創建數據庫表，並設置字段基本信息 create table login_table (username VARCHAR(20), password VARCHAR(20)); 

（7）使用 show tables; 查看錶信息

（8）使用  insert into 表名 values('值1','值2','值3'...); 插入數據 insert into login_table values('hello@163.com', 'world'); 

（9）使用 select * from 表名; 查詢表中的數據

10）在MySQL中增長新用戶，使用 grant select,insert,update,delete on 數據庫.* to 用戶名@登陸主機(能夠是localhost,也能夠是遠程登陸方式的IP) identified by "密碼"; 意思是：將對某數據庫的全部表的select,insert,update,delete權限授予某ip登陸的某用戶

（11）增長新用戶後，退出，使用新的用戶名和密碼進行登陸

 3.4Web後端：PHP基礎

（1）在 /var/www/html 目錄下新建一個PHP測試文件20164302.php

（2）瀏覽器打開localhost:80/20164302.php

（3）在瀏覽器網址欄中輸入 http://127.0.0.1/test.php?id=/etc/passwd ，可看到/etc/passwd文件的內容

（4）利用PHP和MySQL，結合以前編寫的登陸網頁進行登陸身份認證

（這一部分作了好久，以前嘗試了不少次還不容才成功，改過html的代碼，php的代碼也改了不少次，數據庫也重建了好屢次，最終忽然就成功了，真正出現問題的緣由還不太明確）

因此後面的部分信息可能前面的對不上，由於一直在不能的試，但步驟是同樣的

數據庫名：wang 表名：testtable 在表中添加用戶和密碼分別爲：4302@qq.com 123456

修改後的164302.html代碼

<html>
<head>
<title>login</title>
</head>
<h1>Login</h1>
<body>
<table>
 <form action="login.php" method="GET" name="form_login">
<tr>
<td>username:</td>
<td><input type="text" name="username" size="20" maxlength="20"onfocus="if (this.value=='You name')this.value='';"/></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password" size="20" maxlength="20"onfocus="if (this.value=='You password')this.value='';"/></td>
</tr>
<table>
<tr>
<td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td>
<td><input type="reset" name="rs" value="reset"/></td>
</tr>
</table>
</from>
</table>

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

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

    }   
</script>  

</body>
</html>

修改後的login.php代碼

<?php
$uname=($_GET["username"]);
$pwd=($_GET["password"]);
echo $uname;
$query_str="SELECT * FROM testtable where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "root", "123456", "wang");

/* 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!!! <br> ";
    } 
    else {
        echo "<br> login failed!!!! <br> " ; }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

成功的數據庫

（5）在瀏覽器輸入 127.0.0.1/164302.html 訪問本身的登陸界面，輸入用戶名和密碼，登陸後界面如圖所示，說明登陸成功

 

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

1.SQL注入

在用戶名輸入框輸入 ' or 1=1# ，密碼任意輸入，可登錄成功。

輸入的用戶名與select語句組合變成 select * from users where username='' or 1=1#' and password='' ,#起到註釋做用屏蔽了密碼判斷語句，而1=1是1，因此可以成功登錄。

2.XSS攻擊

將圖片放在 /var/www/html 目錄下，在用戶名輸入框輸入 <img src="pk.jpg" /> ，密碼任意，就成功登陸

縮小看一下，嘿嘿

是可愛的皮卡丘沒錯了！

4 實驗心得

        此次實驗比前面幾回的實驗難度都要高一點，不只有先後的連貫，在html和php的編寫上也是一個很大的挑戰，本身的編程能力不是很高，只能是不停的拿着學長學籍的代碼去試去改，過程很艱難，但結果是好的，對HTML和PHP文件都有了進一步的瞭解，雖然不能弄懂，可是有點小收穫老是不錯的。

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