20164313 杜桂鑫 Exp 8 Web基礎

時間 2019-11-18

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

原文原文鏈接

實踐說明

1.Web前端HTML
- 能正常安裝、啓停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTML。
2.Web前端javascipt
- 理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規則。
3.Web後端：MySQL基礎
- 正常安裝、啓動MySQL，建庫、建立用戶、修改密碼、建表(0.5分)
4.Web後端：編寫PHP網頁
- 鏈接數據庫，進行用戶認證(1分)
5.最簡單的SQL注入，XSS攻擊測試
- 功能描述：用戶能登錄，登錄用戶名密碼保存在數據庫中，登錄成功顯示歡迎頁面。

實踐過程

(1).Web前端HTML

輸入 service apache2 start 打開Apache服務javascript

在瀏覽器中輸入127.0.0.1，若能登錄Apache默認網頁，則開啓成功php

進入Apache目錄/var/www/html，新建一個含有表單的html文件 simple_form.html ,內容以下：
html

<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

    <h2 align="center">Login</h2>
        <center>
        <form action="login" method="post">
            <input placeholder="E-mail" name="Name" class="user" type="email">
            <br>
            </br>
            <input  placeholder="Password" name="Password" class="pass" type="password">
            <br>
            </br>
            <input type="submit" value="Login">
        </form>
        </center>
</body>
</html>

在瀏覽器中打開網頁前端

(2).Web前端javascipt

在原有基礎上添加一段JavaScript代碼，以判斷用戶是否填寫郵件和密碼。修改後的login_form.html內容以下：
java

<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

    <h2 align="center">Login</h2>
    <center>
        <form action="login" method="post" name="form_login">
            <input placeholder="E-mail" name="Name" class="user" type="email" onfocus="if (this.value=='Your email') this.value='';" />
            <br>
            </br>
            <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>
            <br>
            </br>
            <input type="submit" value="Login"  onClick="return validateLogin()"/>
        </form>
    </center>

<script language="javascript">  
    function validateLogin(){  
        var sUserName = document.form_login.Name.value ;  
        var sPassword = document.form_login.Password.value ;    
        if ((sUserName =="") || (sUserName=="Your email")){  
        alert("User Email!");  
        return false ;  
        }  

        if ((sPassword =="") || (sPassword=="Your password")){  
        alert("Password!");  
        return false ;  
        }  

    }   
</script>  

</body>
</html>

在瀏覽器訪問網頁，若是用戶或密碼未填寫就提交，網頁會出現以下提示：mysql

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

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

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

輸入 show databases; 查看數據庫基本信息數據庫

輸入 use mysql; 選擇使用mysql這個數據庫apache

輸入 select user, password, host from user; 查看當前用戶信息

輸入 update user set password=PASSWORD("新密碼") where user='root'; 修改密碼

輸入 flush privileges; ，更新權限

輸入exit退出數據庫，使用新的密碼登陸

輸入 create database 數據庫名稱; 新建數據庫

輸入 show databases; 查看存在的數據庫

輸入 use du4313; 使用建立的數據庫，輸入 create table 表名 (字段設定列表); 創建數據庫表，並設置字段基本信息：

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

輸入 select * from 表名; 查看錶內數據

在MySQL中增長新用戶，輸入 grant select,insert,update,delete on 數據庫.* to 用戶名@登陸主機(能夠是localhost,也能夠是遠程登陸方式的IP) identified by "密碼";

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

利用PHP和MySQL，結合以前編寫的登陸網頁在/var/www/html目錄下新建一個PHP login.php

<?php
$uname=$_POST["Email"];
$pwd=$_POST["Password"];
echo $unam
$query_str="SELECT * FROM login where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "dgx", "000000", "dgx");
$query_str1="use dgx;";

/* 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_str1))
echo"<br>Success into database!";
echo$uname;
if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){
            echo "<br> {$uname}:Welcome!!! <br> ";
    } 
    else {
        echo "<br> login failed!!!! <br> " ; }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

在瀏覽器輸入 127.0.0.1/login.html

輸入 http://127.0.0.1/simple_form.html

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

1. SQL注入：SQL注入，就是經過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。具體來講，它是利用現有應用程序，將（惡意的）SQL命令注入到後臺數據庫引擎執行的能力，它能夠經過在Web表單中輸入（惡意）SQL語句獲得一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。

在用戶名輸入郵箱，密碼框輸入 ' or 1=1#

登錄成功！！！

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

將一張圖片放在 /var/www/html 目錄中，在用戶輸入框中輸入 <img src="dgx.jpg" />

基礎問題回答

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

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

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

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

3.WebServer支持哪些動態語言？

目前，最經常使用的三種動態網頁語言ASP(ActiveServerPages),JSP(JavaServerPages),PHP(HypertextPreprocessor)。

ASP全名ActiveServerPages，是一個WEB服務器端的開發環境，利用它能夠產生和執行動態的、互動的、高性能的WEB服務應用程序。ASP採用腳本語言VBScript（Javascript）做爲本身的開發語言。
PHP是一種跨平臺的服務器端的嵌入式腳本語言。它大量地借用C,Java和Perl語言的語法,並耦合PHP本身的特性,使WEB開發者可以快速地寫出動態產生頁面。它支持目前絕大多數數據庫。
JSP是Sun公司推出的新一代網站開發語言，JavaServerPage。JSP能夠在Serverlet和JavaBean的支持下，完成功能強大的站點程序