前端安全——我的笔记

聊聊前端安全那些事儿

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

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

1、XSS攻击

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

两种方式：

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

注入点：

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

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

防范措施

1. 转义html

// 转义html
var escaprHtml = function(str){
    if(!str) return '';
    str = str.replace(/&/g, '&');
    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; } 复制代码

2. JSON.stringfiy

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

3. 富文本

1. 黑名单过滤，就是过滤到不准的标签或者属性，不安全，缘由是HTML标签有不少，一不留神就容易有遗落
2. 白名单过滤，富文本只容许哪些标签和这些标签带有哪些属性

4. XSS 插件

5. CSP（最有效的办法）

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

`Content-Security-Policy`,`default-src 'self'`
 
复制代码

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

2、CSRF攻击

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

攻击原理

1. 用户登陆A网站
2. A网站确认身份
3. B网站向A网站发送请求（带A网站的身份）

防范措施

1. 禁止第三方网站带Cookies

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

sameSite:"stirct"

复制代码

2. 在前端页面加入验证信息

• 验证码（用户体验差）
• token

3. 禁止第三方网站请求

• 验证referer

3、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 （兼容很差可忽略）

4、点击劫持

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

点击劫持防护措施（二者结合）

1. JavaScript禁止内嵌

<script>
    if (top.location != window.location){
        top.location = window.location 
    }
</script>
复制代码

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

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

复制代码

5、上传问题

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

上传问题防护

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

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