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

2024年5月1日 125次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