20155312 張競予 Exp 8 Web基礎

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

Exp 8 Web基礎

目錄

基礎問題回答

（1）什麼是表單

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

（2）瀏覽器能夠解析運行什麼語言。

瀏覽器只看得懂html、css、js、xml等語言，像其餘的服務器端動態腳本，如php、jsp等的解析工做是在服務器完成的。javascript

（3）WebServer支持哪些動態語言

目前，最經常使用的三種動態網頁語言有ASP(ActiveServerPages),JSP(JavaServerPages),PHP(HypertextPreprocessor)。php

  • ASP全名ActiveServerPages，是一個WEB服務器端的開發環境，利用它能夠產生和執行動態的、互動的、高性能的WEB服務應用程序。ASP採用腳本語言VBScript（Javascript）做爲本身的開發語言。
  • PHP是一種跨平臺的服務器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法,並耦合PHP本身的特性,使WEB開發者可以快速地寫出動態產生頁面。它支持目前絕大多數數據庫。還有一點，PHP是徹底免費的，不用花錢，你能夠從PHP官方站點(http://www.php.net)自由下載。並且你能夠不受限制地得到源碼，甚至能夠從中加進你本身須要的特點。
  • JSP是Sun公司推出的新一代網站開發語言，Sun公司藉助本身在Java上的不凡造詣，將Java從Java應用程序和JavaApplet以外，又有新的碩果，就是JSP，JavaServerPage。JSP能夠在Serverlet和JavaBean的支持下，完成功能強大的站點程序。

三者都提供在HTML代碼中混合某種程序代碼、由語言引擎解釋執行程序代碼的能力。但JSP代碼被編譯成Servlet並由Java虛擬機解釋執行，這種編譯操做僅在對JSP頁面的第一次請求時發生。在ASP、PHP、JSP環境下，HTML代碼主要負責描述信息的顯示樣式，而程序代碼則用來描述處理邏輯。普通的HTML頁面只依賴於Web服務器，而ASP、PHP、JSP頁面須要附加的語言引擎分析和執行程序代碼。程序代碼的執行結果被從新嵌入到HTML代碼中，而後一塊兒發送給瀏覽器。ASP、PHP、JSP三者都是面向Web服務器的技術，客戶端瀏覽器不須要任何附加的軟件支持。css

返回目錄html

實踐過程記錄

1.安裝阿帕奇時出現沒法得到鎖錯誤「E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable)」
前端

  • 解決：找到而且殺掉全部的apt-get 和apt進程
  • 用ps -A | grep apt查看有哪些進程與「apt」有關
  • 個人顯示結果是沒有任何進程，因此試着再運行一次安裝語句sudo apt-get install apache2，第二次運行就能夠了。

2.運行service apache2 start開啓阿帕奇時再次出錯：
java

  • 解決：按照提示，輸入journalctl -xe查看具體的錯誤緣由以下：

  • 由上圖所示，這裏有個錯誤「 Unable to open logs」，在網上搜索相關緣由，發現若是Apache默認的80端口被佔用纔會報這個錯。
  • 因此用netstat -tupln | grep 80查看Local Address中Listening 80的應用的PID, 去任務管理器中找到對應的進程，而後用kill processID(進程ID)關閉此進程便可，再次開啓Apache再也不有錯誤提示，以下圖所示：

【注】：這裏也能夠經過修改配置文件的方法，把Apache的默認端口從80改成其餘的未被佔用的端口。mysql

3.運行netstat -aptn後，發現了正在使用端口80的Apache2，說明開啓成功：web

4.下面進行兩個測試，看看Apache工做是否正常：sql

  • 測試1：在瀏覽器中輸入127.0.0.1:80
  • 出現問題：竟然顯示的是qq郵箱，通過諮詢老師，找到了緣由，我用的是老師的虛擬機，老師在不少年前，把默認的歡迎界面設置成了qq郵箱的登陸界面，因此當不指定任何html文件時，會默認訪問該歡迎界面。
  • 測試2：測試apache是否可讀取工做目錄下的文件，在瀏覽器中輸入127.0.0.1:80/20155312/login.html
  • 解釋：這裏我指定的路徑「/20155312/login.html」是我在/var/www/html路徑下新建了一個以本身學號命名的文件夾「20155312」，其中有一個我寫的前端html登陸文件「login.html」，具體怎麼寫html文件，能夠參考老師提供的w3school網頁，而我主要採用了上學期網絡安全編程基礎這麼課中最後本身設計的登陸界面並對其稍做修改（具體的Eclipse與Apache中編程的區別後面會詳細介紹），訪問結果以下所示：


