Exp 8 Web基礎 Week12 - 20165201

時間 2019-11-30

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

原文原文鏈接

Exp 8 Web基礎 Week12 - 20165201

（因爲圖片比較大，看的時候須要關閉側邊欄~）javascript

學習目標

(1)Web前端HTML(0.5分)php

能正常安裝、啓停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTML。html

(2)Web前端javascipt(0.5分)前端

理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規則。java

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

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

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

實驗環境

macOS Mojave
Kali
Windows XP

基礎問題回答

（1）什麼是表單

HTML 表單用於蒐集不一樣類型的用戶輸入，<form> 元素定義 HTML 表單
HTML 表單包含表單元素，表單元素指的是不一樣類型的 input 元素、複選框、單選按鈕、提交按鈕等等
<input>元素是最重要的表單元素，<input> 元素有不少形態，根據不一樣的 type 屬性：
- text：定義常規文本輸入
- radio：定義單選按鈕輸入（選擇多個選擇之一）
- submit：定義提交按鈕（提交表單）
<select>元素定義下拉列表
<option>元素定義待選擇的選項
<textarea>元素定義多行輸入字段（文本域）
<button> 元素定義可點擊的按鈕

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

HTML：超文本標記語言(Hyper Text Markup Language)
PHP：超文本預處理器（Hypertext Preprocessor）
JavaScript
XML：可擴展標記語言

(3) WebServer支持哪些動態語言

支持JavaScript、ASP、PHP、Ruby等腳本語言
- PHP基於APACHE WEB SERVER
- ASP基於IIS WEB SERVER，是微軟的服務器端腳本技術

預備知識

(1)什麼是 HTTP？

超文本傳輸協議（HTTP）的設計目的是保證客戶機與服務器之間的通訊
HTTP 的工做方式是客戶機與服務器之間的請求-應答協議

(2)兩種 HTTP 請求方法：`GET` 和 `POST`

GET：從指定的資源請求數據，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的
- GET 請求可被緩存
- GET 請求保留在瀏覽器歷史記錄中
- GET 請求可被收藏爲書籤
- GET 請求不該在處理敏感數據時使用
- GET 請求有長度限制
- GET 請求只應當用於取回數據
- 與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分，在發送密碼或其餘敏感信息時毫不要使用 GET
POST：向指定的資源提交要被處理的數據，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的
- POST 請求不會被緩存
- POST 請求不會保留在瀏覽器歷史記錄中
- POST 不能被收藏爲書籤
- POST 請求對數據長度沒有要求
- POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中

實驗步驟

1、Web前端HTML

能正常安裝、啓停Apache（Mac下）

Mac系統自帶Apache服務，在終端中輸入httpd -v查看Apache服務
輸入sudo apachectl start以開啓Apache服務
而後在Safari中輸入網址http://127.0.0.1或http://localhost，若是出現下面的界面就表示Apache服務能夠正常使用
工做目錄爲/Library/WebServer/Documents
輸入sudo apachectl stop以關閉Apache服務
輸入sudo apachectl restart以重啓Apache服務數據庫
或者使用xampp開啓Apache服務，這個比較方便
apache

理解HTML，理解表單

HTML相關知識在以前的網絡安全編程基礎中已經學過，表單的概念也是：
HTML 表單用於蒐集不一樣類型的用戶輸入，<form> 元素定義 HTML 表單
HTML 表單包含表單元素，表單元素指的是不一樣類型的 input 元素、複選框、單選按鈕、提交按鈕等等
<input>元素是最重要的表單元素，<input> 元素有不少形態，根據不一樣的 type 屬性：
- text：定義常規文本輸入
- radio：定義單選按鈕輸入（選擇多個選擇之一）
- submit：定義提交按鈕（提交表單）
<select>元素定義下拉列表
<option>元素定義待選擇的選項
<textarea>元素定義多行輸入字段（文本域）
<button> 元素定義可點擊的按鈕

理解GET與POST方法

GET：從指定的資源請求數據，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的
- GET 請求可被緩存
- GET 請求保留在瀏覽器歷史記錄中
- GET 請求可被收藏爲書籤
- GET 請求不該在處理敏感數據時使用
- GET 請求有長度限制
- GET 請求只應當用於取回數據
- 與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分，在發送密碼或其餘敏感信息時毫不要使用 GET
POST：向指定的資源提交要被處理的數據，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的
- POST 請求不會被緩存
- POST 請求不會保留在瀏覽器歷史記錄中
- POST 不能被收藏爲書籤
- POST 請求對數據長度沒有要求
- POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中

編寫一個含有表單的HTML

我在Intellij IDEA中編寫代碼，而後啓動Apache服務
代碼以下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>登錄頁面</title>
</head>
<body background="img/login.jpg">
<h1 align="center" >登錄界面</h1><br>
<div style="text-align: center">
    <form action="login" method="post">
        用戶名 <input type="text" name = "username" /> <br><br>&nbsp;&nbsp;
        密碼&nbsp; <input type="password" name = "password"> <br>
        <input type = "submit" value = "提交">
    </form>
</div>

</body>
</html>

運行結果以下：

2、Web前端javascipt

理解JavaScript的基本功能，理解DOM

HTML DOM 定義了訪問和操做 HTML 文檔的標準方法，DOM 將 HTML 文檔表達爲樹結構

編寫JavaScript驗證用戶名、密碼的規則

登陸檢測沒有輸入用戶名或密碼的代碼以下：

