WEB簡介與HTTP入門

從通信看，會接觸到 URL，到協議，會接觸到 HTTP，再到前后端的
概念，前端即 HTML，CSS，JavaScript，三劍客。后端，即處理腳本語言，比如PHP，JAVA，python，SQL 等等，再細致的分還能分為很多，這是一個龐大的鏈路，我們先從簡單的學起就好啦。

WEB簡介

1. 什么是WEB

WEB，就是所謂的 WWW 全球廣域網（World Wide Web），也就是我們常說的萬維網。

那什么是 Web 呢？
它是一種基于超文本和 HTTP 的、全球性的、動態交互的、跨平臺的分布式圖形
信息系統。是建立在 Internet 上的一種網絡服務，為瀏覽者在 Internet 上查找
和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將
Internet 上的信息節點組織成一個互為關聯的網狀結構。
上面說了這些比較官方，根據實際生活來看，就無非是可以與人交互的網頁，現
在科技真是越來越強大。Web 也有他的發展史，下一段會說到，發展到現在與人
交互，處理各種事物，各種管理平臺也應用而生，因此也帶了了很多的風險，具
體風險都有哪些危害，之后都會了解到，現在我們一步步來

2. WEB 發展史

• 靜態頁面

在互聯網最初開始的時候，Web 網站的主要內容是靜態的，由文字和圖片組成，制作和表現形式也是以表格為主。當時的用戶行為也非常簡單，僅僅是瀏覽網頁。

• 多媒體階段

隨著技術的不斷發展，音頻、視頻、Flash 等多媒體技術誕生了。多媒體的加入使得網頁變得更加生動形象，網頁上的交互也給用戶帶來了更好的體驗。

• CGI 階段

漸漸的，多媒體已經不能滿足人們的請求，于是 CGI（Common Gateway Interface）應運而生。CGI 定義了 Web 服務器與外部應用程序之間的通信接口標準，因此 Web服務器可以通過 CGI 執行外部程序，讓外部程序根據 Web 請求內容生成動態的內容。
在這個時候，各種編程語言如 PHP/ASP/JSP 也逐漸加入市場，基于這些語言可以實現更加模塊化的、功能更強大的應用程序。

• AJAX

在開始的時候，用戶提交整個表單后才能獲取結果，用戶體驗極差。于是 Ajax（Asynchronous Javascript And XML）技術逐漸流行起來，它使得應用在不更新整個頁面的前提下也可以獲得或更新數據。這使得 Web 應用程序更為迅捷地回應用戶動作，并避免了在網絡上發送那些沒有改變的信息。

• MVC

隨著 Web 應用開發越來越標準化，出現了 MVC 等思想。MVC 是 Model/View/Control的縮寫，Model 用于封裝數據和數據處理方法，視圖 View 是數據的 HTML 展現，控制器 Controller 負責響應請求，協調 Model 和 View。Model，View 和 Controller 的分開，是一種典型的關注點分離的思想，使得代碼復用性和組織性更好，Web 應用的配置性和靈活性也越來越好。而數據訪問也逐漸通過面向對象的方式來替代直接的 SQL 訪問，出現了 ORM（Object Relation Mapping）的概念。除了 MVC，類似的設計思想還有 MVP，MVVM 等。

• RESTful

在 CGI 時期，前后端通常是沒有做嚴格區分的，隨著解耦和的需求不斷增加，前后端的概念開始變得清晰。前端主要指網站前臺部分，運行在 PC 端、移動端等瀏覽器上展現給用戶瀏覽的網頁，由 HTML5、CSS3、JavaScript 組成。后端主要指網站的邏輯部分，涉及數據的增刪改查等。
此時，REST（Representation State Transformation）逐漸成為一種流行的 Web架構風格。REST 鼓勵基于 URL 來組織系統功能，充分利用 HTTP 本身的語義，而不是僅僅將HTTP 作為一種遠程數據傳輸協議。

• 云服務

隨著時間的發展，Web 的架構越發復雜，負載均衡、數據庫分表、異地容災、緩存、CDN、消息隊列等技術開始應用，增加了 Web 開發和運維的復雜度。同時云服務開始逐漸發展，部署環境容器化，各個功能拆成微服務或是 Serverless 的架構。

3. WEB 工作方式

• 先舉個簡單的例子：

有一天你和你的小女朋友來到了一家餐廳，桌子上放著餐單，上面各式各樣的菜品，什么土豆燉牛肉，什么宮保雞丁啦，都是你們愛吃的菜，這時服務員過來，問兩位需要點什么菜品，你們隨機點了這兩個愛吃的菜，服務員記錄在了一張紙上，大步走向后廚房。不久，菜品做好了，服務員給你端上了美味佳肴，你們大快朵頤，飯后，你們決定溜溜，然后……(就該各回各家了)
在上面什么是 Web 中，簡單說明了 Web 的構造，大致分為前端和后端，協議使用的是 HTTP，通信方法是下面會說到的，使用的是 URL。

• 根據這個例子進一步說明：

桌子上的餐單即為一個網頁，一個精心構造的前端頁面，上面的菜品即為一個個超鏈接，你選擇了土豆燉牛肉，這時服務員通過 HTTP 協議打包好你的請求，通過 URL 去訪問你需要的這份資源，然后來到了后端，就是后廚房嘛，一般這就是網站的服務器所在地，廚師也就是說服務器奮力的給你做好這份菜品，再通過服務員送到了你的餐桌上，即呈現在了你所看到的網頁上。
舉了個通俗的例子，目的是便于大家理解。

4. 下面我們詳細介紹幾個概念：

• 什么是 URL

URL 即為統一資源定位符（Uniform Resource Locator），就是我們平時所用到的 URL 連接，比如 www.baidu.com,www.bing.com，這些都是 URL 地址，便于我們記憶，不然一堆 IP 地址，記到什么時候去。但現在 URL 地址不僅僅是方便記錄的原因了，一般廠商都會使用 CDN 節點，很難知道他們服務器的真實 IP 地址，如果你知道了，對于他們來說是一個很大的風險。所以在之后滲透測試時，信息收集到真實的 IP 地址也是一個關鍵的地方。

• URL 標準格式：
  schema://host[:port#]/path/.../[?query-string][#anchor]

schema：協議類型
host：服務器地址
port：端口號
path：路徑
？query-string：查詢語句
#anchor：頁面錨點

