前端安全編碼

這裏只是講解前端須要考慮的安全問題，後端和網絡上的安全問題這裏不作講解

web網頁中前端開發中須要注意的幾個地方

• url連接的安全問題
• 輸入表單內容的安全問題
• 接口提交的安全問題
• 登陸密碼的安全問題

下面經過具體的漏洞類型，進行分析

XSS漏洞

跨站腳本攻擊（英語：Cross-site scripting，因簡稱與css衝突，無奈簡稱爲：XSS）是一種網站應用程式的安全漏洞攻擊，是代碼注入的一種。
它容許惡意使用者將代碼注入到網頁上執行，其餘使用者在觀看網頁時就會受到攻擊，從而能夠達到攻擊者盜取用戶信息或其餘侵犯用戶安全隱私的目的。

XSS攻擊方式的幾種常見類型

非持久型 XSS

非持久型 XSS 漏洞，也叫反射型 XSS 漏洞，通常是經過給別人發送帶有惡意腳本代碼參數的 URL，當 URL 地址被打開時，特有的惡意代碼參數被 HTML 解析、執行。

• 例如經過 URL 獲取某些參數
  下述 URL 輸入會將 HTML結構 改成 <div><script>alert(1)</script></div> ，這樣頁面中就憑空多了一段可執行腳本

<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>
複製代碼

如何防護

• Web 頁面渲染的全部內容或者渲染的數據都必須來自於服務端
• 儘可能不要從 URL，document.referrer，document.forms 等這種 DOM API 中獲取數據直接渲染。
• 儘可能不要使用 eval, new Function()，document.write()，document.writeln()，window.setInterval()，window.setTimeout()，innerHTML，document.creteElement() 等可執行字符串的方法
• 作不到以上幾點的話，前端渲染的時候對任何的字段都須要作 escape 轉義編碼
  • 最廣泛的作法是轉義輸出的內容，對於引號，尖括號，斜槓進行轉義

    function escape(str) {
      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, '&#96;')
      str = str.replace(/\//g, '&#x2F;')
      return str
    }
    複製代碼

    經過轉義能夠將攻擊代碼 變成

    escape('<script>alert(1)</script>')
    // -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
    複製代碼

  • 對於顯示富文原本說，不能經過上面的辦法來轉義全部字符，由於這樣會把須要的格式也過濾掉。這種狀況一般採用白名單過濾的辦法，固然也能夠經過黑名單過濾，可是考慮到須要過濾的標籤和標籤屬性實在太多，更加推薦使用白名單的方式。
    如下示例使用了 js-xss 來實現。輸出中保留了 h1 標籤且過濾了 script 標籤

    var xss = require('xss')
    var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
    console.log(html)
    // -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
    複製代碼

持久型 XSS

持久型 XSS 漏洞，也被稱爲存儲型 XSS 漏洞，通常存在於 Form 表單提交等交互功能，如發帖留言，提交文本信息等，黑客利用的 XSS 漏洞，將內容經正常功能提交進入數據庫持久保存，當前端頁面得到後端從數據庫中讀出的注入代碼時，剛好將其渲染執行。

持久型 XSS 攻擊成功須要同時知足如下幾個條件：

• POST 請求提交表單後端沒作轉義直接入庫。
• 後端從數據庫中取出數據沒作轉義直接輸出給前端。
• 前端拿到後端數據沒作轉義直接渲染成 DOM。

如何防護

• 後端在入庫前應該選擇不相信任何前端數據，將全部的字段統一進行轉義處理。
• 後端在輸出給前端數據統一進行轉義處理。
• 前端在渲染頁面 DOM 的時候應該選擇不相信任何後端數據，任何字段都須要作轉義處理。

CSP

內容安全策略 (CSP) 是一個額外的安全層，用於檢測並削弱某些特定類型的攻擊，包括跨站腳本 (XSS) 和數據注入攻擊等。不管是數據盜取、網站內容污染仍是散發惡意軟件，這些攻擊都是主要的手段。咱們能夠經過 CSP 來儘可能減小 XSS 攻擊。CSP 本質上也是創建白名單，規定了瀏覽器只可以執行特定來源的代碼。

一般能夠經過 HTTP Header 中的 Content-Security-Policy 來開啓 CSP

• 只容許加載本站資源

Content-Security-Policy: default-src ‘self’
複製代碼

• 只容許加載 HTTPS 協議圖片

Content-Security-Policy: img-src https://*
複製代碼

前端CSRF安全編碼

跨站請求僞造（英語：Cross-site request forgery），也被稱爲 one-click attack 或者 session riding，一般縮寫爲 CSRF 或者 XSRF， 是一種挾制用戶在當前已登陸的 Web 應用程序上執行非本意的操做的攻擊方法。[1] 跟跨網站指令碼（XSS）相比，XSS 利用的是用戶對指定網站的信任，CSRF 利用的是網站對用戶網頁瀏覽器的信任

CSRF 就是利用用戶的登陸態發起惡意請求, 攻擊成功須要同時知足如下幾個條件：

1. 用戶已經登陸了站點 A，並在本地記錄了 cookie
2. 在用戶沒有登出站點 A 的狀況下（也就是 cookie 生效的狀況下），訪問了惡意攻擊者提供的引誘危險站點 B (B 站點要求訪問站點A)。
3. 站點 A 沒有作任何 CSRF 防護

• 攻擊方式
  假設網站中有一個經過 Get 請求提交用戶評論的接口，那麼攻擊者就能夠在釣魚網站中加入一個圖片，圖片的地址就是評論接口

<img src="http://www.domain.com/xxx?comment='attack'" />
複製代碼

若是接口是 Post 提交的，就相對麻煩點，須要用表單來提交接口

<form action="http://www.domain.com/xxx" id="CSRF" method="post">
 <input name="comment" value="attack" type="hidden" />
</form>
複製代碼

防護辦法

• Get 請求不對數據進行修改
• 不讓第三方網站訪問到用戶 Cookie
• 阻止第三方網站請求接口
• 在非 GET 請求中增長 token

  服務器下發一個隨機 Token（算法不能複雜），每次發起請求時將 Token 攜帶上，服務器驗證 Token 是否有效。

密碼安全

密碼安全更多的是後端數據庫的安全，其實前端也能夠作些事情，

• 好比，防止暴力破解的方式破解密碼

一般使用驗證碼增長延時或者限制嘗試次數的方式。而且一旦用戶輸入了錯誤的密碼，也不能直接提示用戶輸錯密碼，而應該提示帳號或密碼錯誤。

前端敏感信息泄漏

• 禁止使用localStorage/sessionstorage/globalStorage進行敏感信息存儲
• 使用postMessage等須要在進行白名單校驗
• 前端禁止寫入cookie

參考：
yuchengkai.cn/docs/fronte…
zoumiaojiang.com/article/com…

不足之處還望海涵，請大神多多指教