<script language="javascript">
    function check(){
        var sUserName = document.form_login.username.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>

個人登陸驗證代碼以下：

package servlet;

import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javabean.DBUtil;

public class LoginServlet implements javax.servlet.Servlet {
    @Override
    public void destroy() {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void init(ServletConfig arg0) throws ServletException {

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, InstantiationException, IllegalAccessException {
        String userName = request.getParameter("username");
        String password = request.getParameter("password");
        DBUtil db = new DBUtil();
        boolean canLogin = db.loginSuccess(userName, password);
        if (canLogin) {
            response.sendRedirect("index.jsp");
        } else {
            response.sendRedirect("back.jsp");
        }
    }

    @Override
    public void service(ServletRequest request, ServletResponse response)
            throws ServletException, IOException {
        HttpServletRequest rq = (HttpServletRequest) request;
        HttpServletResponse rs = (HttpServletResponse) response;
        try {
            doPost(rq, rs);
        } catch (InstantiationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

}

個人主界面是index.jsp
登陸界面是login.jsp
出錯界面是back.jsp，若是用戶輸入錯誤，會返回以下界面

3、Web後端：MySQL基礎

正常安裝、啓動MySQL，建庫、建立用戶、修改密碼、建表

後端這塊我使用了Navicat這個軟件，Navicat Premium 是一套數據庫開發工具，讓你從單一應用程序中同時鏈接 MySQL、MariaDB、MongoDB、SQL Server、Oracle、PostgreSQL 和 SQLite 數據庫。它與 Amazon RDS、Amazon Aurora、Amazon Redshift、Microsoft Azure、Oracle Cloud、MongoDB Atlas、阿里雲、騰訊雲和華爲雲等雲數據庫兼容。你能夠快速輕鬆地建立、管理和維護數據庫
能夠看到，整個界面很是簡潔
點擊左上角的鏈接，就能夠選擇鏈接哪一個數據庫了，這裏選擇MySQL，不要看我這個光標放的位置，這圖沒截好
而後咱們新建一個叫作test的鏈接
以後是建庫，名字設爲user
接下來是建表，名字是user_info
再新建兩個用戶lzh和test
因爲我作的這個網站是介紹瑞士旅遊地區的，我又建了個新表detail

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

編寫PHP網頁，鏈接數據庫，進行用戶認證

開啓PHP

修改Apache配置文件httpd.conf，在終端中輸入命令：sudo vim /etc/apache2/httpd.conf
找到#LoadModule php7_module libexec/apache2/libphp7.so，刪除註釋（刪除前面的#）
mac下Apache的默認文件夾爲/Library/WebServer/Documents，在該目錄下建立一個名爲index.php文件，輸入命令：sudo vim /Library/WebServer/Documents/index.php
在文件中添加以下內容：

<?php 
phpinfo(); 
?>

刪除原目錄下的index.html.en和index.html.en~orig文件，輸入命令：

sudo rm /Library/WebServer/Documents/index.html.en
sudo rm /Library/WebServer/Documents/index.html.en~orig

在Safari中輸入127.0.0.1或localhost，出現以下PHP的info頁，表示PHP開啓成功：
若是不成功，用命令sudo apachectl restart重啓Apache

PHP編程

測試php可正常工做，輸入命令：sudo vim /Library/WebServer/Documents/test.php
內容爲：

<?php
include($_GET["a"]);
?>

Safari打開127.0.0.1/test.php?a=/etc/passwd可看到/etc/passwd文件的內容（PHP變量大小寫敏感）
/etc/passwd文件存放的是操做系統用戶信息，該文件爲全部用戶可見。用戶信息記錄了由6個分號組成的7個信息，解釋以下：
- 用戶名
- 密碼（已經加密）
- UID（用戶標識）,操做系統本身用的
- GID組標識
- 用戶全名或本地賬號
- 開始目錄
- 登陸使用的Shell，就是對登陸命令進行解析的工具
嘗試獲取表單數據，輸入命令： sudo vim /Library/WebServer/Documents/login.php
代碼以下：

<!DOCTYPE html>
<html>
<body>

<?php
echo "個人第一段 PHP 腳本！";

$uname=($_GET["username"]);
$pwd=($_GET["password"]);

echo $uname;
echo $pwd;

?>

</body>
</html>

該php的參數是從前面login.html提交的表單獲取的數據
下面的代碼是修改以後的

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

/* 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();
?>

5、最簡單的SQL注入，XSS攻擊測試

SQL注入

SQL注入，就是經過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。具體來講，它是利用現有應用程序，將（惡意的）SQL命令注入到後臺數據庫引擎執行的能力，它能夠經過在Web表單中輸入（惡意）SQL語句獲得一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句
在用戶名輸入框輸入' or 1=1#，密碼任意輸入，可登錄成功：
成功登錄！
這是因爲輸入的用戶名和咱們的代碼中select語句組合起來變成了select * from users where username='' or 1=1#' and password='',#至關於註釋符，會把後面的內容都註釋掉，而1=1是永真式，因此這個條件永遠成立，因此無論密碼是否輸入正確，都可以成功登錄

XSS攻擊

跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫爲XSS。XSS是一種常常出如今web應用中的計算機安全漏洞，它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。好比這些代碼包括HTML代碼和客戶端腳本。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型的漏洞因爲被駭客用來編寫危害性更大的phishing攻擊而變得廣爲人知
將一張圖片放在/Library/WebServer/Documents/目錄下
在用戶名輸入框輸入<img src="test.png" />，密碼隨意，便可讀取圖片：