Schema 協議類型一般就是我們常見的 http 或者 https，host 是服務器地址，一般就是 URL 地址，如果你知道真實的 IP 地址，也可以打開目標網頁，port 為端口號，一般都是 80 端口，是可以省略掉的，使用的是 http 協議，而 https 協議使用的 443 端口，path 路徑是目標服務器存放該頁面的相對路徑，？query-string 是你要查詢的語句，#anchor 是頁面的某個錨點，一般較少見。

• 舉個例子，大家可以自己分析下：（或者多觀察下 URL 鏈接）

https://cn.bing.com/search?q=7089bat&qs=n&form=QBLH&sp=-1&pq=7089bat&
sc=0-7&sk=&cvid=5359B320893A4CDCA9A0BDD31D728BC0

• 什么是 DNS 服務器

DNS（域名系統，Domain Name System），它作為將域名和 IP 地址相互映射的一個分布式數據庫，能夠使人更方便地訪問互聯網。通俗來說，這就是一個大型的數據庫，里面存放著 URL 以及與其對應的 IP 地址，類比一下就好像圖書館的索引一樣，你根據這個索引就可以找到這本書。

這時我們總結一下，加上我們平時上網的過程，來進一步加深理解：

首先我們會用瀏覽器訪問各種資源，瀏覽器是客戶端角色，當你輸入 URL 時，瀏覽器會首先請求 DNS 服務器，DNS 根據你請求的 URL 返回對應的 IP 地址，接下來，瀏覽器會帶著你請求的信息去訪問該 IP 的服務器，來處理你的請求，當服務器接收到了你的請求后，會根據 HTTP 協議所帶的數據，來對你的訪問進行處理，這個處理就是后端過程，可能使用的是 PHP，可能是 JAVA 語言，或者其他，處理完成之后再將這些信息返回給客戶端，客戶端根據返回的數據進行呈現，呈現的網頁即為前端，其中包括了 HTML,CSS,JavaScript，基本元素，一個豐富的頁面就呈現在了你的眼前。

• Bing 請求的基本流程：
  

HTTP 簡介

HTTP（HyperText Transfer Protocol，超文本傳輸協議），是因特網上應用最為廣泛的一種網絡傳輸協議，所有的 WWW 文件都必須遵守這個標準。HTTP 是一個基于 TCP/IP 通信協議來傳遞數據（HTML 文件, 圖片文件, 查詢結果等）。

HTTP 請求報文：

完整的 HTTP 請求包含以下內容，請求方法一般是 GET 和 POST，URL 即你請求的地址，協議版本一般都是 HTTP/1.1，然后配合著請求頭，來訪問你請求的資源，請求頭有通用的，也有廠家自定義的。
如果是 POST 請求，會攜帶請求數據。>GET 請求的數據會在 URL 處攜帶查詢，即我們前面說到的 ？query-string 部分，POST 只不過把查詢部分放在了請求報文中，即下面請求數據的部分，這樣做的目的是，較為安全的保障所請求的數據。GET 所請求的數據在 URL 中，一般大家都能看到，但是現在不管哪種請求，都或多或少的加入了編碼，這樣數據不進行特定的方式解碼，是看不到具體數據的。

請求方法	空格	url	空格	協議版本	回車符	換行符	請求行
頭部字段名	：	值	回車符	換行符			請求頭部
頭部字段名	：	值	回車符	換行符			請求頭部
回車符	換行符
DATA							請求數據

請求方法：

GET：請求指定頁面信息，并返回主體，數據插入進 URL 中進行傳輸。
POST：向指定資源提交數據進行請求，數據被放在請求數據體中傳輸。
HEAD：類似 GET 請求，但只獲取頭部信息，無響應體。
PUT：將傳輸數據取代指定文檔傳輸。
DELETE：請求服務器刪除指定頁面。
CONNECT：與代理服務器可以進行管道方式連接。
OPTIONS：查詢針對請求 URL 指定資源支持的方法。
TRACE：可以對請求消息的傳輸路徑追蹤。
MOVE：請求服務器將指定的頁面移動到另一個網絡地址上。

請求頭部：（常見的請求頭）

Hsot：請求資源的服務器
User-Agent：客戶端程序的信息
If-Match：比較實體標記（Etag）
If-Modified-Since：比較資源更新的時間
Authorization：web 認證信息
Accept：用戶代理可處理的媒體類型
Accept-Charset：優先的字符集
Accept-Encoding：優先的內容編碼
Accept-Language：優先的語言（自然語言）

• 實際一個小例子：
  GET 請求：
  
  POST 請求
  

HTTP 響應報文：

• 響應報文組成：

第一行：HTTP 協議版本 + 狀態碼 + 原因短語
下面若干行：可選的響應首部信息
空行
剩下的消息：為響應的信息

一個例子：

響應狀態碼：

1xx：信息，服務器收到請求，需要請求者繼續執行相關操作。
2xx：成功，操作被成功接受并處理。
3xx：重定向，需要進行附加操作以完成請求。
4xx：客戶端錯誤，請求中存在語法錯誤，服務器無法處理請求。
5xx：服務器錯誤，服務器在處理請求的過程發生了錯誤

• 常見的狀態碼含義：

200 OK：表示客戶端發來的請求在服務器端被正常處理了。
301 Not Modified：表示客戶端附帶條件的請求，未滿足條件。
400 Bad Request：表示請求報文中存在語法錯誤。
401 Unauthorized：表示發送的請求需要有通過 HTTP 認證的信息。
403 Forbidden：表明對請求資源的訪問被服務器拒絕了。
404 Not Found：服務器無法找到請求的資源。
500 Internal Server Error：表明服務器端在執行請求時發生了錯誤。
503 Service Unavailable：表明服務器暫時處于超負載或進行停機維護。

• 響應頭部：

Server:服務器的信息
Location：狀態碼出現 3xx 是一般會配合該頭部指向重定向的地址。
Set-cookie：服務器想用戶發放的表示憑證。
HttpOnly：使 JavaScript 腳本無法獲取 cookie，防止 xss 攻擊。
X-Frame-Options：控制網站內容在其他 web 網站的 Frame 標簽內的顯示問題。防止點擊劫持攻擊；
DENY：拒絕
SAMEORGIN：僅同源域名下的頁面匹配時許可
X-Powered-By：可以知道 web 后端語言（但是可以修改）

