前端安全——個人筆記

lixinchao發表於2018-05-30
前端筆記

聊聊前端安全那些事兒

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

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

一、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;
}
複製程式碼
  1. JSON.stringfiy
// 轉義js但是不保險
var escaprJS = function(str){
    if(!str) return '';
    str = str.replace(/\\/g, '\\\\');
    str = str.replace(/"/g, '\\"');
    return str;
}
// JSON.stringfiy保險
JSON.stringfiy()

複製程式碼
  1. 富文字
  1. 黑名單過濾，就是過濾到不許的標籤或者屬性，不安全，原因是HTML標籤有很多，一不留神就容易有遺落
  2. 白名單過濾，富文字只允許哪些標籤和這些標籤帶有哪些屬性

  1. XSS 外掛

  2. CSP（最有效的辦法）

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


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

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

二、CSRF攻擊

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

攻擊原理

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

防範措施

  1. 禁止第三方網站帶Cookies
  • same-site屬性（相容性不好，目前好像只有谷歌瀏覽器）

sameSite:"stirct"

複製程式碼
  1. 在前端頁面加入驗證資訊
  • 驗證碼（使用者體驗差）
  • token
  1. 禁止第三方網站請求
  • 驗證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。

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

  1. JavaScript禁止內嵌
<script>
    if (top.location != window.location){
        top.location = window.location 
    }
</script>
複製程式碼
  1. 請求頭X-FRAME-OPTIONS禁止內嵌

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

複製程式碼

五、上傳問題

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

上傳問題防禦

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

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

相關文章