前端安全——我的筆記

聊聊前端安全那些事兒

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

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

1、XSS攻擊

XSS攻擊，全稱Cross Site Scripting，跨站腳本攻擊。 跨站：全部運行的邏輯都必須是在本站，當非本站的腳本運行在本站爲跨站。

兩種方式：

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

注入點：

• HTML節點內容
• HTML屬性（img onerror屬性）
• JavaScrit代碼
• 富文本

目前瀏覽器自帶防護，可是有限，瀏覽器默認X-XSS-Protection爲1，能夠攔截反射型，也就是url參數直接注入html節點內容和html屬性，但JavaScript代碼和富文本不會。

防範措施

1. 轉義html

// 轉義html
var escaprHtml = function(str){
    if(!str) return '';
    str = str.replace(/&/g, '&');
    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; } 複製代碼

2. JSON.stringfiy

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

3. 富文本

1. 黑名單過濾，就是過濾到不準的標籤或者屬性，不安全，緣由是HTML標籤有不少，一不留神就容易有遺落
2. 白名單過濾，富文本只容許哪些標籤和這些標籤帶有哪些屬性

4. XSS 插件

5. CSP（最有效的辦法）

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

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

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

2、CSRF攻擊

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

攻擊原理

1. 用戶登陸A網站
2. A網站確認身份
3. B網站向A網站發送請求（帶A網站的身份）

防範措施

1. 禁止第三方網站帶Cookies

• same-site屬性（兼容性很差，目前好像只有谷歌瀏覽器）

sameSite:"stirct"

複製代碼

2. 在前端頁面加入驗證信息

• 驗證碼（用戶體驗差）
• token

3. 禁止第三方網站請求

• 驗證referer

3、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 （兼容很差可忽略）

4、點擊劫持

點擊劫持，是經過用戶點擊完成的操做，而用戶徹底不知情的狀況下，它的原理是經過iframe標籤嵌套，而後把opaccity透明度設置爲0。

點擊劫持防護措施（二者結合）

1. JavaScript禁止內嵌

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

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

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

複製代碼

5、上傳問題

1. 上傳文件
2. 再次訪問上傳的文件
3. 上傳的文件被當成程序解析（node已解決）

上傳問題防護

• 限制上傳的後綴
• 檢查文件類型
• 檢查文件內容
• 程序輸出
• 權限控制——可寫可執行互斥

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