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

klivitamJ 发布于2019-08-30 15:55 / 801人阅读

摘要：跨站脚本攻击概念用户填写信息是可运行的代码。操作用户界面攻击源头反射型从读取内容展示打开存储型从后台读取内容展示这是一个从后台读取的数据防范手段纯文本。由于内容可能在多端展示，所以不在提交的时候转义，只在展示的时候转义。

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前端安全

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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