Exp8 Web基礎

時間 2019-12-12

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

原文原文鏈接

Web基礎

什麼是表單？

答：①表單是一個包含表單元素的區域，表單元素是容許用戶在表單中（好比：文本域、下拉列表、單選框、複選框等等）輸入信息的元素，表單在網頁中主要負責數據採集功能，一個表單有三個基本組成部分：表單標籤、表單域、表單按鈕；②表單標籤php

：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法；③表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等；④表單按鈕：包括提交按鈕、復位按鈕和通常按鈕，用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。html

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

答：支持HTML（超文本標記語言）、XML（可擴展標記語言）以及Python、PHP、JavaScript、ASP等衆多腳本語言。除了IE瀏覽器是基於系統內核的解析，如今大部分瀏覽器都是用瀏覽器內核解析腳本。所以如今大部分瀏覽器在不裝插件的狀況下只能解析JS腳本。前端

WebServer支持哪些動態語言？

答：JavaScript、ASP、PHP、Ruby等腳本語言，ASP基於IIS WEB SERVER，是微軟的服務器端腳本技術，PHP基於APACHE WEB SERVER，與ASP有幾分相似，都是一種在服務器端執行的嵌入HTML文檔的腳本語言。python

雖然php，jsp等確實寫在html中，但在服務器返回給瀏覽器的並非這些.php，/.jsp文件，而是這些文件生成的html（字符串），python也有相似jsp的psp，但這就須要一些web服務器的特殊功能了（好比apache的mod_python模塊）mysql

實驗過程

1.環境配置

安裝Apache

sudo apt-get install apache2
service apache2 start

/etc/apache2/apache2.conf 存儲apache2的配置 web

/var/www/html 存儲網頁 sql

/var/log/apache2/error.log 存儲報錯信息數據庫

這樣按默認配置能夠直接在80端口訪問/var/www/html中的網頁了。apache

若是配置有問題能夠去apache2.conf 找到對應的參數進行修改。編程

2.前端編程

<html>
<script>

function inputTest(){
    alert(document.getElementById("ppp").value);  //獲取id爲ppp的元素的值並用alert窗口顯示出來，就是上圖的彈窗

    if (document.getElementById("ppp").value.length>4){　　　　//若是id爲ppp的元素的值的長度大於4返回真，不然返回假，簡單的密碼格式規範
        return true
    } else {
            return false;
    }
}

    </script>
<body>
<form action="login.php" method="GET" onsubmit="return inputTest()">  //表單，提交後的action指向login.php，onsubmit提交表單時觸發js腳本
    <input type="text" name="username" value="Please Input Your Username"/>  <br>　　//上圖中第一個輸入框
    <input type="password" name="password" value="default" id="ppp"/>  <br>　　　　　　//上圖中第二個輸入框，id爲ppp
    <input type="submit" value="Login GET"/>  　　　　//按鈕，點擊提交
</form>
</body>
</html>

3.PHP測試

上面已經把表單的連接指向了login.php，下面就在login.php中編寫一個簡單的php測試。

php代碼以下：

<html>
<body>
<?php
echo "個人第一段 PHP 腳本！";　　//輸出"個人第一段 PHP 腳本"
$uname=($_GET["username"]);　　//從GET到的內容中獲取username將其做爲uname變量
$pwd=($_GET["password"]);　　//從GET到的內容中獲取password將其做爲pwd變量
echo $uname;　　//輸出uname變量
echo $pwd;　　//輸出pwd變量
?>
</body>
</html>

下面來看看結果

咱們可明顯地看到服務器端的php文件發到客戶端就變樣了，不在有php腳本了，說明在php腳本是在服務器端就解析了的，而後將解析事後的html發送到客戶端。

4.MySQL基礎

開啓sql服務/etc/init.d/mysql start

輸入mysql -u root -p，並根據提示輸入密碼，默認密碼爲p@ssw0rd進入MySQL

此處能夠修改本身的密碼：
輸入use mysql，選擇mysql數據庫
輸入update user set password=PASSWORD("20151213") where user='root';
輸入flush privileges;，更新權限

咱們先使用create database Guo;創建一個數據庫；
使用show databases;查看存在的數據庫；

使用use 庫名;使用咱們建立的數據庫：

接着使用create table 表名 (字段設定列表);創建數據表，數據表是數據庫中一個很是重要的對象，一個數據庫中可能包含若干個數據表；

create table Guo(username VARCHAR(20), password VARCHAR(32));

使用show tables查看存在的數據表：

使用insert into 表名 values('值1','值2','值3'...);插入數據；

insert into Guo values('guoyicai','20151213');

使用select * from 表名;查詢表中的數據：

咱們還能夠在MySQL中增長新用戶，使用grant select(insert,update,delete) on 數據庫.* to 用戶名@登陸主機 identified by "密碼";

grant select,insert,update,delete on Guo.* to gyc@localhost identified by "20151213"; #爲數據庫Guo增長一個新用戶gyc，密碼爲20151213,而且賦予select,insert,update,delete四個操做權限

5.php+mysql

從新編輯login.php，改成如下內容。

<!DOCTYPE html>
<html>
<body>

<?php
$uname=($_GET["username"]);
$pwd=($_GET["password"]);
/* echo $uname; */
$query_str="SELECT * FROM Guo where username='{$uname}' and password='{$pwd}';";   //sql查詢語句

/* echo "<br> {$query_str} <br>";*/

$mysqli = new mysqli("localhost", "gyc", "20151213", "Guo");　　　　　　//建立一個mysqli對象，面向對象使用數據庫

/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}


/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){　　　　　　　　　　　　　　//若是符合query_str中的查詢條件，則打印uname
        echo "<br> Wellcome login Mr/Mrs:{$uname} <br> ";
    } else {
        echo "<br> login failed!!!! <br> " ;
    }

    /* free result set */
    $result->close();
}


$mysqli->close();

?>

</body>
</html>

結果以下

6.SQL注入

由於已經知道sql語句是怎麼寫的，因此很容易能夠經過sql注入繞過密碼驗證，

只須要將

SELECT * FROM Guo where username='{$uname}' and password='{$pwd}';
變成

SELECT * FROM Guo where username='' or 1=1;#' and password='{$pwd}';
這樣隨便用戶名均可以繞過密碼驗證

7.XSS

跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫爲XSS。XSS是一種常常出如今web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。好比這些代碼包括HTML代碼和客戶端腳本。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型的漏洞因爲被駭客用來編寫危害性更大的phishing攻擊而變得廣爲人知。

能夠編寫下面這樣的代碼做爲用戶名輸入

<a href="http://www.baidu.com">登陸錯誤，點擊查看幫助</a> ' or  1=1;#

結果以下，若是用戶點擊了，就去咱們給的網址，固然也能夠加入js腳本，直接執行不少操做。

實驗體會

此次實驗對我來講確實有難度，由於沒有這方面的知識，須要本身學html，js，php，mysql，還有web服務器和瀏覽器的工做機制，以及服務器經過sql語句與數據庫通訊的過程。雖然作起來很難，但收穫也很大，經過此次實驗認清了web服務器和瀏覽器到底都在作哪些工做，還學到了幾句sql語句，獲益匪淺。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。