常见前端安全

1.跨站脚本攻击，俗称XSS(cross )

　　什么是XSS？

　　　　xss是恶意用户将脚本植入到页面中执行而获取相应敏感信息。也就是会在web页面某个节点（文本节点、属性节点）运行。

　　XSS攻击的危害包括：

　　　　1.盗用账号等敏感信息

　　　　2.非法转账等

　　XSS攻击类型：

　　　　1.反射型。通过一个伪装的url链接进行攻击，利用url的search参数将脚本伪装，当页面获取链接参数进行攻击

　　　　2.储存型。通过表单输入，储存数据库，再在页面读取数据，回显执行脚本进行攻击。

　　　　3.富文本。

　　注入点：

　　　　1.html节点内容
　　　　　　评价输入框输入存储DB后读取

　　　　　　<div> {content} </div>
　　　　　　<div> <script></script></div>

　　　　2.html属性
　　　　　　URL传入src,scr提前关闭引号

　　　　　　<img src='#{img}' />
　　　　　　<img src="1" onerror="alert(1)" />
　　　　3.脚本
　　　　　　提前关闭引号

　　　　　　　　<script>
　　　　　　　　　　var data = '#{data}'
　　　　　　　　　　var data = 'hello';alert(0)''
　　　　　　　　</script>
　　　　4.富文本编辑
　　　　　　本质是一段复杂的html,提交

　　XSS防御

　　　　1.针对反射型

　　　　2.针对html的脚本注入

//html节点 防御

//对于尖括号“<” ">" 进行转义

//转义时机： 在存入数据库前 或  在读取DB展示前转义

function escapeHtml(str){
    str = str.replace(/&/g, '&'); //这句在先，不然会把&lt的&符号也转了
    str = str.replace(/</g, '<');
    str = str.replace(/>/g, '>');
    return str
}

//html属性 防御
//对于引号 “"” 进行转义

function escapeHtmlProp(str){
    if(!str) return ''
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, ''');
    str = str.replace(/ /g, ' ');
    return str
}


//以上两种防御方法可以合并为同一个函数方法

　　

　　　　3.针对JS的脚本注入

　　　　　　直接用JSON.stringify(str)

　　　　4.针对富文本的脚本注入

　　　　　　1）白名单

　　　　　　　　

var xssfilter = function (html){
    if(!html) return;
    var cheerio = require('cheerio');
    var $ = cheerio.load(html);
    //设置白名单
    var whiteList = {
        'img': ['src','title']
    }
    $('*').each(function(index,el){
        if(!whiteList[el.name]){
            $(el).remove();
            return;
        }
        for( var attr in el.attribs) {
            if(whiteList[el.name].indexOf(attr) === -1){
                $(el).attr(attr,null)
            }
        }
    })
    return html
}

　　

　　　　　　2）黑名单

 

2.跨站请求伪造，俗称CSRF

　　1.攻击原理

　　　　用户登录正常A网站进行正常操作，并且确认身份，保存认证信息。然后恶意网站B页面向A网站发起请求（带上A网站的认证身份），以达到在A网站执行恶意操作。

　　2.危害

　　　　利用用户登录态　　盗取用户资金

　　　　用户不知情　　　　冒充用户发帖

　　　　完成业务请求　　　损坏网站声誉

　　3.防御

　　　　从关键点切入：恶意网站向认证网站发请求，带上认证信息。

　　　　1.禁止第三方网站带cookie。

　　　　　　后端设置samesite值

　　　　2.不访问认证网站

　　　　　　在前端页面加入验证信息

　　　　　　验证码

　　　　　　token