这是我参与「第五届青训营」笔记创作活动的第 13 天
前言
前端安全这一话题相信大家并不陌生，这是前端领域必不可少的一个话题，前端的安全问题可以是体现在浏览器数据交互的时候，可以是用户提交某一些数据的时候，因为用户的操作失误或是程序的bug从而导致整个程序崩溃甚至是导致用户信息泄露；本篇文章将会为大家介绍前端领域的常见的两个可能遭受的攻击——XSS攻击与CSRF攻击。
攻击方式
XSS攻击
XSS（Cross Site Scripting）攻击，被称为跨站脚本攻击。顾名思义，跨站脚本攻击表示在自己的网站中使用到了别的网站的代码，攻击会在一些请求数据中注入脚本，从而当用户在浏览页面的时候就会遭受到攻击。
XSS的攻击方式分为以下两种
-
存储型XSS攻击：存储到DB后读取时注入恶意脚本，比如在一些评论区或者个性签名等可以自由编写的地方，在评论的时候写一段script脚本，这样数据就会被保存到数据库，当别人访问时，加载这段评论时，浏览器就会识别为一段javascript脚本代码来执行，并且只要不删除，就一直在，危害较大。 -
反射型XSS攻击：是通过URL参数直接注入，一般是使用alert来探测站点是否防御，直接攻击的使用src来引入自己的脚本。 -
基于DOM的XSS攻击--- 网络劫持，修改页面后，再让用户看到。
XSS攻击可能造成的问题
黑客通过XSS攻击可以非法的伪造一些虚假的页面诱导用户输入真实的信息，从而导致用户的信息泄露，造成无法挽回的后果；总而言之就是XSS攻击可以针对页面的DOM数进行修改，通过页面的事件来获取用户信息。
CSRF攻击
CSRF（Cross-site request forgery）攻击，被称为跨站请求伪造。光听名字可能大家会认为与XSS攻击是类似的，其实所谓的跨站请求伪造，就是黑客通过某种方式引诱用户前往一个陌生的网站填写用户信息，并且向被攻击网站发送一个请求，因为此时的用户信息是正确的，所以请求就会被通过，因此陌生网站就可以利用此方式登录到用户的个人页面中，导致用户信息的泄露。
CSRF攻击的特点
- 攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。
- 攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。
- 整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”。
- 跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪。
总结
本次关于前端常见的两个安全问题就为大家分享那么多，除了以上提到的两个前端安全问题还有许多值得了解的问题例如SQL脚本注入、Dos泛洪攻击等等，这些问题作为一名合格的前端开发工程师是有必要去了解的，青训营的课程中同样为大家介绍了很多前端安全相关的问题，非常推荐大家一起学习。
