这一篇博客将就前端中出现的一些安全问题做简要的介绍，同时介绍各个安全问题目前的常见解决方案

XSS跨站脚本攻击

介绍

跨站脚本攻击主要指的是：用户在网站中注入了一些恶意代码，并使其执行，以达到一些恶意作用

核心包括两点：

在网站中注入恶意代码
让恶意代码跑起来

例如，对于Vue项目，我们可能使用v-html解析一些从后端返回的HTML模板并渲染成HTML标签，但如果这些标签里面含有JS代码，则可能导致这些代码运行

下面的这个例子就是：用户输入了一个img标签，并且在onload的时候执行代码，会让用户被迫跳转去一些页面

<img style='position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 9999999;' src='https://res.lgdsunday.club/virus.jpg' onload='alert("此处会注入一段代码，即 xss 攻击。这段攻击会导致页面跳转至特定网站"); window.location.href="https://www.imooc.com"'/>

防范

针对XSS攻击的核心，我们可以反其道而行之，从而解决这个问题

在网站中注入恶意代码：不给用户注入恶意代码，例如不给用户输入HTML标签，B站用的就是这个方法
让恶意代码运行：不让代码运行即可，这个可以用一些插件，例如下面的DOMPurify

DOMPurify这个包可以剔除HTML中所有的可能危险的属性和内容，只留下安全部分，使用的是sanitize方法

DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // becomes <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // becomes <ul><li><a href="//google.com">click</a></li></ul>

CSRF跨站请求伪造

介绍

跨站请求伪造指的是：利用用户已经登录的一些网站的信息，在用户不知情的情况下，做一些非法操作

常见的比如伪造官网，让用户去输入个人信息

CSRF这种攻击方式本质上是利用了HTTP不验证请求来源的漏洞

防范

针对CSRF攻击特点，我们可以知道，最大的漏洞就是HTTP不验证请求来源，因此防范方法就是在请求中要携带身份验证信息，即现在比较常用的token

因为token一般是用户登录的时候存储在本地的，所以CSRF没有办法去获取

点击劫持Clickjacking

介绍

点击劫持即：在用户点击某些区域时，劫持这个点击事件，触发其他一些非法操作

例如一个抽奖页面的“点击抽奖”按钮下方，添加了一个opacity为0的图片，而图片有一个点击事件，可以通过接口发送用户本地存储的信息

防范

从攻击方式考虑，点击劫持的防范也是两种方法：

用户自己避免点击
不允许触发劫持的点击事件，这个一般要用劫持防御策略实现，例如下面提到的内容安全策略CSP

其他常见安全防护方案

内容安全策略CSP

内容安全策略是在网页上添加一个安全层，用来检测并削弱某些特定类型的攻击，例如XSS、数据注入等

实现起来一般是在HTML中添加一个meta标签

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self' 'unsafe-eval' 'unsafe-inline';connect-src 'self' localhost:3007;  ">

这一段的含义是：

default-src 'self' 'unsafe-eval' 'unsafe-inline'：默认策略，限制页面可以加载的资源，只能下载本域，可执行unsafe-eval脚本以及可应用的内联样式表
connect-src 'self' localhost:3007：限制页面的连接，只能和本域名以及localhost:3007

这样一来，虽然XSS攻击不生效，但是同样，项目正常的一些访问也会被阻止，为此需要放开限制

<meta http-equiv="Content-Security-Policy"
    content="default-src 'self' 'unsafe-eval' 'unsafe-inline'; img-src 'self' data: *; connect-src 'self' localhost:3007;  ">

img-src规定了可以加载的图片来源

但是这样一修改，XSS攻击也抵御不了了

因此一般来说，内容安全策略的理论性高于实践意义

严格传输安全HSTS

这个方案配置在服务端，是HTTP的响应标头，用来通知浏览器应该只能通过HTTPS访问站点，并且所有HTTP访问的都会自动重定向到HTTPS

JS综合解决方案3——前端安全解决方案