前端安全-常见的攻击以及防御

前端安全-常见的攻击以及防御
⼀、基础知识
1、XSS（Cross Site Scripting）跨站脚本攻击
（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属性注⼊，有被攻击的风险
2、CSRF（Cross Site Request Forgy）跨站请求伪造
原理：在第三⽅⽹站向本⽹站发起请求（如图）
（1）⽤户在a站前端页⾯发起登录（⾝份认证）请求
（2）a站后端确认⾝份，登录成功，cookie中存在⽤户的⾝份认证信息
（3）b站前端页⾯向a站后端发起请求，带着a站的cookie信息（⾝份认证信息），请求成功
综上，可以清楚的知道，只要⽤户访问了b站的前端页⾯，b站就可以在⽤户完全不知道的情况下，带着a站的⽤户登录态（cookie）向a站发起请求
3、点击劫持
原理：第三⽅⽹站通过iframe内嵌某⼀个⽹站，并且将iframe设置为透明不可见，将其覆盖在其他经过伪装的DOM上，伪装的可点击
DOM（按钮等）与实际内嵌⽹站的可点击DOM位置相同，当⽤户点击伪装的DOM时，实际上点击的是iframe中内嵌的⽹页的DOM从⽽触发请求操作
特点：⽤户⾃⼰做了点击操作；⽤户毫不知情；
⼆、如何防御
1、XSS攻击防御
（1）浏览器⾃带防御机制，主要应对反射型攻击（HTML内容或属性）：http响应头中⾃动添加x-xss-protection，值为0（关闭），1（打开），默认打开
（2）对特定字符做转义：内容注⼊替换尖括号（ < => &lt; > => &gt; ）属性注⼊替换单引号或双引号（ " => &quot; ' => &#39; ）
（3）CSP（Content Security Policy）内容安全策略：⽤于指定哪些内容可执⾏
//我们可以在http响应头中设置Content-Security-Policy
//图⽚可以从任何地⽅加载(注意 "*" 通配符)
//多媒体⽂件仅允许从 和 加载(不允许从这些站点的⼦域名)
//可运⾏脚本仅允许来⾃于
Content-Security-Policy: default-src 'self'; img-src *; media-src ; script-src
//同时meta中也⽀持设置Content-Security-Policy
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
2、CSRF攻击防御：
CSRF的发⽣有⼏个特点，b站发送的请求带着a站的cookie信息； b站发送请求不经过a站的前端；http请求头中的referer为b站。

我们可以从这些特点⼊⼿，思考防御的办法
（1）禁⽌第三⽅⽹站携带本⽹站的cookie信息：设置same-site属性，same-site属性有两个值，Strict（所有的第三⽅请求都不能携带本⽹站的cookie）和Lax（链接可以，但是form表单提交和ajax请求不⾏）
（2）本⽹站前端页⾯添加验证信息：使⽤验证码或者添加token验证
验证码：当发起请求时，前端需要输⼊本⽹站页⾯的验证码信息，后端对验证码进⾏验证，验证码正确才会进⾏相关操作（存取数据等）
token验证：a站前端将token存在当前页⾯中（⽐如表单中的input隐藏域，meta标签或者任何⼀个dom的属性）和cookie中，当请求a站后端的时候，参数中带上这个token字段，a站后端将参数中的token和cookie中的token做对⽐，相同则验证通过，不同则请求不合法
不管是验证码还是token验证，原理都是⼀样的，在a站前端页⾯加⼊验证，当第三⽅⽹站请求a站后端时，即使能携带a站cookie，但是因为没有经过a站的前端页⾯从⽽拿不到验证信息，也会导致请求失败。

两种防御的⽅法也有区别，验证码需要⽤户去填写，从⽽增加了⽤户使⽤⽹站的复杂度，⽽token验证在⽤户⽆感知的情况下就可以实现，不影响⽤户体验。

我个⼈理解，验证码验证⼀般使⽤在需要提⾼⽤户认知的场景，⽐如，登录多次失败，修改个⼈信息（⽤户名，密码，绑定⼿机号等等），⽽⼀些获取商品列表信息，搜索等接⼝，使⽤token⽐较合理。

可以看看我们平时使⽤的这些⽹站，作参考～
（3）referer验证：禁⽌来⾃第三⽅的请求
（4）使⽤post请求：有⼀个说法是“post请求⽐get请求更安全”，那这种说法对不对呢？实际上这种说法并不准确，对于CSRF攻击来讲，不管是post还是get都能实现攻击，区别只是post请求攻击⽅需要构造⼀个form表单才可以发起请求，⽐get请求（img的src， a标签的href等等）的攻击⽅式复杂了⼀些，但是并不能有效的阻⽌攻击。

3、点击劫持攻击防御
（1）Javascript禁⽌内嵌：当⽹页没有被使⽤iframe内嵌时，top和window是相等的；当⽹页被内嵌时，top和window是不相等的；可以在本⽹站的页⾯中添加如下判断：
<script>
if (top.location != window.location) {
//如果不相等，说明使⽤了iframe，可进⾏相关的操作
}
</script>
但是这种⽅式并不是万能的，因为iframe标签中的属性sandbox属性是可以禁⽤内嵌⽹页的脚本的：
<iframe sandbox='allow-forms' src='...'></iframe>
（2）设置http响应头 X-Frame-Options：有三个值 DENY（禁⽌内嵌） SAMEORIGIN（只允许同域名页⾯内嵌） ALLOW-FROM（指定可以内嵌的地址）
能在所有的web服务器端预设好X-Frame-Options字段值是最理想的状态。

（3）⼀些辅助⼿段，⽐如添加验证码，提⾼⽤户的防范意识
三、总结
本⽂旨在对平时了解到的知识做⼀些总结和记录，⽅便查阅和复习，描述不当之处，欢迎指出。

⽂中有些部分并未深⼊展开，⽐如iframe的sandbox属性（只适⽤于内嵌⽹页是form提交的情况，如果所有的请求都通过ajax来请求，⽽js脚本⼜被禁⽤的话，那就没办法实现点击劫持了），有⼀些内容需要你⾃⼰动脑思考。

后续可能还会有补充，⽐如SQL注⼊部分，总之，今天先这样啦～。