Cookie

1. 什么是 cookie

首先我們需要知道的是，HTTP 是無狀態協議，你單純從網絡上請求數據，服務器端并不知道是誰請求的數據。這時 Cookie 就出現了，它的作用是給每個客戶端頒發一個通行證，這樣服務端就能確認目標身份了。Cookie 不單單是記錄身份，更多是記錄訪問者的一些信息，不然服務器一天接收那么多請求，再返回請求，他哪知道哪個是你，你又請求了哪個信息嘛。

一個列子：（你說這個 cookie 中都什么意思？恐怕只有廠家知道了）

• 小結

我們滲透時常見 URL，對于查詢數據的分析，到后面 POST 請求一個數據，針對不同的查詢來進行模糊測試。HTTP 這個部分，我們常見的無非就是 GET 和 POST，有些漏洞會涉及到 PUT，上傳一些數據，來 Getshell。剩下的就是請求頭或者響應頭的部分，常見頭的部分，大致是我列出來的，當然還有更多，大家可以自行拓展，畢竟這是個學習的過程。當然，還有很多頭部是廠家自定義的，具體含義恐怕除了猜測，只有廠家知道了。還有主要的一個地方是 Cookie 頭，這是在測試中也經常需要的。

HTML入門學習

網頁組成的三劍客：HTML+CSS+JavaScript
HTML就是是簡單的將所編輯好的頁面呈現給我們，沒有任何裝飾，他是一種靜態網頁，并不好看，很干癟，也不會與人交互。那什么是CSS呢，它其實就是給HTML做了渲染，裝飾，讓普通的頁面變得美麗了起來，但此時還是靜態頁面，接下來就該到JavaScript出場，它讓頁面動了起來，活靈活現。
我們來個類比：
用一輛車比喻的話，會很形象，一個個空蕩蕩的車架子，就是HTML，什么也干不了，不絢麗，也不會動，直到來裝飾它們的人，它開始變得好看起來，各種噴漆顏色，各種炫酷的外飾，下一步開始加入驅動方式，讓它能夠跑起來，帶著你的小女朋友去吃上節課講的土豆燉牛肉，嘿嘿。。。
這樣就構成了我們常見的網頁，一個動態豐富多彩的網頁，正是加入了這些也讓前端頁面出現了各種各樣漏洞，有趣且好玩，聽我后面課程慢慢道來。

什么是HTML

• HTML （Hyper Text Markup Language），超文本標記語言
• HTML是一種標記語言，并不是編程語言
• HTML的后綴是 .html 或 .htm ，只需將文本變為改后綴，即可成為HTML頁面
• HTML有自己的標簽，用于標記所描述的東西

什么是標記語言

上面講到了HTML是一個干癟的框架，它可以簡單的將所描述的東西用特定的標簽來標
記，這個標記是給瀏覽器看的，舉個例子，大家都知道超鏈接，當你點擊超鏈接會跳轉
到另一個被設定好的域名下，在HTML中，使用的是<a>標簽，你設定好文本，設定好
連接，點擊它，他就會跳轉到你設置好的地址。瀏覽器在做處理時，看到了 <a> 標
簽，就知道這是個超鏈接的含義，它就會將它處理為超鏈接，當然HTML標簽大多都是
成對出現的，下面會說到。

HTML使用規則

1. HTML標簽大多都是成對出現的，比如： <p>test</p> ，以 <開始標簽> 開始，以 </結束標簽> 結束。也有單獨出現的標簽，比如 <a> ， <img> 等等。
2. HTML不區分大小寫
   HTML最開始分為三層，第一層為 html 整體，然后是 Head 頭部部分， Body 體部部分。
   • Head頭部常會編寫一些提前設定好的信息，CSS和JavaScript也常寫在此部
     分，head是用戶不可見的部分。
   • Body體部是我們使用標記語言，將文本或其他標記好，呈現給用戶的部分。

• HTML基礎三層

都是以成對出現的
<html> //<html>標簽包含整個HTML文檔
<head> //<head>標簽下內容是用戶不可見部分，大多JavaScript和CSS都寫在這個地
方
</head>
<body> //主要在<body>標簽下寫入語句，大多所描述東西都會直接呈現給用戶
</body>
</html>

• HTML一個簡單的例子

右鍵 ---> 新建文本 ---> 將后綴名改為 .html 即可
使用任意文本編輯HTML文檔即可，練習以下例子

<html>
<head>
<title>HTML例子</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML例子</h1>
<h2>HTML例子</h2>
</body>
</html>

示例圖：
這是一個非常簡單的例子。

HTML屬性與事件

HTML屬性：

HTML有很多標簽，每個標簽代表不同的含義，當然標簽也有自己的屬性，做什么用
呢，屬性是對將所描述的事物賦予了意義，也是該標簽所描述事物的附加信息，舉個例
子，還是超鏈接標簽， <a> 標簽，想要超鏈接到其他地址，就需要一個 href 屬性，
該屬性設置的值即為跳轉的地址： <a href="https://bing.com">點我跳轉到Bing</>
再比如，圖像 <img> 標簽，是用于加載出一個圖像，它有width和height這兩個屬性，
代表著圖像顯示在瀏覽器中的高度和寬度：<img src="你想要顯示圖像的地址"height="100%" width="50%" />

HTML事件：

HTML事件主要是指在瀏覽器中觸發動作的能力，比如點擊某個事物時，啟動JavaScript，一個常見的XSS漏洞小例子，非常簡單的語句：<img src=1onerror=alert(/xss/) />，我先解讀下這句話，首先我們使用 <img> 標簽顯示一個圖像，但 src=1 指向的圖像地址是不存在，是個錯誤狀態，隨即加載HTML的onerror 事件，然后 onerror 反饋的動作是 alert(/xss/) ，這個指的是彈出個
對話框，并且內容顯示為 /xss/ 。
在這個例子中，我們接觸的HTML事件是 onerror ，當然還有很多事件，比如：onclick ， onload 等等。

HTML事件，擴展閱讀

三、常見的HTML標簽

1. <!DOCTYPE>
   • 聲明必須是 HTML 文檔的第一行，位于 標簽之前。
   • 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
2. 換行符 <br> 標簽
   • 標簽是空標簽（意味著它沒有結束標簽，因此這是錯誤的： <br></br> ）
