聊聊前端安全那些事兒

前言：最近在學習前端安全，不知道從哪下手，於是在慕課網上看了找到了web安全視訊，整理了如下筆記！

前端攻擊有哪些？我們該如何防範？

一、XSS攻擊

XSS攻擊，全稱Cross Site Scripting，跨站指令碼攻擊。跨站：所有執行的邏輯都必須是在本站，當非本站的指令碼執行在本站為跨站。

兩種方式：

url引數直接注入 ---反射型攻擊
儲存到DB後讀取時注入 ---注入型攻擊

注入點：

HTML節點內容
HTML屬性（img onerror屬性）
JavaScrit程式碼
富文字

目前瀏覽器自帶防禦，但是有限，瀏覽器預設X-XSS-Protection為1，可以攔截反射型，也就是url引數直接注入html節點內容和html屬性，但JavaScript程式碼和富文字不會。

防範措施

轉義html

// 轉義html
var escaprHtml = function(str){
    if(!str) return '';
    str = str.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, '&#39;');
    // str = str.replace(/ /g, '&#32;');
    return str;
}
複製程式碼

JSON.stringfiy

// 轉義js但是不保險
var escaprJS = function(str){
    if(!str) return '';
    str = str.replace(/\\/g, '\\\\');
    str = str.replace(/"/g, '\\"');
    return str;
}
// JSON.stringfiy保險
JSON.stringfiy()

複製程式碼

富文字

黑名單過濾，就是過濾到不許的標籤或者屬性，不安全，原因是HTML標籤有很多，一不留神就容易有遺落

白名單過濾，富文字只允許哪些標籤和這些標籤帶有哪些屬性

XSS 外掛
CSP（最有效的辦法）

CSP，全稱Content Security Policy，內容安全策略，用於指定哪些內容可執行，它是一個http頭。


 `Content-Security-Policy`,`default-src 'self'`
 
複製程式碼

幸運的是目前前端主流的框架已解決XSS攻擊，如：Vue、React、Angular

二、CSRF攻擊

CSRF攻擊，全稱Cross Site Request Forgy，跨站請求偽造。它的意思是在其它的網站對目標網站傳送請求，而這些請求是在使用者不知情的情況下完成的。它是發生在匿名的情況下，第三方網站，帶上Cookies，向你的網站傳送請求，不訪問你的前端。

攻擊原理

使用者登入A網站
A網站確認身份
B網站向A網站傳送請求（帶A網站的身份）

防範措施

禁止第三方網站帶Cookies

same-site屬性（相容性不好，目前好像只有谷歌瀏覽器）


sameSite:"stirct"

複製程式碼

在前端頁面加入驗證資訊

驗證碼（使用者體驗差）

token

禁止第三方網站請求

驗證referer

三、cookies

cookies特性

前端資料儲存

後端通過http頭設定

請求時通過http頭傳給後端

前端可讀寫

遵守同源策略（協議、域名、埠全部一致）

Cookies和XSS攻擊關係

XSS可能會偷走Cookies

http-only的Cookies可能不會被偷

Cookies和CSRF攻擊關係

CSRF攻擊利用了使用者的Cookies

攻擊站點無法讀寫Cookies

最好能阻止第三方網站使用Cookies

Cookies安全策略

簽名防篡改

私有變換（加密、祕鑰、多次轉換hash演算法md5/sha256等）

http-only（防止XSS攻擊）

secure（JavaScript不可讀寫）

same-site （相容不好可忽略）

四、點選劫持

點選劫持，是通過使用者點選完成的操作，而使用者完全不知情的情況下，它的原理是通過iframe標籤巢狀，然後把opaccity透明度設定為0。

點選劫持防禦措施（兩者結合）

JavaScript禁止內嵌

<script>
    if (top.location != window.location){
        top.location = window.location 
    }
</script>
複製程式碼

請求頭X-FRAME-OPTIONS禁止內嵌


header('X-Frame-Options:DENY')

複製程式碼

五、上傳問題

上傳檔案
再次訪問上傳的檔案
上傳的檔案被當成程式解析（node已解決）

上傳問題防禦

限制上傳的字尾
檢查檔案型別
檢查檔案內容
程式輸出
許可權控制——可寫可執行互斥

總結：本文僅僅是個人整理了一些常見的前端安全筆記，僅供參考，還有許多不足之處，其實web安全主要還是後端來處理的。前端好比一扇門，雖然防不住小偷，但是還要把門鎖上！

前端安全——個人筆記