多是東半球最詳解的web前端安全相關知識

XSS

XSS全稱是跨站腳本攻擊(Cross Site Scripting)，因此咱們能夠縮寫成CSS，下面咱們開始介紹CSS，先講選擇器。聽着是否是很奇怪，爲了與層疊樣式表區分開來，咱們選擇XSS作爲其縮寫。 XSS攻擊能獲取頁面數據、cookie、劫持前端邏輯、發送請求，偷取網站任意數據、用戶資料、欺騙用戶，因此是咱們特別須要注意的前端安全問題。 我在騰訊雲上架了一個網站，專門用來承接各類攻擊，歡迎來玩。 XSS攻擊能獲取頁面數據、cookie、劫持前端邏輯、發送請求，偷取網站任意數據、用戶資料、欺騙用戶，因此是咱們特別須要注意的前端安全問題。

XSS攻擊分爲反射型XSS攻擊，直接經過URL注入、存儲型XSS攻擊 存儲到DB後讀取時注入。

XSS攻擊可能來源

能夠經過 動態HTML節點內容、 HTML屬性、Javascript、 富文原本對頁面進行攻擊。

瀏覽器自帶防護措施

X-XSS-Protection, 0

http://123.207.46.233/?from=<script>alert(1)</script>

<img src="2" onerror="alert(1)">

http://123.207.46.233/?from=111";alert(1);"

發出請求時，XSS代碼出如今URL裏，做爲輸入提交到服務器端，服務器端解析後響應，XSS代碼隨瀏覽器一塊兒傳回給瀏覽器，最後瀏覽器解析執行XSS代碼。這個過程像一次反射，故叫反射性XSS。

localhost:3000/?xss=<img src="null" onerror="alert(1)">

瀏覽器防護功能頗有線，只能訪問反射型攻擊且不能防護來自富文本的攻擊。

HTML內容和屬性轉譯

function html_encode(str) {
    if (!str) {
        return str;
    }
     return str.replace(/[<>&"']/g, (all) => {
         return {
             '<': '&lt;',
             '>': '&gt;',
             '&': '&amp;',
             '"': '&quot;'
             "'": '&#39'
         }[all]
     });
}

可是用以上的方法並不能解決全部的問題，若是將用於的輸入當成一個js變量，咱們

var escapeForJs = function(str) {
    if (!str) {
        return ''
    }
    str = str.replace(/\/g, '\\\\');
    str = str.replace(/"/g, '\\"');
    return str;
}

富文本防護

使用黑名單風險特別大，咱們只能使用白名單來過濾。咱們首先要知道這個標籤是否合法，其次看標籤上的
屬性是否合法。

var cheerio = require('cheerio');
var xssFilter = function (html) {
    if (!html) {
        return '';
    }

    var $ = cheerio.load(html);
    var whiteList = {
        'img': ['src'],
        'font': ['color', 'size'],
        'a': ['href']
    }


    $('*').each(function (index, elem) {
        let name = elem.name;
        if(!whiteList[name]) {
            $(elem).remove();
            return;
        }
        for (var attr in elem.attribs) {
            if (whiteList[name].indexOf('attr') === -1) {
                $(elem).attr(attr, null);
            }
        }
    })
}

下面給你們介紹一個神器xss模塊，var xss = require('xss')，知足你對XSS的一切幻想。

CSP

Content Security Policy內容安全策略，用於指定哪些內容能夠執行。
例如：

Content-Security-Policy: default-src 'self' // 只容許同域的腳本執行

Cookie特性

cookie是用於前端數據存儲，後端經過http頭設置，請求時經過http頭傳給後端，前端能夠讀寫，遵照同源策略（協議、域名、端口所有一致）。

域名  有效期  路徑  http-only  secure(https)  

存儲個性化設置
存儲未登錄時用戶的惟一標識符
存儲已登錄用戶的憑證
存儲其餘業務數據

用戶ID + 簽名

sessionId

cookieID

 簽名防串改
私有變化
http-only

CSRF攻擊

cross site request forgy，跨站請求僞造

用戶登錄A網站、A網站確認身份、B網站向A網站發起請求（帶A網站身份）

利用用戶登錄態
用戶並不知情
完成業務請求

禁用第三方的cookie，same-site

經過referer