前端的安全问题

xss 跨站脚本攻击：
（1）原理：页面渲染的数据中包含可运行的脚本
（2）攻击的基本类型：反射型（url参数直接注入）和存储型（存储到DB后读取时注入）
（3）注入点：HTML节点内的内容（text）；HTML中DOM元素的属性；Javascript代码；富文本

//HTML节点内容注入
<div><script>alert(1);</script></div>


//DOM属性注入
<img src='/images/1.png' onerror='alert(1);'>


//javascript代码
<script>
var a = '1';alert(1);''
</script>


//富文本是html标签，文字，以及样式的集合，很容易实现HTML节点内容注入和DOM属性注入，有被攻击的风险

csrf 跨站请求伪造

CSRF攻击的大致方式如下：某用户登录了A网站，认证信息保存在cookie中。当用户访问攻击者创建的B网站时，攻击者通过在B网站发送一个伪造的请求提交到A网站服务器上，让A网站服务器误以为请求来自于自己的网站，于是执行响应的操作，该用户的信息边遭到了篡改。总结起来就是，攻击者利用用户在浏览器中保存的认证信息，向对应的站点发送伪造请求。用户的认证是通过保存在cookie中的数据实现，在发送请求时，只要浏览器中保存了对应的cookie，服务器端就会认为用户已经处于登录状态，而攻击者正是利用了这一机制。
csrf 跨站请求伪造攻击示例：
假设我们网站是一个社交网站（example.com），简称网站A，攻击者的网站可以是任意类型的网站，在我们的网站中，删除账户的操作通过GET请求执行，当用户登录后，只要访问http://example.com/account/delete就会删除账户。那么在攻击者的网站上，只要创建一个显示图片的img标签，其中的src属性加入删除账户的URL:

当用户访问B网站时，浏览器在解析网页时会自动向img标签的src属性中的地址发送请求。此时你在A网站的登录信息保存在cookie中，因此，仅仅是访问B网站的页面就会让你的账户被删除掉。
当然，现实中很少有网站会使用GET请求来执行包含数据更改的敏感操作，这里只是一个示例。
现在，假设我们吸取了教训，改用POST请求提交删除账户的请求。尽管如此，攻击者只需要在B网站中内嵌一个隐藏表单，然后设置在页面加载后执行提交表单的javaScript函数，攻击仍然会在用户访问B网站时发起。
点击劫持：
原理：第三方网站通过iframe内嵌某一个网站，并且将iframe设置为透明不可见，将其覆盖在其他经过伪装的DOM上，伪装的可点击DOM（按钮等）与实际内嵌网站的可点击DOM位置相同，当用户点击伪装的DOM时，实际上点击的是iframe中内嵌的网页的DOM从而触发请求操作特点：用户自己做了点击操作；用户毫不知情；

二：如何防御

1：encode

encode也分为html的encode和js的encode

html的encode： 就是将一些有特殊意义的字符串进行替换，比如：

& => &

" => "

’ => ’

< => <

=> >

通过这些字符的替换，之前我们输入的<img src="null" onerror="alert()">就被encode成了<img src="null" onerror="alert()">

js的encode： 使用“\”对特殊字符进行转义，除数字字母之外，小于127的字符编码使用16进制“\xHH”的方式进行编码，大于用unicode（非常严格模式）

用“\”对特殊字符进行转义,这个可能比较好理解，因为将一下，比如’，"这些字符转译为’,"就可以使得js变为一个字符串，而不是一个可执行的js代码了，那为什么还需要进行16进制转换和unicode转换呢？这样做是为了预防一下隐藏字符，比如换行符可能会对js代码进行换行

作者：鱼仔1234
链接：https://www.jianshu.com/p/a38e280ed48b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

//使用“\”对特殊字符进行转义，除数字字母之外，小于127使用16进制“\xHH”的方式进行编码，大于用unicode（非常严格模式）。
var JavaScriptEncode = function(str){
     
    var hex=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
        
    function changeTo16Hex(charCode){
        return "\\x" + charCode.charCodeAt(0).toString(16);
    }
    
    function encodeCharx(original) {
        
        var found = true;
        var thecharchar = original.charAt(0);
        var thechar = original.charCodeAt(0);
        switch(thecharchar) {
            case '\n': return "\\n"; break; //newline
            case '\r': return "\\r"; break; //Carriage return
            case '\'': return "\\'"; break;
            case '"': return "\\\""; break;
            case '\&': return "\\&"; break;
            case '\\': return "\\\\"; break;
            case '\t': return "\\t"; break;
            case '\b': return "\\b"; break;
            case '\f': return "\\f"; break;
            case '/': return "\\x2F"; break;
            case '<': return "\\x3C"; break;
            case '>': return "\\x3E"; break;
            default:
                found=false;
                break;
        }
        if(!found){
            if(thechar > 47 && thechar < 58){ //数字
                return original;
            }
            
            if(thechar > 64 && thechar < 91){ //大写字母
                return original;
            }

            if(thechar > 96 && thechar < 123){ //小写字母
                return original;
            }        
            
            if(thechar>127) { //大于127用unicode
                var c = thechar;
                var a4 = c%16;
                c = Math.floor(c/16); 
                var a3 = c%16;
                c = Math.floor(c/16);
                var a2 = c%16;
                c = Math.floor(c/16);
                var a1 = c%16;
                return "\\u"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+"";        
            }
            else {
                return changeTo16Hex(original);
            }
            
        }
    }     
  
    var preescape = str;
    var escaped = "";
    var i=0;
    for(i=0; i < preescape.length; i++){
        escaped = escaped + encodeCharx(preescape.charAt(i));
    }
    return escaped;
}