8.接下來進行前端編程，我只把Eclipse中的登陸界面代碼修改了兩個地方：數據庫

  • 一是各類圖片的路徑名，確定不能還用Windows中哪一個盤下的哪一個文件夾中的哪張圖片這種方式，我將相關圖片拷貝到工做目錄「/var/www/html/20155312/」中後，直接用「./圖片名」的方式，指定了圖片的位置
  • 二是按照老師的教程，由於咱們要使用PHP進行後臺編程，因此要將原來的action改爲一個php文件的名字，例如：<form action="login.php" method="post" >，具體php文件怎麼寫，咱們面再詳細介紹。

  • 三要注意添加javascript的相關代碼，個人代碼實現了利用javascript檢查用戶名或密碼是否爲空，若爲空則彈出提示框並從新跳轉回登陸界面：

  • 注：若要按登陸按鈕先調用本身編寫的函數，必定要將登陸按鈕的type設置爲button而非submmit，如type = "button"不然，會出現出現警告框點肯定後，沒法跳轉到指定界面的錯誤。

個人前端代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陸頁面</title>
<script language="javascript">
var movingID=null;
var scrolling=false;
function startMove()
{
    
    var left=eval(bear.style.left.replace("px",""));
    if(left <document.body.scrollWidth-400)
        bear.style.left=left+1;
    else
        bear.style.left=1;
    movingID=setTimeout("startMove()",0.1); 
    
}
function mysubmit()
{ 
    if(document.form1.password.value==""   || document.form1.username.value=="")
    {
        alert("用戶名、密碼不能爲空！");
        window.location.href="login.html"
    
    }   
    else
       form1.submit();
}
</script>
<style type="text/css">
a:link{color:#41506D;font-size:125%;text-decoration:none}
a:visited{color:#41506D;font-size:125%;text-decoration:none}
a:hover{color:#FFF200;font-size:125%;text-decoration:none}
</style>
</head>
<body  onload="startMove()" style="background-image: url(./login.png);background-repeat:no-repeat;topmargin:60;leftmargin:12 ;overflow-x:hidden;overflow-y:scroll;" >
<br><br><br>
    <p align="right">
    <a  target=_parent href="index.jsp" >登 錄</a>    &nbsp;&nbsp;     <a target=_parent href="addone.jsp" >注 冊</a>
    </p>
<form action="login.php" method="post" name="form1">
<table style="background: url(./登陸.png);background-repeat:no-repeat;position:relative;left:300px;top:0px;border-collapse:collapse;">
<tr><th style="border:5px solid white;height:50px;width:230px;padding:0px;text-align:center;vertical-align:center;color:#41506D;font-size:150%;font-family:Microsoft YaHei UI;">
帳 號 密 碼 登 錄
</th></tr>
<tr>
<td style="border:5px solid white;height:180px;width:230px;padding:0px;text-align:center;vertical-align:center;color:#41506D;">

<p style="position:absolute;left:27px;top:50px;font-size:130%;color:white;font-family:Microsoft YaHei UI;">用戶名 </p>
 <input align="center" type="text" name = "username"  style="position:absolute;left:100px;top:70px;height:35px;width:100px;font-size:130%;"/> <br><br>
<p style="position:absolute;left:27px;top:100px;font-size:130%;color:white;font-family:Microsoft YaHei UI;">密&nbsp;&nbsp;&nbsp;碼 </p>
&nbsp; <input align="center" type="password" name = "password"  style="position:absolute;left:100px;top:120px;height:35px;width:100px;font-size:130%;"> <br>
<input type = "button" value = "提交" onClick="mysubmit()" style="position:absolute;left:50px;top:190px;height:35px;width:150px;font-size:120%;">

</td>
</tr>
</table></form>

<div id="bear" style="visibility:visible;position:absolute;left:1px;top:330px;z-index:1;width:400px;height:170px;overflow-x:hidden;overflow-y:hidden;">
<img src="./北極熊2.png">
<img src="./北極熊3.png">

</div>

</body>
</html>

9.下載安裝php並進行測試

  • php安裝使用命令sudo apt-get install php
  • 安裝完成後測試php是否可正常工做
    • 首先，編輯/var/www/html/test.php 內容爲<?php include($_GET["a"]); ?>
    • 接着在瀏覽器中輸入127.0.0.1:80/test.php?a=/etc/passwd可看到/etc/passwd文件的內容，以下圖所示。

  • 注：若是想這裏測試成功，首先須要保證apache成功開啓（service apache2 start）

10.後臺php編程，因爲後臺編程涉及到數據庫名稱和具體的字段名稱，因此先進行後續的數據庫操做，再回頭編寫後臺。

11.安裝MySQL，執行指令apt-get install mysql-server mysql-client mysql-workbench後，安裝失敗，提示「Package mysql-client is not available, but is referred to by another package」，以下圖所示：

  • 解決：下載半天不行，用了各類方法，好比更新ubuntu的/etc/apt/source.list中的源sudo apt-get -y update、運行apt-get update和apt-get upgrade都沒有解決問題。猜想老師的虛擬機已經下載好了mysql。
  • 運行老師提供的指令直接運行service start/stop/restart mysql也不行，最終運行`/etc/init.d/mysql start開啓MySQL服務就能夠了……

12.開啓mysql後，先登陸root用戶，密碼是p@ssw0rd直接複製粘貼就好，不要嘗試本身輸入了，我試了p@ssw0rd,p@sswOrd都不行，不知道咋回事

13.用show databases;查看數據庫基本信息，注意這裏每一個sql語句要以分號爲結尾，否則就會像我這樣：

14.輸入use mysql;選擇使用mysql這個數據庫

15.輸入select user, password, host from user;查看當前用戶信息

16.輸入update user set password=PASSWORD("新密碼") where user='root';更改密碼

17.輸入flush privileges;更改權限

18.輸入exit退出，而後使用新密碼從新登陸mysql -u root -p

19.輸入create database 數據庫名稱;建立數據庫，注意這裏數據庫名字不能夠是學號這些數字，不然會出現我這樣的錯誤，用英文吧~

20.輸入show databases;查看存在的數據庫；輸入use zjy使用剛建立的數據庫zjy。

21.輸入create table user (username VARCHAR(20),password VARCHAR(20));建立一個名爲user的數據表，表中包含VARCHAR類型的兩個字段：username和password

  • 這裏使用的是varchar類型而非char類型，他們的差異以下：
    • char類型指定大小後會預分配固定大小，不論是否使用空間都被佔用
    • varchar類型用多少佔多少，只是不能超過括號中指定的上限

22.輸入show tables;查看全部的表，能夠發現剛剛新建的user

23.輸入insert into user values('20155312','1234');向表中username password兩個字段插入數據，即用戶名爲20155312，密碼爲1234

24.輸入grant select,insert,update,delete on zjy.* to zjy@localhost identified by "20155312";將對某數據庫的全部表的select,insert,update,delete權限授予當前主機localhost登陸的用戶zjy，2015312是登陸密碼，注意加引號。

25.輸入輸入exit退出，而後使用新密碼從新登陸zjy用戶mysql -u zjy -p

登陸成功，說明用戶建立成功。

26.如今開始後臺編程，編寫login.php，注意要與前端action指定的php名稱對應，具體代碼以下：

<?php
$uname=$_POST["username"];
$pwd=$_POST["password"];
echo $uname;
$query_str="SELECT * FROM user where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "zjy", "20155312", "zjy");

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

登陸成功以下圖所示：

輸入一個數據庫中根本沒有的用戶名和密碼，顯示鏈接數據庫成功，但登陸失敗

27.接下來進行SQL注入攻擊,在用戶名輸入框中輸入' or 1=1#，密碼隨便輸入，是能夠登錄成功的。

  • 解釋：輸入的用戶名' or 1=1#提交到後臺後，被做爲SQL語句中的第一個參數填入，使SQL語句變成select * from users where username='' or 1=1#' and password='',#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件永遠成立，因此可以成功登錄。所以，要想避免SQL注入，應當限制用戶在用戶名中輸入'、#等特殊符號。

28.嘗試經過SQL注入新建用戶名和密碼並保存在數據庫中，這樣下次用本身偷偷新建的用戶名密碼登陸便可。

  • 將代碼中if ($result = $mysqli->query($query_str))改成if ($result = $mysqli->multi_query($query_str))使其容許一次執行多個SQL語句

29.用戶名除輸入';insert into users values('20155333','111');#爲個人室友偷偷建一個用戶，用戶名20155333，密碼111

  • 這是由於在填入SQL語句後，由於'的存在，該語句被拆成了如下兩個SQL語句，第一個語句雖然會致使登陸失敗，但第二個添加了一個用戶數據。
    • SELECT * FROM users WHERE username='';
    • insert into users values('20155333','111');#
  • 最後一個#把後面的都註釋掉了，因此無論密碼輸入什麼按道理都不影響

咱們能夠查看一下本地數據，看看有沒有增長什麼

結果並無成功，爲何呢？？？？我也不知道哎

30.接下來嘗試進行XSS攻擊即跨站腳本攻擊，首先將一張圖片login.png 存入/var/www/html目錄

31.在用戶名輸入框中輸入<img src="login.png " />balabala</a>讀取/var/www/html目錄下的圖片

運行結果以下所示，正確顯示了網頁背景圖：

返回目錄

實驗體會

本次實驗，我最大的體會就是，網絡對抗這門課是個綜合性很強的課程，能夠與不少咱們學過或正在學習的課程融通，好比上學期的網絡安全編程基礎，和這學期的信息系統安全等，關於網頁編程和數據庫的知識，確實打下了基礎後進行跨平臺學習也會相對容易，就像學會了c語言再學其餘語言時也會節省很多力氣。因此，我以爲既然學一門課就要學好、弄懂，若是隻是浮於表面，或是最後應付一個考試，可能真的等到畢業後就都忘記了。

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