温故而知新：前端安全漏洞知识点

前言

在前端开发领域，大多数都是基于浏览器客户端的应用，在这基础上浏览器已经帮我们在系统层面做了诸多的隔离和保护措施来避免一些安全性问题，但是由于网页的开放性以及html，js语言的特性使得有心计的黑客们依然有非常多的可乘之机，今天来梳理一遍跟前端安全有关的知识点。

XSS

XSS介绍

XSS全称是cross-site scripting，称为跨站脚本攻击，由于和前端的CSS(层叠样式表)重名，所以做了区分，它是指利用网页开发时留下来的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

就是黑客利用网页的漏洞，把恶意的代码注入到网页中，用户访问时会执行这些代码，黑客就可以利用这些代码来干一些不法之事了。

攻击手段

对于某个网站，如果在用户评论区提交的数据没有做安全过滤的处理，那么我们就可以把恶意脚本通过评论的方式提交到网站服务器，当其他用户访问网站查看评论的时候，就会执行这段恶意的代码。

防御方式

知道了攻击的原理之后，我们大致可以从两个方面进行预防：

• 对于用户提交的信息，我们需要进行过滤和编码处理，防止恶意的代码被执行

• 用更加安全的方法校验和保护用户的身份凭证，以降低XSS攻击之后带来的危害

具体的操作如下：

1. 使用html转义,对外部插入的内容永远要保存警惕。

2. 开启CSP防护，内容安全策略的设计就是为了防止XSS攻击的，通过在http头部中设置Content-Security-Policy就可以配置该策略

Content-Sucurity-Policy: script-src 'self'

配置后，网站将

• 不允许内联脚本执行
• 禁止加载外域代码
• 禁止外域提交

3. 设置HttpOnly，对于所有包含敏感信息的cookie，都应该在服务端对其设置httpOnly，被设置了httpOnly的cookie字段无法通过JS获取，也就降低了XSS攻击时用户凭据隐私泄漏的风险

CSRF

CSRF介绍

CSRF全称是Cross-site request forgery，称为跨站请求伪造，攻击者诱导用户进入第三方网站，在第三方网站中向被攻击的网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证机制，达到冒充用户对被攻击的网站执行某项有害的操作。

攻击手段

大致的攻击流程如下：

1. 受害者登录被攻击的网站A
2. 受害者以某种方法接触到恶意网站B
3. 在已登录A的前提下同时访问B网站，网站B中的js代码执行，向网站A发送某个请求
4. 由于已经登录过A网站，那么向A发送请求时会把用户的相关凭证一起带上，最后请求会执行成功

这是在受害者完全不知情的情况下，恶意网站向目标网站以受害者的身份进行一些带权限的操作，从而带来一些危害和损失。

防御措施

知道了攻击的手动之后，我们可以从如下方面进行防御：

1. SameSite Cookie

如果能让第三方发起的请求无法携带相关的cookie，那问题就可以很好的解决了，在浏览器中针对cookie提供了SameSite的属性，该属性表示Cookie不能随着跨域请求发送。

2. CSRF Token

除了用cookie进行安全保障外，可以再加上一个校验维度进来，SCRF Token就是这样一种解决方案。

方案的流程大致是：在用户访问网站时，后台服务器根据算法再生产一个Token,然后把这个Token放在seesion中，当网站发起请求时，不仅要携带cookie凭证，还要把这个Token也带上，后台一起校验之后再执行操作。由于SCRF Token是放在session中，因此当第三方网站发起请求时，无法拿到这个CSRF Token，故身份校验不通过。

3. 同源检测

由于CSRF都是通过第三方网站发起，因此我们如果能判断服务器每次收到的请求来自哪个网站(也就是验证referer)，就可以过滤那些存在安全风险网站发起的请求，降低被攻击的风险

4. 增加二次验证

对于一些危险性或敏感性比较高的操作，可以增加用户的二次确认操作，比如发起手机短信或邮箱验证码校验，进而降低CSRF带来的危害。