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

sarva 發(fā)布于2019-08-20 17:26 / 2561人閱讀

摘要：攻擊能獲取頁面數(shù)據(jù)劫持前端邏輯發(fā)送請求，偷取網(wǎng)站任意數(shù)據(jù)用戶資料欺騙用戶，所以是我們特別需要注意的前端安全問題。攻擊可能來源可以通過動態(tài)節(jié)點內(nèi)容屬性富文本來對頁面進行攻擊。內(nèi)容安全策略，用于指定哪些內(nèi)容可以執(zhí)行。

XSS

XSS全稱是跨站腳本攻擊(Cross Site Scripting)，所以我們可以縮寫成CSS，下面我們開始介紹CSS，先講選擇器。聽著是不是很奇怪，為了與層疊樣式表區(qū)分開來，我們選擇XSS做為其縮寫。 XSS攻擊能獲取頁面數(shù)據(jù)、cookie、劫持前端邏輯、發(fā)送請求，偷取網(wǎng)站任意數(shù)據(jù)、用戶資料、欺騙用戶，所以是我們特別需要注意的前端安全問題。我在騰訊云上架了一個網(wǎng)站，專門用來承接各種攻擊，歡迎來玩。 XSS攻擊能獲取頁面數(shù)據(jù)、cookie、劫持前端邏輯、發(fā)送請求，偷取網(wǎng)站任意數(shù)據(jù)、用戶資料、欺騙用戶，所以是我們特別需要注意的前端安全問題。

XSS攻擊分為反射型XSS攻擊，直接通過URL注入、存儲型XSS攻擊 存儲到DB后讀取時注入。

XSS攻擊可能來源

可以通過 動態(tài)HTML節(jié)點內(nèi)容、 HTML屬性、Javascript、 富文本來對頁面進行攻擊。

瀏覽器自帶防御措施

X-XSS-Protection, 0

http://123.207.46.233/?from=



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

發(fā)出請求時，XSS代碼出現(xiàn)在URL里，作為輸入提交到服務器端，服務器端解析后響應，XSS代碼隨瀏覽器一起傳回給瀏覽器，最后瀏覽器解析執(zhí)行XSS代碼。這個過程像一次反射，故叫反射性XSS。

localhost:3000/?xss=

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

HTML內(nèi)容和屬性轉譯

function html_encode(str) {
    if (!str) {
        return str;
    }
     return str.replace(/[<>&""]/g, (all) => {
         return {
             "<": "<",
             ">": ">",
             "&": "&",
             """: """
             """: "'"
         }[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內(nèi)容安全策略，用于指定哪些內(nèi)容可以執(zhí)行。
例如：

Content-Security-Policy: default-src "self" // 只允許同域的腳本執(zhí)行

Cookie特性

cookie是用于前端數(shù)據(jù)存儲，后端通過http頭設置，請求時通過http頭傳給后端，前端可以讀寫，遵守同源策略（協(xié)議、域名、端口全部一致）。

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

存儲個性化設置
存儲未登陸時用戶的唯一標識符
存儲已登陸用戶的憑證
存儲其他業(yè)務數(shù)據(jù)

用戶ID + 簽名

sessionId

cookieID

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

CSRF攻擊

cross site request forgy，跨站請求偽造

用戶登陸A網(wǎng)站、A網(wǎng)站確認身份、B網(wǎng)站向A網(wǎng)站發(fā)起請求（帶A網(wǎng)站身份）

利用用戶登陸態(tài)
用戶并不知情
完成業(yè)務請求

禁用第三方的cookie，same-site

通過referer

GPU云服務器云服務器 web前端是做什么的 web前端工程師是干什么的 web前端工程師是做什么的 web前端開發(fā)工程師是做什么的

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/83583.html

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

摘要：攻擊能獲取頁面數(shù)據(jù)劫持前端邏輯發(fā)送請求，偷取網(wǎng)站任意數(shù)據(jù)用戶資料欺騙用戶，所以是我們特別需要注意的前端安全問題。攻擊可能來源可以通過動態(tài)節(jié)點內(nèi)容屬性富文本來對頁面進行攻擊。內(nèi)容安全策略，用于指定哪些內(nèi)容可以執(zhí)行。 XSS XSS全稱是跨站腳本攻擊(Cross Site Scripting)，所以我們可以縮寫成CSS，下面我們開始介紹CSS，先講選擇器。聽著是不是很奇怪，為了與層疊樣式表...

oysun 2019-08-01 17:02 評論0 收藏0
網(wǎng)絡與安全

摘要：面試網(wǎng)絡了解及網(wǎng)絡基礎對端傳輸詳解與攻防實戰(zhàn)本文從屬于筆者的信息安全實戰(zhàn)中滲透測試實戰(zhàn)系列文章。建議先閱讀下的網(wǎng)絡安全基礎。然而，該攻擊方式并不為大家所熟知，很多網(wǎng)站都有的安全漏洞。面試 -- 網(wǎng)絡 HTTP 現(xiàn)在面試門檻越來越高，很多開發(fā)者對于網(wǎng)絡知識這塊了解的不是很多，遇到這些面試題會手足無措。本篇文章知識主要集中在 HTTP 這塊。文中知識來自《圖解 HTTP》與維基百科，若...

Integ 2019-06-21 16:40 評論0 收藏0
學習Python的建議

摘要：如果初學者接觸的第一門語言是，學習曲線則會平滑得多，掌握一些基本語法和內(nèi)置的數(shù)據(jù)結構，已經(jīng)可以上手寫一些小工具或者小型應用。如果你的學習時間充足，我的建議是一定要學數(shù)據(jù)結構和算法。前言 Python是最容易入門的編程語言，沒有之一。如果初學者接觸的第一門語言是C或者C++，對他們來說最難的不是語法，而是容易出現(xiàn)內(nèi)存泄漏、指針等問題。有時候排查這些問題對初學者的打擊很大，尤其是沒掌握排...

eechen 2019-07-30 17:39 評論0 收藏0
詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節(jié)。至于如何改變，我們接下去詳細介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節(jié)。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
基礎 - 收藏集 - 掘金

摘要：的語言的動態(tài)性意味著我們可以使用以上種數(shù)據(jù)類型表示變換過渡動畫實現(xiàn)案例前端掘金以下所有效果的實現(xiàn)方式均為個人見解，如有不對的地方還請一一指出。讀 zepto 源碼之工具函數(shù) - 掘金Zepto 提供了豐富的工具函數(shù)，下面來一一解讀。源碼版本本文閱讀的源碼為 zepto1.2.0 $.extend $.extend 方法可以用來擴展目標對象的屬性。目標對象的同名屬性會被源對象的屬性...

wuaiqiu 2019-08-15 10:49 評論0 收藏0