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

sswqycbailong 2019-06-30

xss-跨站脚本攻击

概念:用户填写信息是可运行的 js 代码。 操作用户界面

攻击源头

  • 反射型 – 从url读取内容展示
<!--1.xss.html-->
<script>
//打开 1.xss.html#<img src="404.html" onerror="alert('xss')" />
    var $test = document.querySelector('#test');
    $test.innerHTML = decodeURIComponent(window.location.hash);
</script>
  • 存储型 - 从后台读取内容展示
<!--2.xss.html-->
<script>
    //这是一个从后台读取的数据
    var renderText = '<img src="404.html" onerror="alert(\'xss\')" />'
    var $test = document.querySelector('#test');
    $test.innerHTML = renderText;
</script>

防范手段

  • 纯文本– html encode , js encode。由于内容可能在多端展示,所以不在提交的时候转义,只在展示的时候转义。
<!--3.xss.html-->
<title>防范:html-encode</title>
<div id="test"></div>
<script>
    var htmlEscape = function(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    };
    var htmlUnescape = function(value) {
        return String(value)
            .replace(/&quot;/g, '"')
            .replace(/&#39;/g, "'")
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/&amp;/g, '&');
    };
    //这是一个从后台读取的数据
    var renderText = '<img src="404.html" onerror="alert(\'xss\')" />'
    var $test = document.querySelector('#test');
    $test.innerHTML = htmlEscape(renderText);
</script>
//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 = '\\n|\\r|\\\\|'+norCharStr;
    var reg = new RegExp(norChar+'|'+spCharCodes, 'g');

    var escapeMap = {};
    norChar.split('|').forEach(function(str){
        if (str == '<')
            // 防</script> 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.scrf.html-->
<iframe id="" name="csrf-form"></iframe>
<form target="csrf-form" method="post" action="http://127.0.0.1:3001/csrf">
    <input name="name" value="1111">
    <input type="submit" value="提交">
</form>
//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-服务器伪造请求

概念:利用某些业务服务端会发出请求,请求内网地址

<!--提交一个图片地址,服务器帮转为png格式。
1. 服务器拉取图片
2. 假如提交的图片是 http://127.0.0.1
-->
<form target="csrf-form" method="post" action="http://127.0.0.1:3001/csrf">
    <input name="name" value="1111">
    <input type="submit" value="提交">
</form>

防范手段

  • 域名限制 - 不予提交内网域名
  • 内网IP 限制 - 不予提交内网IP
    -内网请求地址做token(特殊登陆态)- 信任请求

hijack 页面劫持

概念:页面劫持;iframe 嵌套某的页面,骗取用户输入信息

<!--1.hijack.html-->
<iframe src="./2.hikjack.html" frameborder="0"></iframe>
<!--2.hijack.html-->
<script>
    if (window.parent != window)
        alert('hikjack')
</script>

防范手段

  • 页面劫持: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攻击?

相关推荐

ELEMENTS爱乐冬雨 / 0评论 2020-05-29