web安全XSS攻击可以分为3类：反射型（非持久型）、存储型（持久型）、基于DOM。在 HTML 中内嵌的文本中，恶意

XSS

一、概念

XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。

二、有哪几种类型

XSS攻击可以分为3类：反射型（非持久型）、存储型（持久型）、基于DOM。

反射型

反射型 XSS 只是简单地把用户输入的数据 “反射” 给浏览器，这种攻击方式往往需要攻击者诱使用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。

存储型

存储型 XSS 会把用户输入的数据 "存储" 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。

比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，
文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的
JavaScript 代码

基于DOM

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

三、XSS 有哪些注入的方法：

在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
在 onload、onerror、onclick 等事件中，注入不受控制代码。
在 style 属性和标签中，包含类似 background-image:url("javascript:..."); 的代码（新版本浏览器已经可以防范）。
在 style 属性和标签中，包含类似 expression(...) 的 CSS 表达式代码（新版本浏览器已经可以防范）。

四、如何进行有效的XSS防范？

主流的浏览器内置了防范 XSS 的措施：CSP

使用Content-Security-Policy ：Policy 来制定策略
+1、禁止加载外域代码，防止复杂的攻击逻辑。
-Content-Security-Policy: default-src 'self'

+2、禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
-Content-Security-Policy: default-src 'self' *.trusted.com

+3、禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
-Content-Security-Policy: script-src <source> <source>;

+4、禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。

+5、合理使用上报可以及时发现 XSS，利于尽快修复问题。
-Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi

HttpOnly 防止劫取 Cookie

输入检查

   1、输入内容长度控制
   2、encode filter过滤：
   // vuejs 中的 decodingMap
   // 在 vuejs 中，如果输入带 script 标签的内容，会直接过滤掉
   const decodingMap = {
     '&lt;': '<',
     '&gt;': '>',
     '&quot;': '"',
     '&amp;': '&',
     '&#10;': '\n'
   }

举个🌰=》vue安全处理 xss 库过滤白名单

输出检查 用户的输入会存在问题，服务端的输出也会存在问题。一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击。例如利用 sanitize-html 对输出内容进行有规则的过滤之后再输出到页面中

CSRF

一、什么是CSRF？

CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作

一个典型的CSRF攻击有着如下的流程：

受害者登录a.com，并保留了登录凭证（Cookie）。攻击者引诱受害者访问了b.com。
b.com 向 a.com 发送了一个请求：a.com/act=xx。
a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
a.com以受害者的名义执行了act=xx。攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

举个🌰=》

二、几种常见攻击类型

GET类型的CSRF

<img src="http://bank.example/withdraw?amount=10000&for=hacker" >

POST类型的CSRF

<form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

链接类型的CSRF

<a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
  重磅消息！！
  <a/>

三、如何进行CSRF的防范

a、阻止不明外域的访问:`同源检测`

Origin Header

注意的点：

IE11同源策略:IE 11 不会在跨站CORS请求上添加Origin标头，Referer头将仍然是唯一的标识。
302重定向

在302重定向之后Origin不包含在重定向的请求中，因为Origin可能会被认为是其他来源的敏感信息。
对于302重定向的情况来说都是定向到新的服务器上的URL，因此浏览器不想将Origin泄漏到新的服务器上

Referer Header

注意的点： 部分情况下攻击者隐藏Referer 不同浏览器对其是Referer实现不同，会有丢失的情况

b、 `验证码`

验证码被认为是对抗 CSRF 攻击最简洁而有效的防御方法。

从上述示例中可以看出，CSRF 攻击往往是在用户不知情的情况下构造了网络请求。而验证码会强制用户必须与应用进行交互，才能完成最终请求。因为通常情况下，验证码能够很好地遏制 CSRF 攻击

c、 `添加 token 验证`

CSRF 攻击之所以能够成功，是因为攻击者可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 Cookie 中，因此攻击者可以在不知道这些验证信息的情况下直接利用用户自己的 Cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，并且该信息不存在于 Cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

总结

XSS 攻击和 CSRF 攻击的常见防御措施：

1、防御 XSS 攻击

HttpOnly 防止劫取 Cookie
用户的输入检查
输出检查

2、防御 CSRF 攻击

验证码
同源检测
Token 验证

参考链接:

[如何防止XSS攻击？](https://www.cnblogs.com/meituantech/p/9718677.html)
[如何防止CSRF攻击](https://juejin.cn/post/6844903689702866952)
[浅说 XSS 和 CSRF](https://juejin.cn/post/6844903689702866952)

web安全

XSS