3. 注釋： <!-- 從這到這都是注釋 -->
4. 段落 <p> 標簽
   • <p>P標簽，代表一個段落</p>
5. 超鏈接標簽：
   <a href="https://127.0.0.1">點我跳轉</a>
6. 圖像 標簽：
   • <img src="某個圖像地址（可以是本機圖像相對地址，或者加載遠程圖像地 址）" alt="圖像的文本，如果瀏覽器加載圖像失敗，將會顯示該文本" />
     
7. 多行文本輸入 標簽：
   • <textarea rows="3" cols="20">你試試就知道是什么意思啦，rows和 cols兩個的數值代表textarea的尺寸</textarea>
8. 文檔標題
9. 內聯框架 <iframe> 標簽：
   • <iframe src="https://www.w3school.com.cn/html/index.asp" width="100%" height="100%" />
     其中width和height屬性代表該框架的寬和高，可設置具體數值，也可以設置百分比
10. 表單 標簽
    • <form> 表單用于收集用戶的輸入，表單中有個常見的標簽，為 <input> 標簽，該標簽根據type屬性不同，有不同的形態

表單 一個小例子：

<form action="表單一般都要傳回到服務器端，用相對應的腳本處理，該位置指向處理
該表單的腳本相對地址">
文字輸入：<input type="text" name="firstname" />
單選按鈕：<input type="radio" />
提交按鈕：<input type="submit" name="tijiao" value="tijiao" />
</form

表單例子配圖：

11. <scirpt> 標簽：
    • JavaScript腳本語言標簽，在標簽內可執行JavaScript語言。

HTML字符實體

HTML預留了一些字符，你不能去使用這些字符文本，不然瀏覽器可能會誤認為HTML標
簽。但是你可以使用字符實體，來使用這些字符文本，下面圖片是常用的五個。

HTML DOM簡述

什么是HTML DOM

DOM（Document Object Model，文檔對象模型），定義了訪問和操作 HTML 文檔的標
準方法，并且DOM 是以樹結構來表達 HTML 文檔。
簡單理解，就是將我們所說的標簽即下圖中的元素，進行了樹形的結構化，這樣，
JavaScript 就獲得了足夠的能力來創建動態的 HTML。

具體會在JavaScript中詳解，配合JavaScript我們做一些小事情。
擴展閱讀：
https://www.w3school.com.cn/htmldom/index.asp

一個和HTML相關的漏洞

###點擊劫持

點擊劫持 (Clickjacking) 技術又稱為界面偽裝攻擊 (UI redress attack )，是一種視覺上的
欺騙手段。攻擊者使用一個或多個透明的 iframe 覆蓋在一個正常的網頁上，然后誘使
用戶在該網頁上進行操作，當用戶在不知情的情況下點擊透明的 iframe 頁面時，用戶
的操作已經被劫持到攻擊者事先設計好的惡意按鈕或鏈接上。攻擊者既可以通過點擊劫
持設計一個獨立的惡意網站，執行釣魚攻擊等；也可以與 XSS 和 CSRF 攻擊相結合，突
破傳統的防御措施，提升漏洞的危害程度。

一個簡單的例子，完全顯示某個網頁，該例子為顯示百度：

<html>
<head>
<title>點擊劫持</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"
/>
<style>
html,body,iframe{
display: block; /*顯示：block為塊狀顯示 */
height:100%; /* 這是高度*/
width:100%; /* 這是寬度，和高度設置為100%，會填滿整個瀏覽器*/
margin: 0; /* 這個和下面padding代表間距：元素間距離為0*/
padding: 0;
border: none; /* 邊框：設置為None 為不可見*/
}
</style>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>

這樣，就完全將百度的界面顯示出來了，那么點擊劫持又從何而來呢，看看下面這段代碼：

<html><head><title>點擊劫持</title><meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><style>html,body,iframe {display: block;/*顯示：block為塊狀顯示 */height: 100%;/* 這是高度*/width: 100%;/* 這是寬度，和高度設置為100%，會填滿整個瀏覽器*/margin: 0;/* 這個和下面padding代表間距：元素間距離為0*/padding: 0;border: none;/* 邊框：設置為None 為不可見*/}iframe {/* 該設置是將iframe標簽下的網站可見度設置為0，也可以任意修改其值，為
了多瀏覽器兼容性，*//*設置了多個值，針對自己的瀏覽器來修改相對應地址的數值，可調可見度*/filter: alpha(opacity=30);/* IE瀏覽器 */-moz-opacity: 0.9;/* MOZ + FF */opacity: 0.1;/*支持CSS3瀏覽器，FF1.5也支持 */position: absolute;z-index: 2;/* 該值越大，視覺效果越明顯*/}</style></head><body><iframe src="http://www.baidu.com"></iframe></body>
</html>

我們針對iframe標簽，又進一步的進行了調整，具體效果如下：

我們可以看到，頁面可見度變低了，大家可以想想點擊劫持的構造過程，你將百度的界面可見度變成了0，你再做個頁面將其覆蓋，可以做一個有趣的小游戲，誘騙大家去點擊，這個小游戲的目的是記錄他的賬號，或者其他，都可以發揮想象力來做的，比如設置個按鈕，點擊這個按鈕你可以看個美女照片，實際點擊了這個按鈕是登錄他的賬號，各種誘騙，就看你想象了。
當然點擊劫持也有防護，常用x-frame-options頭防御，將其值設置為sameorgin，即可有效的防御了。
擴展閱讀
https://www.freebuf.com/articles/web/67843.html
https://www.freebuf.com/news/66473.htm

— —

JavaScript基礎入門

為什么要涉及到前端知識，后端知識，這個在前面兩節沒做說明。現在我簡單說說，單獨說Web安全，那整個攻擊與防范必然脫離不出WEB 這個概念，在 WEB 概念中，必然涉及到前端，后端的知識，簡單細化一下，一定會接觸HTML，JS，數據庫，PHP，Java等等。后端相比于前端，存在著更多的攻擊面，不單單是一些漏洞的存在，更多的是一種代碼審計，發現更多的漏洞。再者說，整個 WEB 框架有了基本了解，對WEB滲透測試也有大有幫助。
本文的前端與后端的涉及的知識點，更多偏向于一些基礎需要用到的知識，像JS，PHP，Java這些語言的基礎語法并不會涉及過多，畢竟這套課程不是專門講語言的，再者說這些語言完整學下來沒個一段時間也是不夠的。但我還是會講些需要用到的知識，授之以漁，這些基礎語法，大家可以自己去找些平臺學習，課程呢，看看文檔，刷刷視頻，根據自己喜好，所有的知識，先過一遍，等自己對Web安全有個大致方向的了解后，自己再去細化，主要學習哪些，主要發展哪個方向。

