前后端安全分类：
1、前端安全：发生在浏览器、单页面应用、web页面的安全问题，比如跨站脚本攻击xss就是前端安全问题
2、后端安全：发生在后端服务器、应用、服务当中的安全问题，比如：SQL注入漏洞发生在后端
前端安全攻击手段
1、XSS攻击
2、CSRF攻击
3、点击劫持
4、iframe带来的风险
5、不安全的第三方依赖包
XSS攻击
XSS 即（Cross Site Scripting）中文名称为：跨站脚本攻击。
恶意攻击者在web页面中会插入一些恶意的script代码。当目标网站、目标用户浏览器渲染HTML文档的过程中，出现了不被预期的脚本指令并执行时，XSS就发生了，因此达到恶意攻击用户的目的。
根据攻击的来源，XSS 攻击可分为反射型、存储型和 DOM 型三种：
反射型XSS：发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，故叫反射型XSS。
1、用户A给用户B发送一个恶意构造了Web的URL。
2、用户B点击并查看了这个URL。
3、用户B获取到一个具有漏洞的HTML页面并显示在本地浏览器中。
4、漏洞HTML页面执行恶意JavaScript脚本，将用户B信息盗取发送给用户A，或者篡改用户B看到的数据等
反射型XSS防御：
我们可以通过html转义来防范，最好是采用成熟的转义库处理
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞的网站，Web B为攻击者构建的恶意网站，User C为Web A网站的合法用户
存储型XSS：存储型XSS和反射型XSS的差别仅在于，提交的代码会存储在服务器端，下次请求目标页面时不用再提交XSS代码，这样，每一个访问特定网页的用户都会被攻击
1、用户A在网页上创建了某个账户，并且账户信息中包含XSS代码。
2、用户B访问该网站查看XSS代码账户详情页面。
3、服务端返回账户详情页面，和带XSS账户信息。
4、用户B浏览器执行XSS代码，将用户B信息盗取发送给用户A，或者篡改用户B看到的数据等。
存储型XSS攻击防范：
1. 后端需要对提交的数据进行过滤。
2. 前端也可以做一下处理方式，比如对script标签，将特殊字符替换成HTML编码这些等。
DOM-based型XSS：DOM型XSS是基于DOM文档对象模型的一种漏洞,通过 HTML DOM，通过植入js代码，造成dom的更改，因此造成了XSS-DOM漏洞，所以DOM类型的XSS可能是反射型也可能是储存型
1、用户B访问网站url中带有XSS代码参数。
2、浏览器下载该网站JavaScript脚本。
3、JavaScript脚本有个方法获取URL中XSS代码参数，并且用innerHtml渲染在dom中。
4、触发XSS代码，造成XSS攻击，cookie数据失窃。
DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。
DOM 型 XSS防御：
1、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
2、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
3、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
4、Http Only cookie
5、对产品输入要求格式严谨检查过滤
CSRF攻击
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞的网站，Web B为攻击者构建的恶意网站，User C为Web A网站的合法用户
CSRF攻击防御：
1、验证 HTTP Referer 字段
2、使用 token验证
3、显示验证方式：添加验证码、密码等
4、涉及到数据修改操作严格使用 post 请求而不是 get 请求
点击劫持攻击：
点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe，覆盖在一个网页上，然后诱使用户在网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。
一个简单的点击劫持例子，就是当你点击了一个不明链接之后，自动关注了某一个人的博客或者订阅了视频
点击劫持防御
1、X-Frame-Options浏览器机制：X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面能否在、