聊聊前端安全那些事儿

前言：最近在学习前端安全，不知道从哪下手，于是在慕课网上看了找到了web安全视频，整理了如下笔记！

前端攻击有哪些？我们该如何防范？

一、XSS攻击

XSS攻击，全称Cross Site Scripting，跨站脚本攻击。跨站：所有运行的逻辑都必须是在本站，当非本站的脚本运行在本站为跨站。

两种方式：

url参数直接注入 ---反射型攻击
存储到DB后读取时注入 ---注入型攻击

注入点：

HTML节点内容
HTML属性（img onerror属性）
JavaScrit代码
富文本

目前浏览器自带防御，但是有限，浏览器默认X-XSS-Protection为1，可以拦截反射型，也就是url参数直接注入html节点内容和html属性，但JavaScript代码和富文本不会。

防范措施

转义html

// 转义html
var escaprHtml = function(str){
    if(!str) return '';
    str = str.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, '&#39;');
    // str = str.replace(/ /g, '&#32;');
    return str;
}

JSON.stringfiy

// 转义js但是不保险
var escaprJS = function(str){
    if(!str) return '';
    str = str.replace(/\\/g, '\\\\');
    str = str.replace(/"/g, '\\"');
    return str;
}
// JSON.stringfiy保险
JSON.stringfiy()

富文本

黑名单过滤，就是过滤到不许的标签或者属性，不安全，原因是HTML标签有很多，一不留神就容易有遗落

白名单过滤，富文本只允许哪些标签和这些标签带有哪些属性

XSS 插件
CSP（最有效的办法）

CSP，全称Content Security Policy，内容安全策略，用于指定哪些内容可执行，它是一个http头。


 `Content-Security-Policy`,`default-src 'self'`

幸运的是目前前端主流的框架已解决XSS攻击，如：Vue、React、Angular

二、CSRF攻击

CSRF攻击，全称Cross Site Request Forgy，跨站请求伪造。它的意思是在其它的网站对目标网站发送请求，而这些请求是在用户不知情的情况下完成的。它是发生在匿名的情况下，第三方网站，带上Cookies，向你的网站发送请求，不访问你的前端。

攻击原理

用户登录A网站
A网站确认身份
B网站向A网站发送请求（带A网站的身份）

防范措施

禁止第三方网站带Cookies

same-site属性（兼容性不好，目前好像只有谷歌浏览器）


sameSite:"stirct"

在前端页面加入验证信息

验证码（用户体验差）

token

禁止第三方网站请求

验证referer

三、cookies

cookies特性

前端数据存储

后端通过http头设置

请求时通过http头传给后端

前端可读写

遵守同源策略（协议、域名、端口全部一致）

Cookies和XSS攻击关系

XSS可能会偷走Cookies

http-only的Cookies可能不会被偷

Cookies和CSRF攻击关系

CSRF攻击利用了用户的Cookies

攻击站点无法读写Cookies

最好能阻止第三方网站使用Cookies

Cookies安全策略

签名防篡改

私有变换（加密、秘钥、多次转换hash算法md5/sha256等）

http-only（防止XSS攻击）

secure（JavaScript不可读写）

same-site （兼容不好可忽略）

四、点击劫持

点击劫持，是通过用户点击完成的操作，而用户完全不知情的情况下，它的原理是通过iframe标签嵌套，然后把opaccity透明度设置为0。

点击劫持防御措施（两者结合）

JavaScript禁止内嵌

<script>
    if (top.location != window.location){
        top.location = window.location 
    }
</script>

请求头X-FRAME-OPTIONS禁止内嵌


header('X-Frame-Options:DENY')

五、上传问题

上传文件
再次访问上传的文件
上传的文件被当成程序解析（node已解决）

上传问题防御

限制上传的后缀
检查文件类型
检查文件内容
程序输出
权限控制——可写可执行互斥

总结：本文仅仅是个人整理了一些常见的前端安全笔记，仅供参考，还有许多不足之处，其实web安全主要还是后端来处理的。前端好比一扇门，虽然防不住小偷，但是还要把门锁上！