Exp8 Web基礎

時間 2019-11-30

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

原文原文鏈接

Web基礎

終於來到Web應用安全這一領域了。基礎爲王，要想入門Web安全領域，對基本的Web開發的基礎知識必定要了解。javascript

Web開發通常來講是分前端、後端的。固然如今很火的一個概念——全棧工程師，能夠認爲是對先後端都有涉獵的全才。php

0x0 環境搭建

環境的搭建不是重點，這裏就輕描淡寫地說一下。有問題能夠利用搜索引擎查找解決方案。css

0x01 apache的安裝

此次實驗我用的是ubuntu 18.04，在這上面安裝Apache很是簡單。html

sudo apt-get install apache2

安裝apache2後，輸入下面的命令打開apache服務前端

/etc/init.d/apache2 start

而後在瀏覽器裏輸入localhost查看測試頁面java

關閉apache服務用/etc/init.d/apache2 stop便可node

0x02 mysql的安裝與使用

mysql的安裝也很是簡單sudo apt-get install mysql-serverpython

而後開啓服務/etc/init.d/mysql startmysql

接着進入mysql，輸入sudo mysql -u root -p 默認password依然是rootweb

而後咱們創建一個新的數據庫web_db，輸入create database web_db

在web_db數據庫中，創建一個名爲users的表

use web_db;
create table users(
    username varchar(256),
    password varchar(20)
);

而後咱們向users表中插入一條數據

insert into users values('wangyifan', '20155110');

至此，咱們的準備工做已經作好了。

因爲權限問題，咱們還有另外一個用戶帳號能夠登陸mysql。

查看/etc/mysql/debian.cnf中的內容

用戶名debian-sys-maint，口令SY7hZpYpuHu5YJY4也能夠訪問數據庫。

關於SQL語句和關係型數據庫的話題，須要之後慢慢了解。

0x03 PHP的安裝與配置

咱們直接上PHP的官網php.net找解決方案吧。

這裏我就不重複搬運了。別忘了php的mysql模塊的安裝

在/var/www/html下建立一個測試用的test.php

<?php
phpinfo()
?>

在瀏覽器中訪問這個PHP文件，咱們就能夠查看PHP的配置狀況

至此，咱們完成了PHP的配置。

0x1 Web前端基礎知識概述

Web開發方面的知識上手很快，可是隨着技術的不斷進步，源源不斷的新框架、新技術、新思想、新實踐的出現，更讓人眼花繚亂。

即使是Web前端也發生了翻天覆地的變化，早年掌握html，css，JavaScript熟悉dreamweaver就能吃遍天。

而如今，前端的工程化實踐愈來愈凸顯，各大框架層出不窮……

node.js的出現使得一大批JavaScript前端工程師又標榜本身是「全棧工程師」……

固然了，咱們暫時不須要了解最新的技術，但必定要掌握一些基礎。

0x11 HTML和DOM（文檔對象模型）

通俗的來講，HTML文檔就是網頁，它由衆多的標籤組成，標籤內還有各類屬性。

咱們應該瞭解

URL的組成
HTTP協議
文檔對象模型（DOM）

這裏着重介紹一下DOM這個東西。HTML文檔從某種程度上說，就是一棵DOM樹。

沒錯，DOM是一個樹型結構，就像下圖這樣。

每一個節點都是一個對象，擁有方法和屬性。

JavaScript能夠訪問和更新這個DOM樹（而不是HTML源代碼）

針對DOM樹的任何修改都會反映到瀏覽器中。

HTML中有一個臭名昭著的標籤就是iframe，早期的網頁掛馬用的就是iframe標籤。

0x12 Web時代的shellcode——JavaScript

JavaScript是被《Web前端黑客技術揭祕》的做者稱爲「跨站之魂」的強大語言。

JavaScript幾乎能夠控制前端的一切操做，還能獲取隱私信息。有了XSS漏洞，經過注入JavaScript攻擊者就能夠進行一系列操做。

對於JavaScript，咱們至少應該知道：

DOM樹的操做
同源策略
AJAX技術
cookie安全

限於篇幅，咱們這裏只介紹 同源策略，它是瀏覽器最核心也最基本的安全功能。

Web是構建在同源策略基礎之上的，AJAX就是嚴格遵照同源策略的，cookie的共享也嚴格限制在同一父域中。

咱們着重討論什麼是同域。同域就是兩個站點用同協議、同域名、同端口。

