20154322楊欽涵 EXP8 Web基礎
EXP8 Web基礎
一、基礎問題回答
1.什麽是表單？
- 表單：表單在網頁中主要負責數據采集功能。
- 基本組成部分：
- 表單標簽：這裏面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
- 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
- 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
2.瀏覽器可以解析運行什麽語言
- 超文本標記語言：HTML
- 可擴展標記語言：XML
- 腳本語言：ASP、PHP、Script、JavaScript、VBScript、Perl、Python、ColdFusion、Java、JSP等。
3.WebServer支持哪些動態語言
- 常用的有：ASP語言，PHP語言和JSP語言。
二、實踐過程記錄
2.1 Web前端HTML
1.輸入sudo vi/etc/apache2/ports.conf查看apache端口情況，更改端口號。我改為8080
2.通過service apache2 start開啟Apache,使用netstat -aptn查看確認端口占用
3.瀏覽器中輸入localhost:8080,登錄到Apache首頁驗證其可用
4.訪問Apache工作目錄cd /var/www/html，新建一個4322.html文件
5.編寫一個含有表單的html
6.登錄瀏覽器，輸入localhost:8080/4322.html
7.在上面的文本框內隨意輸入，然後點擊確認按鈕數據會傳送到html_form_action.php的頁面，由於沒有對此頁面進行編輯，出現的是404
2.2 Web前端javascipt
JavaScript是一種屬於網絡的腳本語言,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。
DOM：文檔對象模型,可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。1.編寫驗證用戶名和密碼的規則：（比如用戶名和密碼不能為空)
代碼如下：
<head> <title>用戶登錄</title> <meta charset="utf-8">//unicode:萬國碼,utf-8：unicode的升級版。 <script language="javascript"> function check(Form){ var Username=Form.user.value; var pwd=Form.pw.value; if((Username == "")||(pwd == "")) { alert("用戶名或密碼為空") return false; } if(pwd.length > 16 || pwd.length < 6) { alert("密碼長度應在6-16位"); return false; } For.submit(); } </script> </head> <body> <form name="Form" method="post" action="Login.php"> <p>用戶名：<input type="text" name="user"></p> <p>密 碼：<input type="password" name="pw"></p> <input type="botton" value="提交" onclick="check(Form)"> </form> </body> </html>
2.登入瀏覽器，輸入localhost:8080/20154322.html進行測試。
當沒有輸入密碼時，出現如下界面：
當沒有密碼小於6位時，出現如下界面：
2.3 MySQL基礎
mysql是一個數據庫，我們這次進行了簡單的應用：開啟mysql，並更改用戶名密碼；建立庫表，並插入數據；實現網頁和數據庫的連接。1.輸入/etc/init.d/mysql start打開mysql服務
2.輸入mysql -u root -p，以root身份登錄，根據提示輸入密碼，默認密碼為p@ssw0rd，進入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 4322-yqh打開表 - 輸入
insert into users(userid,username,password,enabled) values(1,‘20154322‘,password("20154322"),"TRUE");進行內容的添加
2.4 PHP基礎
PHP（Hypertext Preprocessor)是一種通用開源腳本語言。主要適用於Web開發領域。PHP 獨特的語法混合了C、Java、Perl以及PHP自創的語法。PHP是將程序嵌入到HTML（標準通用標記語言下的一個應用）文檔中去執行，執行效率高,PHP還可以執行編譯後代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。1.測試一下php。還是在原位置新建一個php文件
*以下是一個php測試代碼：
2.瀏覽器打開localhost:8080/login.php
2.5 PHP+MySQL實現登錄網頁編寫
到這一步我才深刻意識到前面幾步要好好操作，不然就會像我一樣在這一步卡了很長時間，反復操作前面幾步實驗- 說說存在的問題
1.我本來想就前面網頁登錄的代碼直接用，結果發現點擊提交，網頁根本沒動。。。檢查了action那段代碼，發現是修改了的，那有可能是代碼的問題了。
2.於是我換了個登錄網頁的代碼，這次可以登上去了，發現是這樣的界面：
查閱其他同學的報告說是不能將用戶名設成root，需要新建用戶。然而我新建用戶後，發現還是登不上去。重新設置數據庫，發現沒有卵用，還是一直出現如上界面。
3.於是我再次換了個登錄網頁代碼，並新建了數據庫名、新建表、新插入內容。
這次終於可以登陸了，但，輸入用戶名和密碼後，跳轉的界面只有connect is ok!!!，後面半句消失了。經同學提醒發現是要將login.php中這一處改成表的名字（雖然我參考其他同學的發現這一處並沒有改動）
修改好後，重新登入瀏覽器，發現終於成功了。
- 實驗過程
1.因為中間反復調試，試了幾個不同的代碼，所以最終登錄網頁的代碼改為了這個：
<html>
<head>
<title>test</title>
</head>
<body>
<table>
<form method ="POST" action="login.php" name="frmLogin" >
<tr>
<td>user</td>
<td><input type="text" name="username" value="Your name" size="20" onfocus="if (this.value==‘Your name‘) this.value=‘‘;" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="password" value="Your password" size="20" maxlength="20" onfocus="if (this.value==‘Your password‘) this.value=‘‘;" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="zlogin" value="1">auto login</td>
</tr>
<table>
<tr>
<td><input type="submit" name="login" value="login" onClick="return validateLogin()"/></td>
<td><input type="reset" name="rs" value="reset" /></td>
</tr>
</table>
</form>
</table>
<script language="javascript">
function validateLogin(){
var sUserName = document.frmLogin.username.value ;
var sPassword = document.frmLogin.password.value ;
if ((sUserName =="") || (sUserName=="Your name")){
alert("user name");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("password!");
return false ;
}
}
</script>
</body>
</html> 2.我新建了數據庫和表
- 數據庫名：yqh666
- 表名：yqh666table
- 在表中添加用戶和密碼分別為：20154322 1234
- 在MySQL中新建用戶hqy
使用grant select,insert,update,delete on 數據庫名.* to 用戶名@localhost, identified by "密碼";這句話的意思是將對某數據庫的所有表的select,insert,update,delete權限授予某ip登錄的某用戶。
我的修改為grant select,insert,update,delete on yqh666.* to hqy@localhost identified by "20154322";
3.利用PHP和MySQL結合之前編的登錄網頁進行簡單的用戶身份認證，這裏我參考的是老師給的代碼編寫login.php，代碼如下所示:
<?php
$uname=($_POST["username"]);
$pwd=($_POST["password"]);
/* echo $uname; */
$query_str="SELECT * FROM yqh666table where username=‘$uname‘ and password=‘$pwd‘;";
/* echo "<br> {$query_str} <br>";*/
$mysqli = new mysqli("127.0.0.1", "hqy", "20154322", "yqh666");
/* 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();
?>這裏有幾點需要註意：
A.代碼第二三行中無論是GET也行，POST也好，一定要與html文件中的method一致。
B.上文已經提到，若登錄見面只有“connect is OK”，需要將這裏改為表名
C.
框出來的地方分別是填寫：本機地址、MySQL登錄用戶名、MySQL登錄密碼、數據庫名
4.打開瀏覽器輸入localhost:8080/login_test.html登錄，輸入用戶名及密碼，會自動跳轉到login.php
用戶名和密碼是數據庫中表中的username和password
和MySQL表中匹配時，這如下界面：
和MySQL表中不匹配時，這如下界面：
2.6 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 yqh666table values(‘yqh‘,‘00000‘);#SELECT * FROM yqh666table WHERE username=‘‘ insert into yqh666table values(‘yqh‘,‘00000‘); 提示登錄失敗。
4.到數據庫裏查看表的內容就發現多了一條用戶信息，下次就可直接用這條用戶信息登錄。
2.7 xss攻擊
XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。1.先將圖片保存在/var/www/html下
2.在登錄的用戶名中輸入：<img src="4322.jpg" />haha</a>，密碼隨意
- 這裏jpg註意大小寫，我第一次弄成大寫，圖片就沒加載出來。
3.點擊登錄，居然是這樣的界面：
4.打開login.php,取消掉這行註釋
5.重新登錄，圖片出來啦！！
三、實驗心得體會
這次實驗比前面幾個的邏輯連貫性更高，前後的聯系也很多。特別是做到後面幾個，就會發現如果前面哪一步出了小差錯，到這裏就會寸步難行。也正因為這樣，這次實驗我反反復復做了很多遍，但也因此加深了印象，對HTML、PHP有了進一步的理解。
20154322楊欽涵 EXP8 Web基礎