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

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，被串改了

防范手段：
黑名单

防范

内容安全策略(Content-Security-Policy)

就算我们禁止JavaScript运行，他们还有其他的攻击渠道。举例来说，如果我可以把一个透明的 1x1 大小的图片放到您的网站上，我就可以知道您的网站有多少流量。如果我能让类似Flash的带有漏洞的浏览器插件运行起来，我就可以利用它的缺陷去做很多您想不到的事情！。CSP模块并不能防止特定类型的攻击。最主要的是：您一定不希望有人在你的页面上放任何没经过您允许的东西。
helmet csp

X-Permitted-Cross-Domain-Policie

·X-Permitted-Cross-Domain-Policies: none
阻止了Adobe Flaseh和Adobe Acrobat加载您网站上的内容。

X-DNS-Prefetch-Control

浏览器可以在用户单击链接或是从某处加载资源之前启动这些DNS请求。这样就提高了用户点击链接时的性能，但也影响了用户的隐私。因为它可以理解为替用户访问了他们并未访问的链接。

可以将X-DNS-Prefetch-Control设置为on/off，来启用/禁用DNS预解析。

Expect-CT

Expect-CT响应头告诉浏览器证书的透明度（Certificate Transparency）。

Feature-Policy

限制浏览器可以使用的特性。比方说，您可以禁用全屏(fullscreen)或震动(vibration)API。

X-Frame-Options

它有三个值：

• X-Frame-Options: DENY表示该页面不允许在 iframe 中展示，即便是在相同域名的页面中嵌套也不允许。
• X-Frame-Options: SAMEORIGIN表示该页面可以在相同域名页面的 iframe 中展示。您可以将自己的页面放到 iframe 中，其他人不行。
• X-Frame-Options: ALLOW-FROM http://example.com表示允许http://example.com将您的页面放在iframe中，但不允许其他任何人这样做。(不幸的是，浏览器支持很差，只能允许一个。)

X-Powered-By

移除了X-Powered-By响应头，让攻击者更难以看到您的站点可能支持哪些潜在的易受攻击技术点。

HSTS

Strict-Transport-Security响应头告诉浏览器坚持HTTPS，绝不访问不安全的HTTP。下面的例子表示浏览器检测到该响应头后，在接下来的60天里只通过HTTPS访问网站：
Strict-Transport-Security: max-age=5184000

No Sniff

阻止浏览器猜测（嗅探）MIME Type，以排除安全隐患。它的工作原理是将X-Content-Type-Options报头设置为nosniff。

X-XSS-Protection

设置X-XSS-Protection报头,阻止反射性XSS攻击。在大多数浏览器中它会被设置为1; mode=block。但在旧版本的IE浏览器中，它会被设置成0以禁用。

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

Referrer Policy

指令	作用
no-referrer	整个 Referer 报头会被移除。访问来源信息不随着请求一起发送。
no-referrer-when-downgrade <span data-v-76a02c50="" class="badge tip" style="vertical-align: middle;">默认值</span>	在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS)，但是在降级的情况下不会被发送 (HTTPS->HTTP)。
origin	在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。
origin-when-cross-origin	对于同源的请求，会发送完整的URL作为引用地址，但是对于非同源请求仅发送文件的源。
same-origin	对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。
strict-origin	在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。
strict-origin-when-cross-origin	于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此报头 (HTTPS->HTTP)。
unsafe-url	无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。