JavaScript簡介

什么是JavaScript

在HTML那節課程中，我用一種類比的方式，將JavaScript比作了一種能力，驅動汽車行走的能力，在WEB三劍客中，它也是充當的這個角色，驅動網頁做一些動作，呈現一種動態且能與用戶交互的網頁。
在這種動態與用戶交互中，就涉及到了DOM和BOM這兩個方面，簡單來說，DOM是控制操作HTML文檔的一種能力，BOM是控制操作瀏覽器的一種能力。枯燥燥的語言很難理解，下面會有相關例子，進行練習一下，定會理解這兩個概念。
再說一個方面，JavaScript與后端交互的方式。在HTML那節中，我們學到了表單
<form> 標簽，我們就那這個舉例，我們使用 <form> 標簽編寫了一個登錄框，該登錄框主要驗證賬號密碼，那它是怎么與后端交互的呢

先看下面這段代碼

<form method="POST" action="表單一般都要傳回到服務器端，用相對應的腳本處理，該位
置指向處理該表單的腳本相對地址">
用戶名：<input type="text" name="uname">
密碼： <input type="password" name="upassword">
<input type="submit" value="提交">
</form>

在這段代碼中 action 屬性指向的地址，即為處理該登錄信息的的對應腳本，其中我們使用到的是 POST 方法.在我們輸入登錄信息點擊提交后，會將我們的登錄信息打包成 uname=admin&upassword=admin 這樣的格式，然后提交到對應的腳本來處理，這個處理的腳本語言大多是PHP或Java，在對應的腳本中，他們擁有處理登錄信息驗證的功能（這僅僅是其中的某個功能），他們會將其拼接成SQL形式，插入數據庫中查詢是
否有該用戶，成功則登錄，失敗則報錯（其他一些防護措施就不過多說明）。
上面這個JavaScript與后端交互的整個流程，一來一回的驗證，其實也是整個Web的流程，這是一個很簡單的例子，正因為JavaScript有了這些操作驅動網頁的能力，才有了現在活靈活現的各式各樣的網頁，絢麗多彩。

JavaScript將登錄信息收集發送到指定腳本：

接下來，我們還會接觸到一些與JavaScript相關聯的知識點。上面也說到不會講過多的JavaScript的基礎語法，但對于一些有C，Python等等語言基礎的朋友來說，JavaScript看起來也不會太枯燥，語法大致都相同，沒太大出入。

• JavaScript可以運行的地方
  這個點主要講解下，JS可以在哪些地方運行。
  • 瀏覽器開發者工具中的控制臺(console)
    
    HTML的 <script> 標簽中
    

JavaScript DOM簡介與實操

什么是DOM，DOM即Document Object Model，文檔對象模型，在HTML那節也有講到這個概念，我們這節配合JavaScript的例子，來進一步深入理解這個DOM到底是什么。
在上面，我們簡單提到了JavaScript DOM是控制操作HTML文檔的一種能力。在瀏覽器加載HTML的時候，會將其標簽對轉換成類似樹狀形狀的DOM樹，這樣每個標簽都有了自己的節點，這個節點其實就被封裝成了對象，有了這些節點之后，JavaSCript就通過自己神奇的能力操作這些節點，做他自己想做的事情，比如……
片面的文字總是很難理解，不妨來通過幾個實例，操作一下，加深理解。

實例一：

這個小實例是一個比較經典的DOM操作例子，我們將選擇標簽，并且根據相關代碼更改這個標簽的內容。趕緊來試試吧。

• 1、利用id標識標簽
  在這我們要知道，HTML的id屬性允許為HTML標簽指定唯一的名字或者是標識符。比如，h1元素具有唯一一個id屬性：
  <h1 id="main-heading">墨羽小本本</h1>
  在上面這個例子中，h1擁有唯一id屬性為main-heading，這就是它的標識符，在是有相關代碼選擇這個標簽時，不會混淆，我們也常說id，其實說白了就是h1標簽做了一個編號。

• 2、使用getElementById選中一個標簽
  在上面我們說到了，每個標簽都可以有自己唯一的id屬性，也就是編號，有了這個編號，我們就可以選中它，操作它，就比如 getElementById 就是選擇一個標簽，具體如下：
  document.getElementById("main-heading")
  這句話就很好理解了，選中id是 main-heading 的標簽，因為id的值是唯一的，那選擇的必然是h1標簽。選中了之后，我們可以通過使用JavaScript對它進一步操作。
  比如，使用 innerHTML 屬性獲取并替換選中的文本：
  首先，如果單用 innerHTML ，則為獲取改標簽的內容，比如：
  document.getElementById("main-heading").innerHTML
  當然，它還可以替換選中標簽的內容，比如：
  document.getElementById("main-heading").innerHTML("輸入任意你想輸入的內容")

• 3、使用DOM替換文本完整代碼

<html><head><meta charset="utf-8" /><title>DOM替換文本完整代碼</title></head><body><h1 id="main-heading">墨羽</h1><script>var headElement = document.getElementById("main-heading");var newHeadText = prompt("神奇魔法變變變，隨便輸入點什么吧：");headElement.innerHTML = newHeadText;</script></body>
</html>

4、上述代碼解讀
首先，我們定義了一個h1標簽，id為 main-heading ，其內容為 玄魂工作室 ，我們該實例的目的是為了將 墨羽 更換為其他文本。
接下來，我們加入JavaScript代碼來進一步操作。
在 <script> 標簽中的代碼，即為我們這次實例的代碼，我來進一步的解讀一下。
我們要先獲取選中h1標簽，通過getElementById 來選中h1的唯一id屬性值 main-heading ，并將獲取的值賦給了變量 headElement ，接觸過其他語言的朋友們，可能會有所了解。我針對沒有學過語言的朋友解讀一下變量的概念，所謂變量的值，就是我們賦予它的意義，賦予它的值，就像在解一道簡單的數學題 x+y=10 ， x=5 ，這個 x 就是個變量，它的值是5，是我們賦予它的這個值，這個意義。在這段代碼中，我們即把變量的賦值為選取h1的標簽。即：
var headElement = document.getElementById("main-heading");

