20164305 徐廣皓 Exp 8 Web基礎
1.實踐具體要求
- （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分)
- 功能描述：用戶能登陸，登陸用戶名密碼保存在數據庫中，登陸成功顯示歡迎頁面。
2.基礎問題回答
- （1）什麽是表單？
- 可以收集用戶的信息和反饋意見，是網站管理者與瀏覽者之間溝通的橋梁。
- （2）瀏覽器可以解析運行什麽語言？
- 支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等眾多腳本語言。
- （3）WebServer支持哪些動態語言？
-
-
Active Server Pages
-
-
-
- Microsoft已開發出一種用於生成稱為 Active Server Pages 的動態Web內容的技術,簡稱 ASP。使用ASP，Web 服務器上的HTML頁面可以包含嵌入代碼的片段（通常是VBScript或JScript-盡管幾乎可以使用任何語言）。在將頁面發送到客戶端之前，Web服務器將讀取並執行此代碼。
-
-
-
Server-side JavaScript
-
-
-
- Netscape 也有一種服務器端腳本技術，它被稱為服務器端 JavaScript，或簡稱為 SSJS。與 ASP 一樣，SSJS 同樣允許將代碼片段嵌入到 HTML 頁面中以生成動態 Web 內容。區別在於 SSJS 使用 JavaScript 作為腳本語言。使用 SSJS，可以預編譯網頁以提高性能。
-
-
-
Java Server pages
- 想了解 jsp（Java Server Pages） 那麽就不得不說一下和他直接相關的，Java Servlet。
- Java Serlvet（Java Server Side applet) 是在服務器端的 Java 程序，他擴展了服務器的功能，通過運行 由 Serlvet 引擎管理的 JVM 來運行 Java 程序而提供動態更新 HTML 的功能 （使用不同的技術來實現類似 CGI 程序的功能，但不完全同於 CGI，Servlet 有自己的約定）。Java Serlvet 的優點很吸引人，具有 Java 語言的優點和平臺無關性；因為 Serlvet 在 Web 服務器中運行，所以可以很容易的訪問 Web 服務器的資源；支持在 JVM 中運行多線程，每個請求將對應一個 Serlvet 線程，對比 CGI 創建進程的方式將節省很大的時間和空間資源。但是工程師們向來都是抵制麻煩尋找便利的人群，使用 Java Servlet 編寫服務器端頁面，不可避免的就是再次需要在 Java 代碼中嵌入前端 HTML 代碼，這給編碼體驗造成了很大影響，為了實現工程師友好（增加這門技術對工程師的吸引力），於是和 PHP 在 HTML 中嵌入代碼相似，Java servlet 也實現這一特性，允許在 HTML 中嵌入 Java 代碼。更進一步，將一些 Java 代碼封裝起來換一種更加易於理解和使用的語法，就產生了 JSP。JSP 真正運行時，是會被 Servlet 容器給編譯成 Java Servlet 代碼的，所以實際運行的還是 Java 程序。JSP 只是一個工程師友好的中間層。
-
3.Web前端：HTML
1.kali默認已安裝Apache，直接使用 service apache2 start 命令打開Apache服務即可。
- 此時在瀏覽器輸入127.0.0.1，如果可以打開Apache的默認網頁，則開啟成功：
2.使用 cd /var/www/html 進入Apache目錄下，新建一個簡單的含有表單的html文件 simple_form.html ：
1 <html> 2 <head> 3 <title>CryptoTeam</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7 <h2>Login Quick</h2> 8 <form action="login" method="post"> 9 <input placeholder="E-mail" name="Name" class="user" type="email"> 10 <br> 11 </br> 12 <input placeholder="Password" name="Password" class="pass" type="password"> 13 <br> 14 </br> 15 <input type="submit" value="Login"> 16 </form> 17 </body> 18 </html>
- 在瀏覽器嘗試打開
4.Web前端：javascipt
1.在原有 simple_form.html 基礎上，可以添加一段JavaScript代碼，以完成對用戶是否填寫郵箱和密碼的判斷。修改後的 login_test.html 如下所示：
1 <html> 2 <head> 3 <title>CryptoTeam</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7 <h2>Login Quick</h2> 8 <form action="login" method="post" name="form_login"> 9 <input placeholder="E-mail" name="Email" class="user" type="email" onfocus="if (this.value==‘Your email‘) this.value=‘‘;" /> 10 <br> 11 </br> 12 <input placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value==‘Your password‘) this.value=‘‘;"/> 13 <br> 14 </br> 15 <input type="submit" value="Login" onClick="return validateLogin()"/> 16 </form> 17 <script language="javascript"> 18 function validateLogin(){ 19 var sUserName = document.form_login.Email.value ; 20 var sPassword = document.form_login.Password.value ; 21 if ((sUserName =="") || (sUserName=="Your email")){ 22 alert("user email!"); 23 return false ; 24 } 25 if ((sPassword =="") || (sPassword=="Your password")){ 26 alert("password!"); 27 return false ; 28 } 29 } 30 </script> 31 </body> 32 </html>
2.在瀏覽器訪問 file:///var/www/html/login_test.html ，如果用戶郵箱或密碼未填，網頁會提示：
5.Web後端：MySQL基礎
1.輸入 /etc/init.d/mysql start 開啟MySQL服務
2.輸入 mysql -u root -p 使用root權限進入，默認的密碼是password
3.輸入 update user set password=PASSWORD("newpassword") where user=‘root‘; ，修改密碼；輸入 flush privileges; 更新權限
4.輸入 exit 退出數據庫，使用新的密碼登錄
5.使用 create database databasename; 建立數據庫
6.使用 show databases; 查看存在的數據庫
7.使用 use databasename; 使用我們創建的數據庫
8.使用 create table tablename; 建立數據庫表，並設置字段基本信息
9.使用 show tables; 查看表信息
10.使用 insert into tablename values(‘1‘,‘2‘); 插入數據
11.使用 select * from tablename; 查詢表中的數據
12.在MySQL中增加新用戶，使用 grant select,insert,update,delete on sql.* to [email protected] identified by "password";
13.增加新用戶後，使用新的用戶名和密碼進行登錄
6.Web後端：編寫PHP網頁
1.在 /var/www/html 目錄下新建一個PHP測試文件 phptest.php ，簡單了解一下它的一些語法
1 <?php 2 echo ($_GET["a"]); 3 include($_GET["a"]); 4 echo "This is my php test page!<br>"; 5 ?>
2.在瀏覽器網址欄中輸入 localhost/phptest.php?a=/etc/passwd ，可看到 /etc/passwd 文件的內容
3.利用PHP和MySQL，結合之前編寫的登錄網頁進行登錄身份認證，修改後的 login.php 和 login.html 代碼如下
1 <html> 2 <head> 3 <title>login</title> 4 </head> 5 <h1>Login</h1> 6 <body> 7 <table> 8 <form action="login.php" method="GET" name="form_login"> 9 <tr> 10 <td>username:</td> 11 <td><input type="text" name="username" size="20" maxlength="20"onfocus="if (this.value==‘You name‘)this.value=‘‘;"/></td> 12 </tr> 13 <tr> 14 <td>password:</td> 15 <td><input type="password" name="password" size="20" maxlength="20"onfocus="if (this.value==‘You password‘)this.value=‘‘;"/></td> 16 </tr> 17 <table> 18 <tr> 19 <td><input type="submit" name="login" value="submit"onClick="return validateLogin()"/></td> 20 <td><input type="reset" name="rs" value="reset"/></td> 21 </tr> 22 </table> 23 </from> 24 </table> 25 26 <script language="javascript"> 27 function validateLogin(){ 28 var sUserName = document.form_login.username.value ; 29 var sPassword = document.form_login.password.value ; 30 if ((sUserName =="") || (sUserName=="Your name")){ 31 alert("user email!"); 32 return false ; 33 } 34 35 if ((sPassword =="") || (sPassword=="Your password")){ 36 alert("password!"); 37 return false ; 38 } 39 40 } 41 </script> 42 43 </body> 44 </html>
1 <?php 2 $uname=($_GET["username"]); 3 $pwd=($_GET["password"]); 4 echo $uname; 5 $query_str="SELECT * FROM testtable where username=‘$uname‘ and password=‘$pwd‘;"; 6 $mysqli = new mysqli("127.0.0.1", "root", "123456", "xgh"); 7 8 /* check connection */ 9 if ($mysqli->connect_errno) { 10 printf("Connect failed: %s\n", $mysqli->connect_error); 11 exit(); 12 } 13 echo "connection ok!"; 14 /* Select queries return a resultset */ 15 if ($result = $mysqli->query($query_str)) { 16 if ($result->num_rows > 0 ){ 17 echo "<br> {$uname}:Welcome!!! <br> "; 18 } 19 else { 20 echo "<br> login failed!!!! <br> " ; } 21 /* free result set */ 22 $result->close(); 23 } 24 $mysqli->close(); 25 ?>
4.在瀏覽器輸入 127.0.0.1/login.html 訪問自己的登錄界面,並登錄自己的用戶名和賬號
7.簡單SQL註入，XSS攻擊測試
1.SQL註入
- SQL註入原理 是利用現有應用程序，將SQL命令註入到後臺數據庫引擎執行的能力，可以通過在Web表單中輸入SQL語句得到一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。
在用戶名輸入框輸入 ‘ or 1=1# ，密碼任意輸入，可登陸成功
- 輸入的用戶名與select語句組合變成 select * from users where username=‘‘ or 1=1#‘ and password=‘‘ ,#起到註釋作用屏蔽了密碼判斷語句，而
1=1是1，所以能夠成功登陸。
2.XSS攻擊
- XSS攻擊原理 一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。
將圖片放在 /var/www/html 目錄下，在用戶名輸入框輸入 <img src="tu.jpg" /> ，密碼任意，就成功登錄
8.實踐總結及體會
雖然上學期進行過關於MYSQL數據庫學習，但是在網頁編程上遇到了一些困難，本來打算僅依靠學長學姐博客來完成實驗，但是發現模仿並不能解決問題，所以又參考網上資料重新編寫HTML和PHP文件，最後成功地完成了試驗。雖然過程比較艱難，但能成功完成實驗還是很有收獲的。
20164305 徐廣皓 Exp 8 Web基礎