前端面试之安全那些事（八）

最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！
最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。

XSS

XSS，又叫跨站脚本攻击。

攻击方式

攻击者通过在页面输入JS脚本代码，恶意篡改客户端网页代码，从而在用户浏览网页的时候，获取用户数据，而达到自己想做的事情的目的。一般攻击者常干以下的事情：

• 获取被攻击者本地数据，比如cookies，localStorage
• 劫持前端逻辑
• 发送请求

类型

• 反射性：非持久型，通过URL参数直接注入
• 存储型：持久型，攻击代码存储到后台数据库
• 基于DOM：直接修改脚本页面结构

反射型

访问攻击者留下的链接，或者诱使受害者点击链接。用户点击打开之后，会访问对应的服务器，服务器收到链接请求之后，会将带有XSS攻击的代码发送给用户，用户执行XSS代码，受到攻击。这也就是早年网络流行的整蛊网站的实现方式，以及社会上不让点击陌生不认识链接的原因。

存储型

服务器保存了攻击者写下的攻击代码。这种情况多发生在可以输入评论的文章的地方。这样他人再次看这篇文章的时候，浏览器就会执行这一段代码攻击代码。

基于DOM

基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。

防护方式

目前的浏览器内置了防范xss的措施，例如CSP。
防护的前提就是不相信用户输入的任何东西。所以，对于用于用户输入的任何东西都进行检查，过滤，转义。
在xss防御中，输入的检查一般都是检查用户输入的数据中是否包含<,>等特殊字符。同时将其转义其他字符保存。
在输出的时候也会存在这种问题。因此除去富文本的输出外，其他变量的输出，都要使用XSS编码或转义的方式防御XSS攻击。例如利用 sanitize-html 对输出内容进行有规则的过滤之后再输出到页面中。

CSRF

CSRF，又叫跨站请求伪造。攻击者借用受害者的Cookie 信息，伪造成用于，欺骗服务端，进行操作。从而造成未经授权，在用户不知道的情况下对用户的账户进行操作。

防护

判断Referer

在HTTP协议中，Referer记录了该HTTP请求的来源地址。如果发送请求的网址，不是我们要求的地址（白名单地址），则可以对该次请求不响应。因为攻击者，是在自己的网站，借助受害者的信息，模拟了这样一次请求，所以请求地址还是攻击者自己的网站地址。

使用验证码

在用户处理重要请求的时候，加一个验证码。第三方请求网站是无法获取验证码的，又或者是手机验证码。但是过度的使用验证很影响用户体验，所以作为通用的解决方案。

添加Token验证

CSRF的核心就是攻击者，巧妙的借用了受害者的Cookie信息。达到伪造受害者身份的目的。这时候就需要出现一个他无法拿到的数据。Headers请求头。我们在Headers请求中，加入后台随机生成的字符串。来达到身份验证的作用。同时服务端建立拦截器，验证token，如果请求中没有token或者是token内容不正确，则拒绝该次请求。