咱們給出一個例子，判斷下面的站點是否與http://www.example.com同域。

站點	是否同域	緣由
https://www.example.com	不一樣域	協議不一樣（http與https）
http://test.example.com	不一樣域	域名不一樣（子域名test和www）
http://example.com	不一樣域	域名不一樣（頂級域和www子域）
http://www.example.com:8080	不一樣域	端口不一樣（8080端口和80端口）
http://www.example.com/a/	同域	同協議，同域名，同端口，只是多了個目錄

一般所說的兩個站點同域，就是指它們同源。

AJAX是很是經常使用的技術，可讓數據在後臺進行異步傳輸，好比對網頁局部數據的更新，不用刷新整個網頁。AJAX同時也是黑客「殺人無形」的利器。咱們有時間應該熟悉一下這個技術。

0x13 爲啥不談CSS

CSS是層疊樣式表，用來控制網頁的呈現樣式，好比顏色、字體、大小、高寬、佈局等等。

做爲網絡對抗這門課來講，經過CSS的靈活應用作假裝來釣魚是個不錯的選擇。

不過讓一個黑客搞美工？這……有點不太現實。

0x2 本身編寫一個簡單的網站

接下來，咱們本身簡單地寫一個網站，只完成最基本的登陸功能便可。

咱們以前建立了web_db這個數據庫，在web_db中添加了users表，並插入了一條數據。

登陸的用戶名爲wangyifan，口令爲20155110。

0x21 用HTML寫登陸表單

首先咱們編寫前端的登陸頁面，很是簡單。

咱們編寫一個名叫login.html的登陸表單

<html>
<head>
  <title>Welcome</title>
</head>
<body>
  <h1>Welcome!</h1>
  <form method="POST" action="login.php">
    <label>
      Name:
      <input type="text" id="username" name="username" />
    </label> 
    <br />
    <label>
      Password:
      <input type="password" id="password" name="password" />
    </label> 
    <br />
    <div id="feedback"></div>
    <br />
    <input type="submit" value="login" />
  </form>
  
  <script src="event.js"></script>
  
</body>
</html>

核心部分就是form表單，input標籤的name屬性是後臺php接收參數時要用到的。

<input type="password">是密碼框，儘管在屏幕上被隱藏了口令，但不表明傳輸過程當中是安全的。

咱們特意留下了id屬性，和div標籤，這是爲了後面的JavaScript用getElementById操做DOM元素和處理事件用的。

0x22 用JavaScript處理事件

咱們編寫event.js處理事件。當焦點離開用戶名輸入框時，若是用戶輸入的字符少於5個，咱們在頁面反饋信息，提示用戶名不該該少於5個字符。

function checkUsername() {                            
  var elMsg = document.getElementById('feedback');   
  if (this.value.length < 5) {                       
    elMsg.textContent = 'Username must be 5 characters or more';  
  } else {                                           
    elMsg.textContent = '';                           
  }
}

var elUsername = document.getElementById('username');
elUsername.onblur = checkUsername;

JavaScript處理事件的方法有三種：HTML事件處理屬性、DOM事件處理、事件監聽器。

咱們這裏用到的是第二種——DOM事件處理。(我到一個大牛朋友嘲笑我不會JQuery……其實我對JavaScript也一竅不通)

詳細的一些JavaScript處理DOM的技巧，能夠看一下《JavaScript DOM編程藝術》

0x23 用PHP編寫後臺邏輯

咱們用PHP處理前端提交的表單。依葫蘆畫瓢，照搬學長的代碼。

下面是login.php

<?php
$username=$_POST["username"];
$password=$_POST["password"];

$query_str="SELECT * FROM users where username='$username' and password='$password';";
$mysqli = new mysqli("127.0.0.1", "debian-sys-maint", "SY7hZpYpuHu5YJY4", "web_db");

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

if ($result = $mysqli->query($query_str)) {
    if ($result->num_rows > 0 ){
            echo "<br><h3>Hello, $username</h3>  <br> ";
    } 
    else {
        echo "<br><h3> login failed!!!! </h3><br> " ; }
    $result->close();
}
$mysqli->close();
?>

雖然我對PHP一竅不通，可是這段代碼的邏輯很容易從字面上理解的。

和Java的JDBC相比，php鏈接數據庫仍是挺方便的。

這裏故意用字符串拼接的方式構成$query_str查詢語句，方便後面的SQL注入。

若是用參數化語句的話，就能大大提升對SQL注入的免疫力。