FE.WEB-前端平安提防初识

2023年4月11日 99次阅读 来源: seasonley

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进击？

    原文作者：seasonley
    原文地址: https://segmentfault.com/a/1190000017796304
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