Exp8 web基礎

時間 2019-11-12

標籤 exp8 exp web 基礎欄目 HTML 简体版

原文原文鏈接

基礎問題回答

1.什麼是表單

表單在網頁中主要負責數據採集功能。一個表單有三個基本組成部分：javascript

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

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

表單按鈕：包括提交按鈕、復位按鈕和通常按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。前端

2.瀏覽器能夠解析運行什麼語言

支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言java

3.WebServer支持哪些動態語言

Javascript、ASP、PHP、Ruby等腳本語言mysql

4.get和post有什麼區別？

GET後退按鈕/刷新無害，POST數據會被從新提交。web

GET書籤可收藏，POST爲書籤不可收藏。GET能被緩存，POST不能緩存。sql

GET對數據長度有限制，當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。POST無限制。數據庫

GET只容許 ASCII 字符。POST沒有限制。也容許二進制數據。apache

與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分。在發送密碼或其餘敏感信息時毫不要使用 GET ！POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中。GET的數據在 URL 中對全部人都是可見的。POST的數據不會顯示在 URL 中。

實踐總結與體會

1.知識點總結：

HTML：超文本標記語言，標準通用標記語言下的一個應用。「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。

Javascript：JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。

PHP：PHP（外文名:PHP: Hypertext Preprocessor，中文名：「超文本預處理器」）是一種通用開源腳本語言。語法吸取了C語言、Java和Perl的特色，利於學習，使用普遍，主要適用於Web開發領域。

MySQL：MySQL是一種關係數據庫管理系統，關係數據庫將數據保存在不一樣的表中，而不是將全部數據放在一個大倉庫內，這樣就增長了速度並提升了靈活性。MySQL所使用的 SQL 語言是用於訪問數據庫的最經常使用標準化語言。MySQL 軟件採用了雙受權政策，分爲社區版和商業版，因爲其體積小、速度快、整體擁有成本低，尤爲是開放源碼這一特色，通常中小型網站的開發都選擇 MySQL 做爲網站數據庫。因爲其社區版的性能卓越，搭配 PHP 和 Apache 可組成良好的開發環境。

2.實驗體會：

此次實驗主要是利用了web相關技術，瞭解HTML、PHP、MySQL的基本語法，其中遇到了一些由於沒有基礎而形成的困難，可是在仔細學習以後都一一解決了。

實驗過程記錄

1.Web前端：HTML基礎

kali已經預裝apache，咱們使用 systemctl start apache2 ，將服務打開。

使用 netstat -tupln |grep 80 指令查看80端口被哪些進程佔用，若是有的話，用 kill+（進程ID）殺死進程。

vi /var/www/html/ login.html 編輯代碼，在Apache工做目錄下創建一個含有表單的html文件。

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <!-- Meta tag Keywords -->
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <!-- Meta tag Keywords -->
 7 </head>
 8 
 9 <body>
10 <!-- main -->
11 <!--//header-->
12     <h2>Login Quick</h2>
13         <form action="login" method="post">
14             <input placeholder="E-mail" name="Name" class="user" type="text">
15             <br>
16             </br>
17             <input  placeholder="Password" name="Password" class="pass" type="password">
18             <br>
19             </br>
20             <input type="submit" value="Login">
21         </form>
22 <!--//main-->
23 </body>
24 </html>

打開網頁，效果以下：

2.Web前端：javascipt基礎

添加一段代碼判斷身份信息

 1 <html>
 2 <head>
 3 <title>CryptoTeam</title>
 4 <!-- Meta tag Keywords -->
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <!-- Meta tag Keywords -->
 7 </head>
 8 
 9 <body>
10 <!-- main -->
11 <!--//header-->
12     <h2>Login Quick</h2>
13         <form action="login" method="post" name="form_login">
14             <input placeholder="E-mail" name="Email" class="user" type="text" onfocus="if (this.value=='Your email') this.value='';" />
15             <br>
16             </br>
17             <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>
18             <br>
19             </br>
20             <input type="submit" value="Login" onClick="return validateLogin()"/>
21         </form>
22 <!--//main-->
23 <script language="javascript">  
24     function validateLogin(){  
25         var sUserName = document.form_login.Email.value ;  
26         var sPassword = document.form_login.Password.value ;    
27         if ((sUserName =="") || (sUserName=="Your email")){  
28         alert("user email!");  
29         return false ;  
30         }  
31 
32         if ((sPassword =="") || (sPassword=="Your password")){  
33         alert("password!");  
34         return false ;  
35         }  
36 
37     }   
38 </script>  
39 
40 </body>
41 </html>

3.Web後端：MySQL基礎

輸入 /etc/init.d/mysql start 開啓MySQL服務：

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

輸入 use mysql; ，進入mysql數據庫，輸入 update user set password=PASSWORD("20164309") where user='root'; ，修改密碼；輸入 flush privileges; ，更新權限。

使用 create database oyyx; 創建一個數據庫；使用 show databases; 查看存在的數據庫；使用 use oyyx; 使用咱們建立的數據庫。

用 create table test_table (username VARCHAR(20), password VARCHAR(20)); 創建數據表, show tables; 查看數據表。

增長一個名爲oyyx的新mysql用戶，使用 grant select,insert,update,delete on oyyx.* to oyyx@localhost identified by "20164309"; 指令進行。

4.Web後端：編寫PHP網頁

先編輯一個簡單的php腳本：

1 <?php
2 echo ($_GET["a"]);
3 include($_GET["a"]);
4 echo "Hello world! This is my php test page!<br>";
5 ?>

輸入 localhost:80/phptest.php?a=/etc/passwd ，可看到 /etc/passwd 文件的內容

利用PHP和MySQL，結合以前編寫的登陸網頁進行登陸身份認證，修改後的login.php代碼以下：

 1 <?php
 2 $uname=$_POST["Email"];
 3 $pwd=$_POST["Password"];
 4 echo $uname;
 5 $query_str="SELECT * FROM  test_table where username='$uname' and password='$pwd';";
 6 $mysqli = new mysqli("127.0.0.1", "oyyx", "20164309", "oyyx");
 7 $query_str1="use oyyx;";
 8 
 9 /* check connection */
10 if ($mysqli->connect_errno) {
11     printf("Connect failed: %s\n", $mysqli->connect_error);
12     exit();
13 }
14 echo "connection ok!";
15 /* Select queries return a resultset */
16 if ($result = $mysqli->query($query_str1))
17 echo"<br>Success into database!";
18 echo$uname;
19 if ($result = $mysqli->query($query_str)) {
20     if ($result->num_rows > 0 ){
21             echo "<br> {$uname}:Welcome!!! <br> ";
22     } 
23     else {
24         echo "<br> login failed!!!! <br> " ; }
25     /* free result set */
26     $result->close();
27 }
28 $mysqli->close();
29 ?>

注意，這裏的action，須要選擇結合mysql寫成的login.php。

注意，這裏須要選擇以前建立的表test_login。

輸入數據庫中的帳號密碼，登陸成功。

5.最簡單的SQL注入

在用戶名框中輸入 ' or 1=1 ，密碼隨意輸入

這是由於，輸入的用戶名和咱們的代碼中select語句組合起來變成了 select * from users where username='' or 1=1#' and password='' ,#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件永遠成立，因此無論密碼是否輸入正確，都可以成功登錄。