前端安全XSS和CSRF

XSS是跨站腳本攻擊，攻擊者通過“注入”，在網頁中插入惡意代碼，進而被浏覽器執行所造成的一種攻擊方式。

1、竊取使用者的cookie資訊。惡意代碼可以通過執行 ”doccument.cookie“擷取使用者的cookie資訊，然後發送給惡意伺服器

2、監聽使用者的輸入行為。使用 "addEventListener"接口來監聽鍵盤事件，比如可以擷取使用者輸入的銀行卡及密碼等個人資訊。

3、在頁面生成浮窗廣告或執行alert彈窗，造成不好的使用者體驗。

XSS三種攻擊方式

1、反射型

反射型攻擊是指使用者送出惡意代碼給伺服器，伺服器又将惡意代碼反射給浏覽器端，例如在url請求中加上script代碼，那麼浏覽器在通路相應url時就會執行惡意代碼

2、存儲型

攻擊者利用站點漏洞将惡意代碼送出到網站的資料庫中，當使用者進行通路時，就會執行相應的惡意代碼，腳本代碼會将使用者資訊上傳到黑客伺服器。

在實際應用中，如果在登入頁面，使用者名輸入框中輸入<script>alert('存儲型 XSS 攻擊')</script>代碼，服務端在存儲相應資訊之後，傳回成功的登入名，就會執行這段代碼，在頁面形成彈窗。

存儲型攻擊與反射型攻擊的差別在于，伺服器端是否存儲了相應的惡意代碼。

3.DOM型

這是發生在前端的攻擊，通過惡意腳本修改頁面的DOM節點，從js中輸出資料到HTML頁面中與普通XSS不同的是，DOM XSS是在浏覽器的解析中改變頁面DOM樹，且惡意代碼并不在傳回頁面源碼中回顯，這使我們無法通過特征比對來檢測DOM XSS

基于DOM攻擊大緻需要經曆以下幾個步驟

1、攻擊者構造出特殊的URL，其中包含惡意代碼

2、使用者打開帶有惡意代碼的URL

3、使用者浏覽器接受到響應後執行解析，前端JavaScript取出URL中的惡意代碼并執行

4、惡意代碼竊取使用者資料并發送到攻擊者的網站，冒充使用者行為，調用目标網站接口執行攻擊者指定的操作

XSS防禦辦法

1、轉碼以及輸入檢查

2、CSP（内容安全政策）

設定 HTTP Header 的 Content-Security-Policy

Content-Security-Policy: default-src 'self'; // 隻允許加載本站資源
Content-Security-Policy: img-src https://*  // 隻允許加載 HTTPS 協定圖檔
Content-Security-Policy: child-src 'none'    // 允許加載任何來源架構           

設定 meta 标簽的方式

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none'">           

CSRF跨站請求僞造：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經擷取的注冊憑證，繞過背景的使用者驗證，達到冒充使用者對被攻擊的網站執行某項操作的目的

一個典型的CSRF攻擊有着如下的流程：

受害者登入a.com，并保留了登入憑證（Cookie）。攻擊者引誘受害者通路了b.com。b.com 向 a.com 發送了一個請求：a.com/act=xx。a.com接收到請求後，對請求進行驗證，并确認是受害者的憑證，誤以為是受害者自己發送的請求。a.com以受害者的名義執行了act=xx。攻擊完成，攻擊者在受害者不知情的情況下，冒充受害者，讓a.com執行了自己定義的操作。

CSRF三種常見的攻擊方式

• GET類型的CSRF

通常請求被放置在img标簽的src中，當使用者通路了包含這個标簽的網頁時，浏覽器會自動向src中的位址送出一次http請求

• 自動發起POST類型請求

通過建構一個隐藏的表單，表單的内容就是自動發起支付的接口請求。當使用者打開該頁面時，這個表單會被自動執行送出。當表單被送出之後，伺服器就會執行轉賬操作。是以使用建構自動送出表單這種方式，就可以自動實作跨站點 POST 資料送出。

• 連結類型

通過誇張的廣告誘導使用者點選連結，跳轉到危險的網站，該網站自動自動發送請求，冒充使用者執行相應的操作。

是以，CSRF有以下兩個特點：一是通常發生在第三方域名，二是攻擊者不能通路cookie資訊，隻是使用。針對這兩個方面，對CSRF攻擊進行相應的防護。

CSRF防禦辦法

• 确定來源域名。

由于CSRF攻擊大多來自第三方站點，可以在伺服器端驗證請求來源的站點，禁止第三方站點的請求。 可以通過HTTP請求頭中的 Referer和Origin屬性确定來源域名。

• 設定CSRF Token

在使用者首次送出請求時，伺服器為該使用者生成一個token（一般是随機字元串和時間戳生成的随機數組合），之後所有的請求都攜帶這個token，在有效期内伺服器進行驗證。由于攻擊者無法擷取這個随機的token，可以防護csrf攻擊。

• Set-Cookie響應頭新增SameSite屬性

SameSite有3個可選值： Strict, Lax和None

Samesite=Strict，嚴格模式，浏覽器完全禁止第三方cookie，隻有本站點通路本站點的資源，才會攜帶cookie

Samesite=Lax，寬松模式，在跨站點的情況下，從第三方站點連結打開和從第三方站點送出 Get方式的表單這兩種方式都會攜帶Cookie。但如果在第三方站點中使用POST方法或者通過 img、Iframe等标簽加載的URL，這些場景都不會攜帶Cookie。

Samesite=none，任何情況下都可以發送cookie資料