FE.WEB-前端安全防范初識

klivitamJ 發布于2019-08-30 15:55 / 802人閱讀

摘要：跨站腳本攻擊概念用戶填寫信息是可運行的代碼。操作用戶界面攻擊源頭反射型從讀取內容展示打開存儲型從后臺讀取內容展示這是一個從后臺讀取的數據防范手段純文本。由于內容可能在多端展示，所以不在提交的時候轉義，只在展示的時候轉義。

xss-跨站腳本攻擊

概念：用戶填寫信息是可運行的 js 代碼。操作用戶界面

攻擊源頭：

反射型 – 從url讀取內容展示

存儲型 - 從后臺讀取內容展示

防范手段：

純文本– html encode , js encode。由于內容可能在多端展示，所以不在提交的時候轉義，只在展示的時候轉義。


防范：html-encode

//4.svr.js
const http = require("http");
const fs = require("fs");
var spCharCodes = "[u0000-u001F]|u00F1|u000B|u000C|u00A0|uFEFF|u1680|u180E|[u2000-u200F]|u2028|u2029|u202F|u205F|u3000";
var norCharStr = ""|"|>|<";
var JavaScriptEncode = (function(str){

    var norChar = "
|
||"+norCharStr;
    var reg = new RegExp(norChar+"|"+spCharCodes, "g");

    var escapeMap = {};
    norChar.split("|").forEach(function(str){
        if (str == "<")
            // 防 xss
            escapeMap[str] = "u003c";
        else if (str.length == 1)
            escapeMap[str] = ""+str;
        else if (str.length == 2 && str[0] == "")
            escapeMap[eval("""+str+""")] = str;
    });

    function rp(str) {
        return escapeMap[str] || "u"+zeroize(str.charCodeAt(0).toString(16), 4, 0);
    }
    return function(str) {
        if (str === null || str === undefined || typeof str == "function") return "";
        return (""+str).replace(reg, rp);
    };
}())

const proxy = http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(fs.readFileSync("./4.xss.html").toString().replace("{{replaceJs}}}" , "bbb"" + ";alert("xss")+"" ));
    // res.end(fs.readFileSync("./4.xss.html").toString().replace("{{replaceJs}}}" , JavaScriptEncode("bbb"" + ";alert("xss")+"" )));
}).listen(3000);

富文本– 白名單過濾

npm xss

URL 編碼

將不可信數據作為 URL 參數值時需要對參數進行 URL 編碼

encodeURIComponent(str)

JavaScript 編碼

  function encodeForJavascript(str, kwargs) {
    let encoded = "";
    for(let i = 0; i < str.length; i++) {
      let cc = hex = str[i];
      if (!/[A-Za-z0-9]/.test(str[i]) && str.charCodeAt(i) < 256) {
        hex = "x" + cc.charCodeAt().toString(16);
      }
      encoded += hex;
    }
    return encoded;
  };

csrf-跨站偽造請求

概念：利用你所在網站的登錄的狀態，悄悄提交各種信息（post ,get 請求）

//1.svr.js
const http = require("http");
const fs = require("fs");
const proxy = http.createServer((req, res) => {
    if(req.method == "POST"){
        req.on("data" , (data)=>{
            console.log("referer :" ,   req.headers.referer);
            console.log("data :" ,   data.toString() , " cookies:" , req.headers.cookie);
        });
        req.on("end" , (data)=>{
            res.writeHead(200, { "Content-Type": "text/html" });

            res.end("");
        })
    } else {
        res.setHeader("Set-Cookie", ["login=1"]);
        res.end("");
    }
}).listen(3001);

防范手段：

提交 method=Post 判斷referer

Token(特殊登陸態)

SSRF-服務器偽造請求

概念：利用某些業務服務端會發出請求，請求內網地址

防范手段：

域名限制 - 不予提交內網域名

內網IP 限制 - 不予提交內網IP
-內網請求地址做token（特殊登陸態）- 信任請求

hijack 頁面劫持

概念：頁面劫持;iframe 嵌套某的頁面，騙取用戶輸入信息

防范手段：

頁面劫持：Window.parent 判斷

Json 劫持：返回{} ,而不是返回數據

X-FRAME-OPTIONS: [DENY|SAMEORIGIN|ALLOW-FROM]

其他 Jsonp & cors 安全校驗

防范手段：
Token （特殊登錄態）
referer 校驗

授權通過后的需要重定向的URL，被串改了

防范手段：
黑名單

參考資料：
https://github.com/caihuiji/w...
http://blog.gojaven.com/post/...
前端安全系列（一）：如何防止XSS攻擊？
前端安全系列之二：如何防止CSRF攻擊？

云服務器 GPU云服務器 docker初識初識關系數據庫前端安全 web前端安全

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

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

FE.WEB-前端安全防范初識

摘要：跨站腳本攻擊概念用戶填寫信息是可運行的代碼。操作用戶界面攻擊源頭反射型從讀取內容展示打開存儲型從后臺讀取內容展示這是一個從后臺讀取的數據防范手段純文本。由于內容可能在多端展示，所以不在提交的時候轉義，只在展示的時候轉義。 xss-跨站腳本攻擊概念：用戶填寫信息是可運行的 js 代碼。操作用戶界面攻擊源頭：反射型 – 從url讀取內容展示 //打開 1.xss.html# ...

Hanks10100 2019-08-02 14:02 評論0 收藏0
FE.WEB-前端安全防范初識

摘要：跨站腳本攻擊概念用戶填寫信息是可運行的代碼。操作用戶界面攻擊源頭反射型從讀取內容展示打開存儲型從后臺讀取內容展示這是一個從后臺讀取的數據防范手段純文本。由于內容可能在多端展示，所以不在提交的時候轉義，只在展示的時候轉義。 xss-跨站腳本攻擊概念：用戶填寫信息是可運行的 js 代碼。操作用戶界面攻擊源頭：反射型 – 從url讀取內容展示 //打開 1.xss.html# ...

wall2flower 2019-08-23 14:33 評論0 收藏0
Vue.js + LeanCloud（node.js）前后端分離開發樣板

摘要：最新的云引擎都升級到，很多都有變化，之前的全棧項目卻是沒人維護了。最近學習感覺真的好用，所以配合最新的云引擎寫一個，作為以后快速開發的模板工具。前后端完全分離，服務端設置了跨域，前端項目提出去也是的。如果對您有幫助的話，歡迎 star~ 我的github 地址另外現在用命令行部署 leancloud 有點問題，async/await 會報錯，但是使用 git 部署不會,所以還是使用...

wudengzan 2019-08-19 18:41 評論0 收藏0
初識CodeIgniter框架（一）

摘要：是一套給網站開發者使用的應用程序開發框架和工具包。是要展現給用戶的信息。是模型視圖以及其他任何處理請求所必須的資源之間的中介，并生成網頁。 CodeIgniter 是一套給 PHP 網站開發者使用的應用程序開發框架和工具包。目錄結構說明 license.txt 許可協議(可刪除) user_guide 用戶手冊(可刪除) system 框架核心文件 app...

CatalpaFlat 2019-06-27 12:00 評論0 收藏0