然后我們調用了 prompt() ，這是要在BOM中接觸到的一個彈框，這就是所謂的操縱瀏覽器，彈出一個對話框，與你交互。這個 prompt() 是一個提示彈框，并且可以在彈框中寫入文本，在進行確認和取消。下面這段代碼，就是將你想改變h1的文本輸入其
中后，將其值賦到 newHeadText 變量中。即：
var newHeadText = prompt("神奇魔法變變變，隨便輸入點什么吧：");
現在，萬事俱備，就差將我們輸入的文本替換掉h1標簽的文本了，這就是下面這句話：
headElement.innerHTML = newHeadText;
圖片一：輸入替換內容

圖片二：成功修改

大功告成，我們成功的將h1的標簽的內容，替換成了自己輸入的內容。
關于這個DOM我們需要深刻理解，在XSS中有一種攻擊手法就叫DOM型XSS，即修改相關的節點，展示不一樣的內容。
這個到學XSS時，再進一步說明。
拓展練習：
更多實例，可查看W3School，作為拓展學習：
https://www.w3school.com.cn/js/js_htmldom.asp

JavaScript BOM簡介與實操

什么是BOM，BOM即Browser Object Model，瀏覽器對象模型。簡單來說，它就是操作控制瀏覽器的一種能力，工具。
比如呢，他可以獲取瀏覽器信息，通過代碼前進，后退頁面，等等。

我們在HTML那節課中接觸了彈框- alert() ，其實這就是屬于BOM的范疇，彈框有三種形式，下面我分別說一下：

• 1、alert() - 警告彈框，下圖就是一個警告彈框：
  
• 2、confirm() - 確認彈框，下圖就是一個確認彈框：
  
• 3、prompt() - 提示彈框，下圖就是一個提示彈框：
  
  仔細觀察這三個彈框，可以發現很明顯的區別。
  上面提到的彈框，是最基本的BOM使用形式，那既然能操縱瀏覽器，那肯定還有其他能
  力咯，大家不妨試試下面這些代碼，在控制臺中鍵入即可

1、(window.)screen - 獲取瀏覽器屏幕信息
2、(window.)location.(href="http://www.baidu.com" or 是改網站的路徑值) - 獲
取/控制用于頁面URL
3、(window.)navigator - 獲取訪問者瀏覽器信息
4、(window.)open/close() - 操作瀏覽器窗口，打開/關閉

拓展練習：
JavaScript 基礎知識 - BOM篇
https://segmentfault.com/a/1190000012575816#articleHeader14

JavaScript事件

事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。
那什么是JavaScript事件呢，在HTML那節課中，我們一定還記得這句話<img src=1 onerror=alert(/xss/)> ，這句話意思是使用 img 標簽加載圖片，src 為圖片地址，但我們設置的參數為1，明顯是個錯誤的，然后我們使用了onerror 事件，來處理這個錯誤，彈了個框，這個驅動的函數就是 alert() 。
一些事件：

onabort 圖像加載被中斷
onblur 元素失去焦點
onchange 用戶改變域的內容
onclick 鼠標點擊某個對象
ondblclick 鼠標雙擊某個對象
onerror 當加載文檔或圖像時發生某個錯誤
onfocus 元素獲得焦點
onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵盤的鍵被松開
onload 某個頁面或圖像被完成加載
onmousedown 某個鼠標按鍵被按下
onmousemove 鼠標被移動
onmouseout 鼠標從某元素移開
onmouseover 鼠標被移到某元素之上
onmouseup 某個鼠標按鍵被松開
onreset 重置按鈕被點擊
onresize 窗口或框架被調整尺寸
onselect 文本被選定
onsubmit 提交按鈕被點擊
onunload 用戶退出頁面

拓展練習：
更多事件：
https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

JSON是什么

通俗來講，JSON就是一種文本交換的使用形式，統一格式，在數據傳輸時方便輕巧，不必再為格式不同而苦惱。

1. JSON：JavaScript 對象表示法（JavaScript Object Notation）。
2. JSON 是存儲和交換文本信息的語法。類似 XML。
   JSON語法：

• 數據在名稱/值對中
• 數據由逗號分隔
• 花括號保存對象
• 方括號保存數組

舉個例子：

1. 首先JSON數據的書寫格式為 名稱/值對 ，并且他們都在雙引號中，它們中間用冒號
   （:）分隔，如下：
   "myName" : "墨羽"
   其實這句話的意思就相當于 myName="墨羽"
2. JSON對象是要在花括號中的，其中對象可以包含多個 名稱/值對 ，并且它們中間使
   用逗號（,）分隔，比如：
   {"myName":"墨羽", "myAge":"18"}
   更多內容：(這頁內容，必須要進一步學習)
   https://www.w3school.com.cn/json/json_syntax.asp

JSONP是什么

Jsonp（JSON with Padding）其實就是json的一種"使用模式"，可用于主流瀏覽器跨域數據訪問的問題。Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

一個基礎例子，加深對JSONP的理解：
https://www.runoob.com/json/json-jsonp.html

為什么我們從不同的域（網站）訪問數據需要一個特殊的技術( JSONP )呢？這是因為同源策略。
同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。

JSONP 應用

1. 服務端 JSONP 格式數據
   如客戶想訪問 :
   https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
   假設客戶期望返回數據：["customername1","customername2"]
   真正返回到客戶端的數據顯示為: callbackFunction(["customername1","customername2"])

服務端文件 jsonp.php 代碼為：
jsonp.php 文件代碼

<?php
header('Content-type: application/json');
//獲取回調函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數據
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數據
echo $jsoncallback . "(" . $json_data . ")";
?>

2. 客戶端實現 callbackFunction 函數

