一、實踐具體要求

1.Web前端HTML(0.5分)

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

2.Web前端javascipt(0.5分)

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

3.Web後端：MySQL基礎：正常安裝、啟動MySQL，建庫、創建用戶、修改密碼、建表(0.5分)

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

5.最簡單的SQL註入，XSS攻擊測試(1分)

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

二、基礎問題回答

1.什麽是表單？

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

2.瀏覽器可以解析運行什麽語言

• 超文本標記語言：HTML
• 可擴展標記語言：XML
• 腳本語言：ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等。

3.WebServer支持哪些動態語言

• 常用的有：ASP語言，PHP語言和JSP語言。

三、實驗心得

這次實驗比前面幾個的邏輯連貫性更高，前後的聯系也很多。特別是做到後面幾個，就會發現如果前面哪一步出了小差錯，到這裏就會寸步難行。也正因為這樣，這次實驗我卡住了很久，而且反反復復做了很多遍，但也因此加深了印象，對HTML、PHP有了進一步的理解。

四、實驗過程

4.1 Web前端HTML

4.1.1 Apache

1.啟動Apache service apache2 start

2.查看端口占用情況 netstat -aptn

可以看到apache2占用80

3.測試1:apache可正常工作,瀏覽器打開 127.0.0.1:80可正常打開Apache介紹網頁

測試2:apache可讀取工作目錄下的文件 vi /var/www/html/test.txt 隨意輸入字符串

4.瀏覽器打開 127.0.0.1:80/test.txt可看到test.txt的內容

4.1.2 前端編程: html+javascipt+css

1.訪問Apache工作目錄cd /var/www/html，新建一個4308.html文件

2.編寫一個含有表單的html

3.登錄瀏覽器，輸入localhost:80/4308.html，成功出現下圖界面

4.在上面的文本框內隨意輸入，然後點擊確認按鈕數據會傳送到html_form_action.php的頁面，由於沒有對此頁面進行編輯，出現的是404

4.1.3Web前端javascipt

JavaScript是一種屬於網絡的腳本語言,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。

DOM：文檔對象模型,可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。

1.我們可以用JavaScript來編寫一個簡單的程序，驗證用戶名、密碼。

2.登入瀏覽器，輸入localhost:80/164308.html進行測試。

當沒有輸入用戶名、密碼時，出現如下界面：

當沒有輸入密碼時，出現如下界面：

當沒有輸入正確位數的密碼時，出現如下界面：

4.2 MySQL基礎

mysql是一個數據庫，我們這次進行了簡單的應用：開啟mysql，並更改用戶名密碼；建立庫表，並插入數據；實現網頁和數據庫的連接。

1.輸入/etc/init.d/mysql start打開mysql服務

2.輸入mysql -u root -p，以root身份登錄，根據提示輸入密碼，默認密碼為password，進入MySQL

在MySQL中輸入命令後面都要帶一個分號作為命令結束符

3.修改密碼 輸入use mysql;，選擇mysql數據庫

輸入select user, password, host from user;，顯示mysql庫中已有的用戶名、密碼與權限

輸入UPDATE user SET password=PASSWORD("新密碼") WHERE user=‘root‘;更改用戶名root的密碼

輸入flush privileges;，更新權限。

輸入quit退出，重新輸入mysql -u root -p重新進入，使用新密碼登錄成功，說明修改成功

4.創建新表

輸入CREATE SCHEMA庫表的名稱;

輸入 CREATE TABLE 庫表的名稱.users (

userid INT NOT NULL COMMENT ‘‘,

username VARCHAR(45) NULL COMMENT ‘‘,

password VARCHAR(256) NULL COMMENT ‘‘,

enabled VARCHAR(5) NULL COMMENT ‘‘,

PRIMARY KEY (userid) COMMENT ‘‘);

5.在表中添加內容 輸入use 4308-hxm打開表

輸入insert into users(userid,username,password,enabled) values(1,‘20164308‘,password("20164308"),"TRUE");進行內容的添加

16.在MySQL中增加新用戶，使用grant select,insert,update,delete on 數據庫.* to 用戶名@登錄主機(可以是localhost,也可以是遠程登錄方式的IP) identified by "密碼";

17.增加新用戶後，exit退出，然後使用新的用戶名和密碼進行登錄

4.3 PHP基礎

PHP（Hypertext Preprocessor)是一種通用開源腳本語言。主要適用於Web開發領域。PHP 獨特的語法混合了C、Java、Perl以及PHP自創的語法。PHP是將程序嵌入到HTML（標準通用標記語言下的一個應用）文檔中去執行，執行效率高,PHP還可以執行編譯後代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。

1.測試一下php。還是在原位置新建一個php文件

*以下是一個php測試代碼：

2.瀏覽器打開localhost:80/4308hxm.php

4.4 PHP+MySQL實現登錄網頁編寫

1.登錄網頁的代碼：(這部分比較心塞，做了好長時間) 數據庫名：xxx 表名：login_table 在表中添加用戶和密碼分別為：xxxx 123456

使用grant select,insert,update,delete on 數據庫名.* to 用戶名@localhost, identified by "密碼";這句話的意思是將對某數據庫的所有表的select,insert,update,delete權限授予某ip登錄的某用戶。 我的修改為grant select,insert,update,delete on xxx.* to [email protected] identified by "123456";

• 20164308.html
• 
• 
• Login.php
• 

2.打開瀏覽器輸入localhost:80/20164308.html登錄，輸入用戶名及密碼，會自動跳轉到login.php

用戶名密碼正確

用戶名密碼錯誤

4.5 SQL註入攻擊

SQL註入攻擊:可以通過在Web表單中輸入（惡意）SQL語句得到一個存在安全漏洞的網站上的數據庫，通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。

1.在登錄界面用戶名處輸入‘ or 1=1#，密碼隨意，發現可以成功登錄

成功登陸的原因是這樣的： 在代碼中有這個語句select * from users where username=‘‘ or 1=1#‘ and password=‘‘ #是註釋符，將其後面的內容給註釋掉了，只剩下前面的1=1，恒成立，所以就可以成功登錄啦。

2.將login.php文件中if($result = $mysqli->query($query_str))改為if ($result = $mysqli->multi_query($query_str))實現執行多個sql語句

3.在用戶名輸入框中輸入‘;insert into login_table values(‘hxm‘,‘00000‘);#SELECT * FROM login_table WHERE username=‘‘ insert into login_table values(‘hxm‘,‘00000‘);提示登錄失敗。

4.到數據庫裏查看表的內容就發現多了一條用戶信息，下次就可直接用這條用戶信息登錄。

4.6 xss攻擊

XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。

1.先將圖片保存在/var/www/html下

2.在登錄的用戶名中輸入：<img src="4308.jpg" />haha</a>，密碼隨意

3.點擊登入出現了大臉盤哈哈哈哈

縮小一點看全圖

鐺鐺鐺，帥氣做完實驗！

五、實驗問題

1.此處一定要註意單引號和鍵盤Esc下面的那個符號不要寫錯了！！！

2.中間一直出現頁面只有connection ok！的情況，後來嘗試了好幾次，發現是mysql配置時出現了問題，進行重新修改配置。

Exp8 Web基礎