Vue3 学习笔记（进阶_十八）——XSS安全与预防CSRF/XSRF

一、概念：

1、XSS（Cross Site Scripting）：跨站脚本攻击

  XSS攻击 通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash ，甚至是普通的HTML。

2、CSRF/XSRF（Cross-site request forgery）：跨站请求伪造

  CSRF/XSRF攻击 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

3、XSS攻击 与 CSRF/XSRF攻击 的区别

  XSS攻击 利用的是用户对指定网站的信任；

  CSRF/XSRF攻击 利用的是网站对用户网页浏览器的信任。

二、XSS安全指导思想：

1、尽量不使用用户提供的HTML、css、js内容：

  1）HTML 内容 被注入

  下面Html中的userProvidedString参数为用户可编辑内容：

<h1>{{ userProvidedString }}</h1>

...
userProvidedString:'<script>alert("hi")</script>'  // 用户给userProvidedString赋值为“一个窗体”

  2）URL 被注入

  下面Html中的userProvidedUrl参数为用户可编辑内容：

<a :href="userProvidedUrl">click me</a>

...
userProvidedUrl:'用户自定义的危险的Url'

  3）Attribute 绑定 被注入

  下面Html中的userProvidedString参数为用户可编辑内容：

<h1 :title="userProvidedString">
  hello
</h1>

...
userProvidedString:'" onclick="alert(\'hi\')'  // 用户给userProvidedString赋值了一个弹出窗体的事件

  4）CSS 样式 被注入

  下面Html中的userProvidedString参数为用户可编辑内容：

<a :href="sanitizedUrl" :style="userProvidedStyles">click me</a>
<a :href="noSanitizedUrl" :style="styles1">no click me</a>
...
<style>{{ userProvidedStyles }}</style>  // 用户可以自定义css达到访问sanitizedUrl确访问了noSanitizedUrl达到危险操作的效果。

  5）JavaScript 被注入

  下面Html中的userProvidedScript参数为用户可编辑内容：

<script>{{ userProvidedScript }}</script>

...
userProvidedScript:alert("hi");  // 用户注入的危险js

2、使用用户提供的HTML、css、js内容时需要对内容做校验。特殊情况可以巧妙使用沙盒环境。

3、使用用户提供的HTML、css、js内容时，最好是提前上传保存好，在上传时就做校验；用户提供的内容需要公开对外展示的还需要工作人员进行审核。

4、不要将 Vue 挂载到可能包含服务端渲染或用户提供内容的 DOM 节点上：攻击者提供的 HTML 可能在普通 HTML 中是安全的，但在 Vue 模板中是不安全的，这就会导致漏洞。

三、XSS安全指导手册

1、HTML5 安全手册

2、OWASP 的跨站脚本攻击 (XSS) 防护手册

四、预防CSRF/XSRF

  类似跨站请求伪造 (CSRF/XSRF) 和跨站脚本引入 (XSSI) 这样的 HTTP 安全漏洞，主要由后端负责处理，因此它们不是 Vue 职责范围内的问题。但是，你应该与后端团队保持沟通，了解如何更好地与后端 API 进行交互。

1、检查Referer字段

  HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。

POST /bank/transfer.aspx HTTP/1.1
Referer: http://evilsite.com/myevilblog
User-Agent: Mozilla/4....
Host: www.altoromutual.com
Content-Length: 42
Cookie: SessionId=x3q2v0qpjc0n1c55mf35fxid;

  在处理敏感数据请求时，通常来说，Referer字段应和请求的地址位于同一域名下。而如果是CSRF攻击传来的请求，Referer字段会是包含恶意网址的地址，这时候服务器就能识别出恶意的访问。不过由于 http 头在某些版本的浏览器上存在可被篡改的可能性，所以这个解决方案并不完善。

2、添加校验token（敏感操作页面）

  令牌解决方案向页面表单添加一个参数，让表单在用户注销时或一个超时期限结束后过期。当客户端通过页面提交请求时，这个令牌参数也一并提交上去以供校验。如下图：xsrftoken（或者使用useId等有意义的令牌）

<form id="transferForm">
<input type="hidden" name="xsrftoken" value="JKBS38633jjhg0987PPll">
<input type="submit" value="Submit">
</form>

3、ASP.NET框架下的案例：后补

五、Web安全的其他知识点：

  SQL注入、流量劫持、DDoS（分布式拒绝服务）