<script type="text/javascript">
function callbackFunction(result, methodName)
{var html = '<ul>';for(var i = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>';}html += '</ul>';document.getElementById('divCustomers').innerHTML = html;
}
</script>

頁面展示

<div id="divCustomers"></div>
客戶端頁面完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{var html = '<ul>';for(var i = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>';}html += '</ul>';document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

jQuery 使用 JSONP
以上代碼可以使用 jQuery 代碼實例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JSONP 實例</title><script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {var html = '<ul>';for(var i = 0; i < data.length; i++){html += '<li>' + data[i] + '</li>';}html += '</ul>';$('#divCustomers').html(html); 
});
</script>
</body>
</html>

SQL基礎入門

我們已將前端學習完了，現在進入了后端階段，其中包括數據庫和后端處理語言，其中會接觸到SQL，PHP。下面我們就要接觸數據庫，接觸SQL，接觸MySQL。
搞懂什么是數據庫，什么是SQL，以MySQL為例講講SQL實際使用。這些基礎一定要搞懂，我們常聽說到SQL注入，這就是基于數據庫，基于SQL發生的漏洞。

什么是數據庫

數據庫，簡單來說就是電子方式的文件柜，存儲數據，用戶可以根據自己需求來進行增
刪改查的操作。
數據庫管理系統（Database Management System，DBMS），簡而言之，就是為管理數
據庫而設計的軟件系統。比如我們常聽說的：MySQL，Oracle，Microsoft SQL Server，
PostgreSQL等等。

在WEB中，一定會用到數據庫，它在什么位置呢？
我們先回頭看看第一節課中的這張圖

上面這張圖可以顯然易見的看到數據庫在整個Web請求中，處在什么位置。我們知道，在所瀏覽的網頁，都是有各種數據集合而成，這些數據，都是存放在數據庫中，在請求某個信息時，也是由數據庫來提供。
大致流程就是我們從前端請求數據，來到了Web服務器處，由相關的腳本語言代碼來處理請求信息，比如上圖，我們想要查詢 7089bAt ，這時候就是將這個數據代入到數據庫查詢，并將查詢到的相應信息經過相關的腳本語言代碼返回呈現到前端，我們的瀏覽器中。
上面這個例子，我們用到了數據庫查詢操作，當然還有增加，刪除，修改操作，既然有這些操作，那必然會有一套規范語法，去使用這些語法來操作數據庫。
這節課，我們就是要學習SQL基本語法，操作數據庫增刪改查的語法。

什么是SQL

SQL（Structured Query Language:結構化查詢語言），也有的相關資料說到SQL，就是單獨的一個單詞，SQL（澀兒Q，我這幽默而有趣的中文標注，嘿嘿）。不管是哪種，我們只需要理解一個概念，SQL就是用來訪問和操作數據庫的一套規范化的計算機語言。
我們常見的很多數據庫管理系統，訪問和操作的方式，都是基于SQL規范語法來拓展的，基礎都大致相同，但又有一些細微的差別。
這節課，我們就是以MySQL數據庫管理系統為例，來學習SQL一些基本常見的語句。

MySQL介紹

1、什么是MySQL
MySQL是數據庫管理系統，它是最流行的關系型數據庫管理系統之一。并且是開源，小巧，好用的數據庫管理系統，很方便我們學習。
在使用MySQL學習SQL語法之前，我們要先安裝MySQL。
這節課MySQL安裝，我們將使用的PHPstudy，它集成了WEB服務器所需要的軟件，作為基礎學習很是好用，一鍵安裝，全套使用。作為基礎學習，我們應當把注意點放在知識點上，避免了調試報錯一些列苦惱的事情，來影響自己。
2、PHPstudy的安裝
在之前出現過PHPstudy后門的事件，官方也說明了，現在在官方網站下載的，是不會出現問題的，人外有人，天外有天，在有安全防護意識下，不必想這么多，畢竟我們有可能都是小白鼠。
官方下載網址
https://www.xp.cn/download.html
現在我們去官網下載PHPstudy，我們選擇的版本是最新版 phpStudy v8.0版本（Windows） ，相比于老版本，正題作了全新改變，使用依然是如此方便。

下載完成后的文件，是一個壓縮包，使用的是 7-zip 壓縮軟件，大家需要自行下載這個軟件，來解壓這個文件。接下來只需要將里面的EXE文件解壓出來，安裝即可，步驟就是立即安裝，沒有什么其他的選擇。

安裝完成后，打開PHPstudy：

上圖是主頁面，我們這節課主要關注MySQL，以及數據庫這兩個地方，在此之前，我們需要先做一個小小的配置，將MySQL添加到環境變量中，便于命令行中啟動MySQL。
首先，找到PHPstudy的安裝路徑，打開 Extensions 文件，在這個文件下有MySQL文件夾，以為的為例，將下面路徑復制：
D:\phpstudy_pro\Extensions\MySQL5.7.26\bin

下面，就是將這個路徑，粘貼到系統的環境變量 path 中：

現在已經將MySQL的環境變量添加進去了，現在試試是否成功添加，首先要確保在PHPstudy中啟動了MySQL，然后打開CMD命令行，輸入 mysql -u root -p ，回車，然后輸入密碼 root，回車，出現下圖這種狀態，即是添加成功：

備注：PHPstudy下的MySQL初始化密碼是 root ，大家可以自行在主界面中的數據庫選項欄下，修改密碼。

3. MySQL的另一種訪問方式-Navicat工具
   我們上面安裝調試使用CMD命令行連接訪問MySQL數據庫，當然還有基于圖形化的MySQL數據庫管理系統工具 — Navicat 。
   大家常聽說的 phpmyadmin 是基于WEB頁面的本地MySQL數據庫管理系統工具。

現在我們要安裝使用 Navicat ，這款工具是收費的，但是很好用。它除了可以管理Mysql，還可以管理其他數據庫系統，我將破解版放在了網盤，大家可以自行獲取，其他安全問題，大家自測。連接估計會失效，需要用到時，可以隨時找我。

Navicat破解版百度云連接：
鏈接：https://pan.baidu.com/s/1BDnAUFr6a65uQ2y5GBCXPA
提取碼：bsi6
安裝步驟，沒有特別需要注意的地方，下一步下一步即可。
在安裝完成之后，文件夾中有個注冊碼，大家復制粘貼，來到Navicat這個位置，進行注冊，即可成功：

NAVN-U6QE-6PXX7-44K5

下面，我們使用Navicat來連接咱們的MySQL，首先要確保在PHPstudy中啟動了MySQL，然后點擊Navicat中的 鏈接 ，選中 MySQL ：

接下來我們輸入連接信息，由于連接的是本地的MySQL，所以下面的 主機名或IP地址置為localhost即可，MySQL的默認端口是3306，下面輸入賬號密碼，點擊確定即可，或者在確定之前，點擊連接測試：

在輸入完信息后，在左側欄會有你添加的選項，雙擊他，即可打開數據庫，如上圖所示。
我常用Navicat來訪問數據庫，本地的或遠程的。學習練習方面，我會用到命令行。大家可以在PHPstudy中找到環境選項，并在里面找到PhpMyAdmin，然后自行安裝學習：

4. 關于MySQL下的information_schema數據庫
   在MySQL 5.0 版本以上都會自帶一個默認的information_schema數據庫。MySQL 5.0版本以下是沒有的，如果想要獲取表名，只能暴力跑表名。
   

不同數據表存放著不同的信息，比如：

1. SCHEMATA表：提供了當前MySQL中所有數據庫的信息，就是 show databases; 所展示的結果。
   
2. TABLES表：提供了關于數據庫中的表的信息（包括視圖），詳細表述了某個表的信息。
   
3. COLUMNS表：提供了每個表中的列的信息，詳細表述了某個表中列的信息。
   
   我講到了三個常用的，對這三個簡言之，就是，SCHEMATA表存放著所有數據庫的名字，TABLES表存放著各個數據庫下數據表的名字，COLUMNS表存放著各個數據庫下數據表下的列的名字。
   說起來可能有點繞，大家不妨搭建完MySQL，使用命令行，或者Navicat連接后，看一看。其他更多表含義，大家可以進一步學習：
   https://wenku.baidu.com/view/6358a5fd89eb172ded63b7a8.html?_wkts_=1691742777883

前期準備工作都做好了，現在我們要進入學習SQL語法階段了，掌握如何操作數據庫，數據表，以及表中的列信息。
在進入下一階段之前，我先說幾個概念，什么是數據庫，數據表，數據。
在上面我們提到了，MySQL是管理數據庫的軟件，簡言之，它將所有數據庫集合到了一起來操作，那說了半天數據庫到底是什么呢？
我繼續做一個類比，我把MySQL比作一個小區，就叫小白帽小區吧，小白帽小區里有一棟又一棟高樓，每棟高樓又有1單元，2單元，3單元…每個單元下又有1層，2層，3,4層。
在上面的類比中，我將高樓等同于數據庫，每個單元比作數據表，單元下的每一層，可以比作數據表中的具體數據，有行，有列。這是一個類比的概念，有了這個概念更方便理解操作數據庫中的數據，就好比，你想回家，必定先回自己的小區，找到自己住的那一棟，再進自己的單元，回到自己的樓層，打開自己的家門。操作數據庫也有自己的流程。
下面我們正式進入數據庫操作的階段了。
以下例子，我全部都是用的命令行來操作的。
練習前一定不要忘了打開MySQL哦。

MySQL之數據庫操作

上面我將數據庫類比成了小區里一棟有一棟高樓，那我們就來操作這些"高樓的"，如果是一個空蕩的小區，那你必然要先建立一棟又一棟高樓，數據庫也是如此。當然，MySQL下自帶了幾個數據庫，各有各的用處。

• 注意：
  SQL語句對大小寫不敏感。
  MySQL每句話都要以 ; 分號結束，一定要注意是英文的分號。

0. 首先，我們要使用命令行連接數據庫，如下圖：

mysql -u root -p (回車)
輸入密碼 （回車）

1. 查看當前數據庫，可展示當前有多少數據庫：
   SHOW DATABASES;
   

2. 現在，我們創建一個數據庫，用于此次練習
   CREATE DATABASE vulns;
   

3. 我們新建了 vulns 數據庫，我們要在這個數據庫下操作練習，那么們要先選中/使用 這個數據庫：
   use vulns;
   

4. 刪除數據庫
   DROP DATABASE vulns;
   
   上面為了演示將 vulns 數據庫刪除掉了，現在需要你新建回來，下面操作練習會使用到。

MySQL之數據表操作

在進行了數據庫的操作后，我們現在進入數據表的操作。
數據庫中可以包含大量的數據表，每張表中都包含著我們特定的數據。

1. 創建數據表：

mysql> CREATE TABLE vuln(-> id int(10) not null primary key auto_increment,-> name char(64) not null,-> desname char(128) not null,-> poc varchar(1024)-> );

上圖是創建數據表，輸入一行敲下回車即可進入下一行編輯。
解讀一下：
首先，我們使用 CREATE TABLE vuln 創建了一個名為test的數據表，下面的語句即是這個表的簡單規則，其中，將 id 設置為了這個數據表的主鍵鍵值 - primary key ，
并且是自增長 - auto_increment ，它的數據類型為 - int ， not null 代表數據
不能為空，然后下面還設置了 name ，desname ，poc 信息，其中 char 為字符數據類
型。
有不懂的，先留個黑人問號，我們繼續下面的操作。

2. 查看當下數據表
   SHOW TABLES;
3. 向數據表中插入數據：
   INSERT INTO vuln(name,desname,poc) VALUES('OA','OA前臺注入','SQL語句');
   不區分大小寫
   
   解讀一下：
   整句話的意思為，我要向test表中name,desname,poc列插入數據為 'OA','OA前臺注入','SQL語句'
4. 查詢數據表中的數據：
   SELECT * FROM test；
   *（星號）代表所有的數據。
   我們進一步看看什么是數據表，存在了哪些信息：
   下圖是剛才操作，并且插入數據后的數據表：
   
   這是一個數據表，每個數據表都會涵蓋這些信息，或者更多其他信息。

MySQL之數據操作

如果之前輸入的數據不對怎么辦，我們可以更改這條數據，或者刪除掉這條數據。

1. 更改數據
   UPDATE vuln SET name='ecology' WHERE id=1;
   
   解讀一下：
   我們使用 UPDATA 關鍵字來修改數據，我們要更改的是test數據表下name的值，具體是id=1 的那條數據，使用了 WHERE 來進行條件判斷，id=1的數據是哪條就刪除那條。
2. 刪除數據
   DELETE FROM vuln WHERE id=1;
   或者
   DELETE FROM vuln WHERE name='OA';
   首先插入數據
   
   指定ID
   
   指定name
   
   可以看到，我們已經成功將數據刪除了。上面給出了兩句刪除語句，大家可以對比下不同的地方，實踐一下，第二個語句，如果是相同的兩個name值，會發生什么情況。

---

待續……