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

sarva 發布于2019-08-20 17:26 / 2557人閱讀

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

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=



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

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

localhost:3000/?xss=

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

HTML內容和屬性轉譯

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內容安全策略，用于指定哪些內容可以執行。
例如：

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

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

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

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

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

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

oysun 2019-08-01 17:02 評論0 收藏0
網絡與安全

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

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

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

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

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

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

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

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