隨著 Web 的發展，現代 Web 應用程序也在迅速變化。現在，前端代碼與后端代碼承擔幾乎相同的責任，甚至更多。為了安全地完成所有事情，需要一個更好的客戶端代碼安全模型。本文將復習常見安全問題、攻擊類型和針對它們的預防措施。

什么是CSRF攻擊？

CSRF 攻擊旨在誘騙用戶提交表單，最終執行與用戶希望執行的操作不同的操作。

CSRF代表跨站請求偽造（Cross-site request forgery），如果黑客在網站上放置了指向另一個網站的外部鏈接，例如 www.xxx.com/api，默認情況下，如果用戶已登錄該網站，瀏覽器將使用 xxx.com 的 cookie 訪問該網站。而如果網站沒有防御CSRF攻擊，服務器就會認為是用戶自己調用了這個接口并進行了相關操作，從而導致賬號被劫持。

如何防御CSRF攻擊

• 驗證 Token：瀏覽器請求服務器時，服務器返回一個 Token，每次請求都需要帶上 Token和 cookie 才算合法請求
• 驗證 Referer：通過驗證請求頭的 Referer 來驗證源站，但是請求頭容易偽造
• 驗證同源網站： 為cookie設置SameSite，這樣cookie就不會隨著跨域請求一起發送，但是瀏覽器兼容性不同

什么是XSS攻擊

XSS 攻擊是最大和最危險的攻擊形式之一。它們的制作方式是將代碼注入 Web 應用程序，最終在最終用戶訪問時執行惡意操作。

XSS 全稱（Cross Site Scripting），是指利用網頁開發過程中留下的漏洞，向網頁中注入惡意指令代碼，使用戶加載并執行攻擊者惡意創建的網頁程序。比如在評論區植入JS代碼。該代碼在用戶進入評論頁面時執行，導致頁面被植入廣告，賬號信息被盜。

XSS攻擊的類型有哪些

存儲型：即攻擊存儲在服務器上，在評論區插入攻擊腳本很常見。如果腳本存儲在服務器上，所有看到相應評論的用戶都會受到攻擊。
反射型：攻擊者在URL中混入腳本，服務器接收到URL并將惡意代碼作為參數取出，拼接回HTML。瀏覽器在解析 HTML 后執行惡意代碼。
DOM類型：在URL中寫入攻擊腳本，誘導用戶點擊URL。如果 URL 被解析，攻擊腳本將被執行。與前兩者的主要區別是 DOM 類型的攻擊不通過服務器。

如何防御XSS攻擊

• 輸入檢查：轉義或過濾 <script><iframe> 輸入內容中的標簽
• 設置httpOnly：很多XSS攻擊目標都是竊取用戶cookie偽造認證，設置該屬性可以防止JS獲取cookie
• 開啟 CSP （Content Security Policy）：即開啟白名單，可以防止加載運行白名單外的資源。使用內容安全策略是一種有效的 XSS 攻擊預防形式。它需要一個 HTTP 標志來通知瀏覽器有關可以信任的來源，并作為 iFrame 包含在 Web 應用程序中。在 HTTP 標頭中啟用 CSP 是一種在很大程度上防止 XSS 攻擊的有效方法。當與 X-Frame-Options 結合使用時，它通常可以提供針對 XSS 攻擊的可靠防御。

總結

Web 應用程序的安全是前端開發需要考慮的問題，隨著應用程序每天面臨多種威脅，處理從自動機器人到有針對性的攻擊的一切，保持應用程序前端的安全從未如此重要。