① 前端程序員必須知道的 Web 漏洞，快來看看
隨著互聯網的發展，早已經不是僅限於簡單的網頁或是社交，電商購物、銀行轉賬、企業管理等等。上次看到一個新聞，後台程序員離職後，利用職位之便，每天還不斷的給自己轉賬，轉了好多次才被發現，想想這多可怕。或者會竊取重要的商業信息，所以 Web 安全也是非常值得注意的。
什麼是 Web 安全？
黑客利用網路操作系統的漏洞和 Web 伺服器的 SQL 注入漏洞等，得到 Web 伺服器的控制權，輕則篡改、刪除、添加數據，重則竊取重要的商業信息、轉賬等，更嚴重的就是在網頁中植入惡意代碼，使網站受到不可預期的侵害。
常見的攻擊可分為三類：XSS、CSRF、SQL注入。
Cross Site Scripting 跨站腳本攻擊，為了與 CSS 區分，所以簡寫為 XSS 。
惡意攻擊給 Web 頁面植入惡意的 Script 代碼，當用戶瀏覽該網頁的時候，嵌入 Web 裡面的 script 代碼會被執行，從而達到攻擊的效果。
講直白點，就是惡意攻擊者通過在輸入框處添加惡意 script 代碼，用戶瀏覽網頁的時候執行 script 代碼，從而達到惡意攻擊用戶的目的。
1.1、XSS 的危害
1.2、XSS 的攻擊類型
發出請求時，XSS代碼會出現在 url 中，作為輸入提交到伺服器端，伺服器再返回給瀏覽器，然後瀏覽器解析執行 XSS 代碼，這一過程像一次反射，所以稱之為反射型。
這種類型的攻擊，通常是把 XSS 攻擊代碼放入請求地址的 數據傳輸部分，如：
提交的 XSS 代碼會存儲在伺服器端，如資料庫、內存、文件系統內，下次請求目標頁面時不再提交 XSS 代碼。
文檔型的 XSS 攻擊不會經過伺服器，作為中間人的角色，在數據傳輸過程中劫持到網路數據包，然後修改裡面的 html 文檔。
1.3、XSS 的防禦措施
措施1：編碼。
對這些數據進行 html entity 編碼。客戶端和伺服器端都需要進行轉義編碼。
轉義後為：
放入上邊的代碼中，還是會自動解析為上邊的代碼，所以放到外邊。
措施2：過濾。
移除用戶上傳的 DOM 屬性，如上邊的 onerror。
移除用戶上傳的 style、script、iframe 節點。
措施3：利用 CSP
瀏覽器中的內容安全策略，就是決策瀏覽器載入哪些資源。
Cross site request forgery 跨站點請求偽造。
攻擊者誘導受害者進入第三方網站，向被攻擊網站發送跨站請求，利用被攻擊者在被攻擊網站已經獲取的注冊憑證，繞過後台的用戶驗證達到冒充用戶對攻擊網站進行的某種操作。
CSRF 攻擊特點：
2.1、CSRF 的危害
2.2、CSRF 的攻擊類型
使用非常簡單，只需要一個 http 請求。
比如頁面中的一個圖片添加鏈接，還有 iframe、script ，最容易完成 CSFR 攻擊，且不易被用戶發現，隱蔽性超強。
由於 get 介面是最常見的一種 CSRF 攻擊類型，所以很多重要的介面不適用 get 方式，使用 post 一定程度上可以防止 CSRF 攻擊。
這種類型的 SCRF 攻擊，通常使用的是一個自動提交的表單。簡單講就是偽造一個自動提交的表單，一旦訪問頁面時，表單就會自動提交。
如：
比起前兩個，這個類型的比較少見，鏈接類型的攻擊必須要用戶點擊鏈接，才能觸發。
通常在論壇中發布的圖片嵌入惡意的鏈接，或以廣告的形式誘導用戶點擊中招。所以我們在郵箱中看到亂七八糟的廣告，盡量別點擊，防止遇到三方攻擊。
偽造一種新型的攻擊方式，用戶誤以為是在網站正常登錄，實際上是使用賬戶和密碼登錄到了黑客網站，這樣黑客可以監聽到用戶的所有操作，甚至知道用戶的賬戶信息。
2.3、CSRF 的防禦措施
措施1：檢查 http 頭部的 referer 信息
referer 包含在請求頭內，表示請求介面的頁面來源。
服務端通過檢查 referer 信息，發現來源於外域時，就可以攔截請求，通過阻止不明外域的訪問，一定程度上可以減少攻擊。
措施2：使用一次性令牌
使用一次性令牌做身份識別，黑客是無法通過跨域拿到一次性令牌的，所以服務端可以通過判斷是否攜帶一次性令牌，就可以排除一部分的非法操作者。
措施3：使用驗證圖片
服務端生成一些文本和數字，在服務端保存這份信息，同時以圖片的形式在客戶端展現，讓用戶去合法填寫信息，當 CSRF 攻擊時，拿不到這個驗證碼的時候，無法向伺服器提供這個信息，導致匹配失敗，從而識別它是非法攻擊者。
這個應用非常常見，之前登錄的時候，需要填寫圖形驗證碼。
現在滑動圖片驗證也非常常見。
SQL 注入，一般發生在注冊、評論、添加等，只有有用戶輸入的地方，就有可能發生 SQL 注入。SQL 注入是一種常見的 Web 安全漏洞，攻擊者會利用這個漏洞，可以訪問或修改數據，利用潛在的資料庫漏洞進行攻擊。
所謂SQL注入，就是通過把SQL命令插入到Web 表單 提交或輸入域名或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL命令。具體來說，它是利用現有應用程序，將(惡意的)SQL命令注入到後台資料庫引擎執行的能力，它可以通過在Web表單中輸入(惡意)SQL語句得到一個存在安全漏洞的網站上的資料庫，而不是按照設計者意圖去執行SQL語句。比如先前的很多影視網站泄露VIP會員密碼大多就是通過WEB表單遞交查詢字元暴出的，這類表單特別容易受到 SQL注入式攻擊 .
3.1、SQL 注入危害
任意的賬號都可以登錄，可以進行任意的操作，粗暴點講，就是隨便來。
3.2、 SQL注入分類
當輸入的參數為整數時，則有可能存在數字型漏洞。
當輸入參數為字元串時，則可能存在字元型注入漏洞。數字型與字元型注入最大的區別在於：數字型不需要單引號閉合，而字元型一般需要使用單引號來閉合。
字元型注入最關鍵的是如何閉合 SQL 語句以及注釋多餘的代碼。
其實我覺得 SQL 注入只有兩種類型：數字型與字元型。很多人可能會說還有如：Cookie 注入、POST 注入、延時注入等。
的確如此，但這些類型的注入歸根結底也是數字型和字元型注入的不同展現形式或者注入的位置不同罷了。
以下是一些常見的注入叫法：
3.3、SQL注入的防範措施
凡是用戶輸入的地方，我們都應該防止黑客攻擊，永遠不要相信用戶的輸入。所以對應的防禦措施分別有：
前後端分離之後，前端每天都會接觸到很多介面。發送網路請求的時候，有些介面就會使用 get 方法。最常見的傳參方式就是，直接在 url 地址後面加參數。
直接採用這種方式傳輸數據，如果數據被劫持或抓包工具偷走之後，就會直接被人盜取走，特別危險。若是採用介面加密，如下：
上邊那個看不懂的一長串符號，正是經過加密的數據。
介面加密就是將介面請求調用中傳遞的參數進行加密，目的就是為了保證介面請求中傳遞參數和返回的結果的安全性，一般比較敏感數據，如身份證、電話號碼、賬號、密碼等需要進行加密。
常見的加密方式：
加密方式較多，可以根據自己具體的需要和項目語言選擇其中一種。
加密之後的數據更安全，那我們能不能將介面所有的數據都進行加密呢？加密是非常消耗資源的，如果有大批量的數據都進行加密時，返回數據需要的時間就更長，會直接影響用戶體驗。所以我們進行加密時，只需要對敏感的重要的信息進行加密。
好了我今天的文章就到此結束了，本篇文章沒有介紹到的 web 安全，歡迎評論區交流！
② 客戶端 前端 後端 服務端 的區別分別是什麼
客戶端是指開發面向客戶的程序，分很多平台，比如Windows 安卓 蘋果，還有游戲客戶端也算一類。
前端指的是通過瀏覽器和用戶交互的那部分。
後端是在伺服器上跑的，一般是管理數據，為前端 客戶端提供數據傳輸的。
伺服器端就是後端。
服務端各種安全機制，比如身份驗證，這一條的情況在於，有的前端做身份驗證就是調用一下介面，獲取到類似token欄位，自己也不知道是什麼意思，就亂丟亂用等。
本質上來說，前端是做不了什麼安全措施的，但是，相應的攔截和安全還是要做，因為可以幫後端擋掉很多低質量攻擊以及前端自身的用戶體驗。
客戶端是默認支持json的，後端是需要處理的。這點可以引申到，前後端各自傳遞的數據格式問題。有些前端 null undefined 空串分不清楚，到了後端就各種問題。
③ 前後端介面對接規范（主要前端內容）.md
前後端分離意味著，前後端之間使⽤ JSON 來交流，兩個開發團隊之間使⽤ API 作為契約進⾏交互。從此，後台選⽤的技術棧不影響前台。當我們決定需要前後端分離時，我們仍然還需要⾯對⼀系列的問題：
RESTful API 統一約束客戶端和伺服器之間的介面。簡化和分離系統架構，使每個模塊獨立！
REST即表述性狀態傳遞（英文：Representational State Transfer，簡稱REST）是Roy Fielding博士在2000年他的博士論文中提出來的一種 軟體架構 風格。它是一種針對 網路應用 的設計和開發方式，可以降低開發的復雜性，提高系統的可伸縮性。 REST是設計風格而不是標准。 REST通常基於使用 HTTP ，URI，和 XML （ 標准通用標記語言 下的一個子集）以及 HTML （標准通用標記語言下的一個應用）
統一介面約束定義客戶端和伺服器之間的介面。它簡化了分離的結構，使各部分獨立發展。
REST要求狀態要麼被放入資源狀態中，要麼保存在客戶端上。或者換句話說，伺服器端不能保持除了單次請求之外的，任何與其通信的客戶端的通信狀態。 從客戶端的每個請求要包含伺服器所需要的所有信息。 這樣做的最直接的理由就是可伸縮性—— 如果伺服器需要保持客戶端狀態，那麼大量的客戶端交互會嚴重影響伺服器的內存可用空間（footprint）。
伺服器返回信息必須被標記是否可以緩存，如果緩存，客戶端可能會重用之前的信息發送請求。
客戶端無需關注數據存儲，伺服器端無需關注用戶界面，提高了前後端可移植性。
客戶端不關心直接連接到最終伺服器還是連接到中間伺服器。中間伺服器可以通過啟用負載平衡和提供共享緩存來提高系統可擴展性。分層系統也可以執行安全策略。
伺服器可以通過傳輸邏輯來臨時擴展或定製客戶端的功能。
GET https//domain.com/api/{模塊名}/{?菜單名}/{介面名}/:param
說明：
被用於獲取資源。不允許對伺服器上資源做任何修改操作。
示例：
常用於更新資源。通過請求體攜帶資源發送給伺服器。 注意： 在資源ID由客戶端而不是由伺服器選擇的情況下，也可以使用PUT來創建資源。修改成功返回200，創建成功返回201。 建議使用post進行創建新資源。
常用於創建新資源。創建成功通常返回201。
刪除資源。
status說明
---------------------------------------------------------------------------分割線-----------------------------------------------------------
請求方式：POST
參數:說明
返回值：
示例1
正確的
錯誤的
④ 如何處理restful對介面安全性問題
REST (REpresentation State Transfer) 描述了一個架構樣式的網路系統，比如 web 應用程序。它首次出現在 2000 年 Roy Fielding 的博士論文中，他是 HTTP 規范的主要編寫者之一。REST 指的是一組架構約束條件和原則。滿足這些約束條件和原則的應用程序或設計就是 RESTful。Web 應用程序最重要的 REST 原則是，客戶端和伺服器之間的交互在請求之間是無狀態的。從客戶端到伺服器的每個請求都必須包含理解請求所必需的信息。如果伺服器在請求之間的任何時間點重啟，客戶端不會得到通知。此外，無狀態請求可以由任何可用伺服器回答，這十分適合雲計算之類的環境。客戶端可以緩存數據以改進性能。在伺服器端，應用程序狀態和功能可以分為各種資源。資源是一個有趣的概念實體，它向客戶端公開。資源的例子有:應用程序對象、資料庫記錄、演算法等等。每個資源都使用 URI (Universal Resource Identifier) 得到一個惟一的地址。所有資源都共享統一的界面，以便在客戶端和伺服器之間傳輸狀態。使用的是標準的 HTTP 方法，比如 GET、PUT、POST 和 DELETE。Hypermedia 是應用程序狀態的引擎，資源表示通過超鏈接互聯。另一個重要的 REST 原則是分層系統，這表示組件無法了解它與之交互的中間層以外的組件。通過將系統知識限制在單個層，可以限制整個系統的復雜性，促進了底層的獨立性。當REST 架構的約束條件作為一個整體應用時，將生成一個可以擴展到大量客戶端的應用程序。它還降低了客戶端和伺服器之間的交互延遲。統一界面簡化了整個系統架構，改進了子系統之間交互的可見性。REST 簡化了客戶端和伺服器的實現。RESTful的實現:RESTful Web 服務與 RPC 樣式的 Web 服務了解了什麼是什麼是REST，我們再看看RESTful的實現。最近，使用 RPC 樣式架構構建的基於 SOAP 的 Web 服務成為實現 SOA 最常用的方法。RPC 樣式的 Web 服務客戶端將一個裝滿數據的信封(包括方法和參數信息)通過 HTTP 發送到伺服器。伺服器打開信封並使用傳入參數執行指定的方法。方法的結果打包到一個信封並作為響應發回客戶端。客戶端收到響應並打開信封。每個對象都有自己獨特的方法以及僅公開一個 URI 的 RPC 樣式 Web 服務，URI 表示單個端點。它忽略 HTTP 的大部分特性且僅支持 POST 方法。由於輕量級以及通過 HTTP 直接傳輸數據的特性，Web 服務的 RESTful 方法已經成為最常見的替代方法。可以使用各種語言(比如 Java 程序、Perl、Ruby、Python、PHP 和 Javascript[包括 Ajax])實現客戶端。RESTful Web 服務通常可以通過自動客戶端或代表用戶的應用程序訪問。但是，這種服務的簡便性讓用戶能夠與之直接交互，使用它們的 Web 瀏覽器構建一個 GET URL 並讀取返回的內容。在REST 樣式的 Web 服務中，每個資源都有一個地址。資源本身都是方法調用的目標，方法列表對所有資源都是一樣的。這些方法都是標准方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。在RPC 樣式的架構中，關注點在於方法，而在 REST 樣式的架構中，關注點在於資源 -- 將使用標准方法檢索並操作信息片段(使用表示的形式)。資源表示形式在表示形式中使用超鏈接互聯。Leonard Richardson 和 Sam Ruby 在他們的著作 RESTful Web Services 中引入了術語 REST-RPC 混合架構。REST-RPC 混合 Web 服務不使用信封包裝方法、參數和數據，而是直接通過 HTTP 傳輸數據，這與 REST 樣式的 Web 服務是類似的。但是它不使用標準的 HTTP 方法操作資源。它在 HTTP 請求的 URI 部分存儲方法信息。好幾個知名的 Web 服務，比如 Yahoo 的 Flickr API 和 del.icio.us API 都使用這種混合架構。RESTful的實現:RESTful Web 服務的 Java 框架有兩個 Java 框架可以幫助構建 RESTful Web 服務。erome Louvel 和 Dave Pawson 開發的 Restlet(見 參考資料)是輕量級的。它實現針對各種 RESTful 系統的資源、表示、連接器和媒體類型之類的概念，包括 Web 服務。在 Restlet 框架中，客戶端和伺服器都是組件。組件通過連接器互相通信。該框架最重要的類是抽象類 Uniform 及其具體的子類 Restlet，該類的子類是專用類，比如 Application、Filter、Finder、Router 和 Route。這些子類能夠一起處理驗證、過濾、安全、數據轉換以及將傳入請求路由到相應資源等操作。Resource 類生成客戶端的表示形式。JSR-311是 Sun Microsystems 的規范，可以為開發 RESTful Web 服務定義一組 Java API。Jersey是對 JSR-311 的參考實現。JSR-311 提供一組注釋，相關類和介面都可以用來將 Java 對象作為 Web 資源展示。該規范假定 HTTP 是底層網路協議。它使用注釋提供 URI 和相應資源類之間的清晰映射，以及 HTTP 方法與 Java 對象方法之間的映射。API 支持廣泛的 HTTP 實體內容類型，包括 HTML、XML、JSON、GIF、JPG 等。它還將提供所需的插件功能，以允許使用標准方法通過應用程序添加其他類型。RESTful的實現:構建 RESTful Web 服務的多層架構RESTful Web 服務和動態 Web 應用程序在許多方面都是類似的。有時它們提供相同或非常類似的數據和函數，盡管客戶端的種類不同。例如，在線電子商務分類網站為用戶提供一個瀏覽器界面，用於搜索、查看和訂購產品。如果還提供 Web 服務供公司、零售商甚至個人能夠自動訂購產品，它將非常有用。與大部分動態 Web 應用程序一樣，Web 服務可以從多層架構的關注點分離中受益。業務邏輯和數據可以由自動客戶端和 GUI 客戶端共享。惟一的不同點在於客戶端的本質和中間層的表示層。此外，從數據訪問中分離業務邏輯可實現資料庫獨立性，並為各種類型的數據存儲提供插件能力。圖1 展示了自動化客戶端，包括 Java 和各種語言編寫的腳本，這些語言包括 Python、Perl、Ruby、PHP 或命令行工具，比如 curl。在瀏覽器中運行且作為 RESTful Web 服務消費者運行的 Ajax、Flash、JavaFX、GWT、博客和 wiki 都屬於此列，因為它們都代表用戶以自動化樣式運行。自動化 Web 服務客戶端在 Web 層向 Resource Request Handler 發送 HTTP 響應。客戶端的無狀態請求在頭部包含方法信息，即 POST、GET、PUT 和 DELETE，這又將映射到 Resource Request Handler 中資源的相應操作。每個請求都包含所有必需的信息，包括 Resource Request Handler 用來處理請求的憑據。從Web 服務客戶端收到請求之後，Resource Request Handler 從業務邏輯層請求服務。Resource Request Handler 確定所有概念性的實體，系統將這些實體作為資源公開，並為每個資源分配一個惟一的 URI。但是，概念性的實體在該層是不存在的。它們存在於業務邏輯層。可以使用 Jersey 或其他框架(比如 Restlet)實現 Resource Request Handler，它應該是輕量級的，將大量職責工作委託給業務層。Ajax 和 RESTful Web 服務本質上是互為補充的。它們都可以利用大量 Web 技術和標准，比如 HTML、JavaScript、瀏覽器對象、XML/JSON 和 HTTP。當然也不需要購買、安裝或配置任何主要組件來支持 Ajax 前端和 RESTful Web 服務之間的交互。RESTful Web 服務為 Ajax 提供了非常簡單的 API 來處理伺服器上資源之間的交互。圖1 中的 Web 瀏覽器客戶端作為 GUI 的前端，使用表示層中的 Browser Request Handler 生成的 HTML 提供顯示功能。Browser Requester Handler 可以使用 MVC 模型(JSF、Struts 或 Spring 都是 Java 的例子)。它從瀏覽器接受請求，從業務邏輯層請求服務，生成表示並對瀏覽器做出響應。表示供用戶在瀏覽器中顯示使用。表示不僅包含內容，還包含顯示的屬性，比如 HTML 和 CSS。 業務規則可以集中到業務邏輯層，該層充當表示層和數據訪問層之間的數據交換的中間層。數據以域對象或值對象的形式提供給表示層。從業務邏輯層中解耦 Browser Request Handler 和 Resource Request Handler 有助於促進代碼重用，並能實現靈活和可擴展的架構。此外，由於將來可以使用新的 REST 和 MVC 框架，實現它們變得更加容易，無需重寫業務邏輯層。數據訪問層提供與數據存儲層的交互，可以使用 DAO 設計模式或者對象-關系映射解決方案(如 Hibernate、OJB 或 iBATIS)實現。作為替代方案，業務層和數據訪問層中的組件可以實現為 EJB 組件，並取得 EJB 容器的支持，該容器可以為組件生命周期提供便利，管理持久性、事務和資源配置。但是，這需要一個遵從 Java EE 的應用伺服器(比如 JBoss)，並且可能無法處理 Tomcat。該層的作用在於針對不同的數據存儲技術，從業務邏輯中分離數據訪問代碼。數據訪問層還可以作為連接其他系統的集成點，可以成為其他 Web 服務的客戶端。數據存儲層包括資料庫系統、LDAP 伺服器、文件系統和企業信息系統(包括遺留系統、事務處理系統和企業資源規劃系統)。使用該架構，您可以開始看到 RESTful Web 服務的力量，它可以靈活地成為任何企業數據存儲的統一 API，從而向以用戶為中心的 Web 應用程序公開垂直數據，並自動化批量報告腳本。什麼是REST:結束語REST 描述了一個架構樣式的互聯系統(如 Web 應用程序)。REST 約束條件作為一個整體應用時，將生成一個簡單、可擴展、有效、安全、可靠的架構。由於它簡便、輕量級以及通過 HTTP 直接傳輸數據的特性，RESTful Web 服務成為基於 SOAP 服務的一個最有前途的替代方案。用於 web 服務和動態 Web 應用程序的多層架構可以實現可重用性、簡單性、可擴展性和組件可響應性的清晰分離。Ajax 和 RESTful Web 服務本質上是互為補充的。
⑤ 介面測試測試點
1.可以發現很多在頁面上操作發現不了的bug（介面的）
2.可以檢查系統（介面）的異常處理能力
3.可以檢查系統（介面）的安全性、穩定性
4.前端隨便變，介面測好了，後端不用變
5.可以測試並發情況，一個賬號，同時（大於2個請求）對最後一個商品下單，或不同賬號，對最後一個商品下單
6.可以修改請求參數，突破前端頁面輸入限制（如金額），檢查系統（介面）有沒有進行校驗
⑥ 記錄一下前端使用CryptoJS的幾種加密方式
自己太小白了，之前在PC端項目中使用的MD5加密，現在的小程序項目使用了 CryptoJS 裡面的 enc-base64 和 hmac-sha1 ，之前沒有用到過這兩種，所以比較疑惑，為何在小程序不繼續使用 MD5 呢？所以在這里記錄一下自己解疑惑的一些知識點。
隨著互聯網的興起，我們對信息的安全越來越受重視，這樣就導致在web開發中，對用戶密碼等各種加密變得更加重要了。與伺服器的交互中，為了確保數據傳輸的安全性，避免被黑客抓包篡改。
對於Base64編碼的，我覺得看一篇文章能夠解決你的疑惑，我在這里就不贅述了
🧐 Base64編碼原理
如： 用戶密碼，請求參數，文件加密
如： 介面參數簽名驗證服務
支付數據、CA數字證書
前端的朋友可能會關注前端js加密，我們在做 WEB 的登錄功能時一般是通過 Form 提交或 Ajax 方式提交到伺服器進行驗證的。為了防止抓包，登錄密碼肯定要先進行一次加密（RSA），再提交到伺服器進行驗證。一些大公司都在使用，比如淘寶、京東、新浪 等。
前端加密也有很多現成的js庫，如：
JS-RSA： 用於執行OpenSSL RSA加密、解密和密鑰生成的Javascript庫， https://github.com/travist/jsencrypt
MD5： 單向散列加密md5 js庫， https://github.com/blueimp/JavaScript-MD5
crypto-js： 對稱加密AES js庫， https://github.com/brix/crypto-js
-CryptoJS (crypto.js) 為 JavaScript 提供了各種各樣的加密演算法。
HMAC 系列是消息驗證，用於驗證一個消息是否被篡改——如網站上傳遞 email 和 hmac(email)，則接收時可以通過 hmac(email) 獲知 email 是否是用戶偽造的