1、XSS：跨站脚本攻击

就是攻击者想尽一切办法将可以执行的代码注入到网页中。攻击者在web页面恶意插入HTML或script标签，当用户浏览该页面时，恶意代码就会被执行，从而达到攻击的目的。XSS利用的是用户对指定网站的信任。

比如：攻击者在qq中发送一个看似安全的链接，骗取用户点击之后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为信任的站点。

1.类型

反射型(非持久服务端)：攻击者事先制作好攻击链接,需要欺骗用户自己去点击链接才能触发XSS代码，所谓反射型XSS就是将恶意用户输入的js脚本，反射到浏览器执行。
储存型(持久型服务端)：会把攻击者的数据储存到服务端，攻击行为将伴随攻击数据一直存在，每当用户访问该页面就会触发代码执行。
DOM型（浏览器端）：基于文档对象模型的漏洞。取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

2.危害

盗取网页浏览中的cookie值，盗用cookie实现无密码登录，盗取用户信息。

劫持访问，实现恶意跳转。

配合CSRF攻击完成恶意请求。

3.防御方法

标签过滤，如<script>、<img>、<a>标签等
对数据进行严格的输出编码，对字符< 、>、&、" 、' 、+、/等进行转义。
开启浏览器XSS防御：Http Only cookie，禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
纯前端渲染，明确innerText、setAttribute、style，将代码与数据分隔开。
避免拼接HTML；Vue/React 技术栈，避免使用 v-html / dangerouslySetInnerHTML
尽量采用post而非get提交表单

2、CSRF：跨站请求伪造

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。（通过伪造连接请求，在用户不知情的情况下，让用户以自己的身份来完成非本意操作的攻击方法。CSRF利用的是网站对浏览器的信任。）

攻击类型

i）GET型：如在页面的某个 img 中发起一个 get 请求
ii）POST型：通过自动提交表单到恶意网站
iii）链接型：需要诱导用户点击链接

预防方案：

CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。）

验证码：对敏感操作加入验证码，强制用户与网站进行交互
对Cookie设置SameSite属性。该属性表示Cookie不随着跨域请求发送，可以很大程度减少CSRF的攻击，但是该属性目前并不是所有浏览器都兼容。
使用POST请求，避免使用GET，降低攻击风险，post请求攻击方需要构造一个form表单才可以发起请求，比get请求（img的src，a标签的href等等）的攻击方式复杂了一些，相对来说能降低风险，但不能阻止。
只允许GET请求检索数据，但是不允许它修改服务器上的任何数据
检查HTTP中的referer字段，该字段记录了HTTP请求的来源地址
可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
在http中自定义属性并验证。
为页面增加随机数

当用户访问站点时，该站点应该生成一个（密码上很强壮的）伪随机值，并在用户的计算机上将其设为cookie。站点应该要求每个表单都包含该伪随机值（作为表单值和cookie值）。当一个POST请求被发给站点时，只有表单值和cookie值相同时，该请求才会被认为是有效的。

.XSS与CSRF有什么区别吗？

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

登录受信任网站A,并在本地生成cookie。

在不登出A的情况下，访问危险网站B。

3、点击挟持

ClickJacking点击劫持

当访问某网站时，利用CSS将攻击者实际想让你点击的页面进行透明化隐藏，然后在页面后显示一些东西诱导让你点击，点击后则会在用户毫不知情的情况下做了某些操作，这就是点击劫持ClickJacking。
案例：当我们点击弹窗右上角的"X"想关闭弹窗事，跳转到其他页面。

iframe覆盖

第三方网站通过iframe内嵌某一个网站，并且将iframe设置为透明不可见，将其覆盖在其他经过伪装的DOM上，伪装的可点击DOM（按钮等）与实际内嵌网站的可点击DOM位置相同，当用户点击伪装的DOM时，实际上点击的是iframe中内嵌的网页的DOM从而触发请求操作。

以下是几种预防点击劫持的方法：
1.X-Frame-Options HTTP 响应头
可以使用 X-Frame-Options 响应头，限制特定页面在 iframe 中打开。可以使用以下响应头：
SAMEORIGIN：允许页面在相同域名下的任何 iframe 中打开。
DENY：不允许页面在任何 iframe 中打开。
ALLOW-FROM uri：允许页面在指定来源的 iframe 中打开。
2.JavaScript 防御脚本
可以使用 JavaScript 脚本来防止 iframe 的钓鱼攻击。该方法的实现原理是检查当前的页面是否在顶层窗口中运行，或者在特定的 frame 中运行。
3.CSP(Content-Security-Policy)
CSP 是一种响应头，通过指定允许在页面中运行的可信源列表来限制页面使用的内容和资源。通过配置CSP，可以防止恶意攻击者插入恶意脚本的能力。不过在实际实现中，需要进行不少工作，包括了解承载应用程序的网络拓扑，掌握应用程序的功能，了解如何针对现有攻击使用 CSP。
4.HTML5 中添加 Sandox 属性
在 HTML5 中，可以通过添加Sandox属性来设置同源策略。该属性防止 iframe 中的内容访问父窗口的 Cookies、localStorage 和其他数据，从而防止攻击者访问受害者的会话 ID 以及其他敏感信息。