前言

随着前端的发展，现在应用越来越庞大，而大前端的时代，也让前端独立起来，复杂起来，重要起来，而前端信息被盗用，很容易就出现严重的情况，比如信息泄露，资金损失等等，所以前端安全也是必不可少的。

xss

xss跨站脚本攻击，是目前也是一直最流行的攻击方式，而它主要对html或js注入恶意代码，被执行后向目标服务器发送内容或篡改内容，以达到攻击的效果。

xss攻击又分三种，DOM xss、反射型XSS、存储型XSS。
而他们的最终目的都是向html或js注入代码，所以只要防御好注入代码不被执行即可。

防御:

  1. 前端在解析html时对外部来源的代码进行HtmlEncode既实体字符转换，对js进行JavaScriptEncode既特殊字符进行16进制转换，以达到外部来源的代码不能以代码自执行的方式被使用。
  2. 前后端通讯时后台也要对数据的特殊字符进行处理，以免回传到前端时被自动使用执行而入侵。
  3. cookie信息安全，由于cookie在前端很容易被获取，而权限泄露，所以对cookie设置HttpOnly属性，让前端无法获取到cookie，从而无法泄露出去。

iframe

iframe框架，一般都是为了让第三方的页面功能可以正常的嵌套在自己项目的页面里，以达到添加的功能，典型的例子是使用iframe在页面上添加第三方提供的广告、天气预报、社交分享插件等等。

防御:
html5对iframe提供了sandbox的安全属性，实现“最小权限“原则，这样就可以最大限制各方面的问题。

1
<iframe sandbox src="..."> ... </iframe>

sandbox

CSRF

CSRF跨站点请求伪造,冒充用户进行一些违背用户操作行为的事。
可能会造成以下影响：

  1. 利用已通过认证的用户权限更新设定信息等；
  2. 利用已通过认证的用户权限购买商品；
  3. 利用已通过的用户权限在留言板上发表言论。

CSRF就是劫持http上的登陆权限，然后冒充用户进行非法操作。

防御:

  1. 验证码:强制用户进行交互行为，以达到在终端使用。
  2. 使用post方法传递参数，get方法参数在url上很容易被劫持。
  3. Referer来源限制，这个方法有缺陷，比如Referer丢失之类的，所以有点没有保障，而且也有可能被伪造。
  4. Token这是最优的解决方式，现在比较流行JWT。

点击劫持

利用透明的按钮或连接做成陷阱，覆盖在 Web 页面之上。然后诱使用户在不知情的情况下，点击那个连接访问内容的一种攻击手段。也叫界面伪装。
就是把目标页面放到iframe里，然后顶层为透明层，诱惑用户点击，触发透明层。

防御:
X-FRAME-OPTIONS；
X-FRAME-OPTIONS HTTP 响应头是用来给浏览器指示允许一个页面可否在\<frame>, \<iframe> 或者 \<object> 中展现的标记。网站可以使用此功能，来确保自己网站内容没有被嵌到别人的网站中去，也从而避免点击劫持的攻击。

错误MIME types被执行

有些攻击会用上传文件之类的，然后在后台里储存，当被前端终端读取后，由于终端的智能手段，把把它转换为可执行的类型进行执行，想想就可怕，如某网站允许用户在评论里上传图片，攻击者在上传图片的时候，看似提交的是个图片文件，实则是个含有JavaScript的脚本文件。该文件逃过了文件类型校验（这涉及到了恶意文件上传这个常见安全问题，但是由于和前端相关度不高因此暂不详细介绍），在服务器里存储了下来。接下来，受害者在访问这段评论的时候，浏览器会去请求这个伪装成图片的JavaScript脚本，而此时如果浏览器错误的推断了这个响应的内容类型（MIME types），那么就会把这个图片文件当做JavaScript脚本执行，于是攻击也就成功了。

防御:
通过设置X-Content-Type-Options这个HTTP Header明确禁止浏览器去推断响应类型。

不安全的第三方依赖包

现如今进行应用开发，就好比站在巨人的肩膀上写代码。据统计，一个应用有将近80%的代码其实是来自于第三方组件、依赖的类库等，而应用自身的代码其实只占了20%左右。无论是后端服务器应用还是前端应用开发，绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。

比如vue的生态包就出现过被黑的情况，安装包时 event-stream 包突然多出了一个名为 flatmap-stream 的依赖项，而这个依赖项正在窃取用户的数字货币。

而依赖使用这些流行框架影响会很大。

防御:
只能实时留意网上信息的动态，与使用安全工具对其进行扫描，以防万一，因为三方库都是很多人使用的，有问题会第一时间提出并修改。

HTTPS被拦截降级为HTTP

HTTPS是在HTTP上加TLS安全传输层，TLS是建立在传输层TCP协议之上的协议，服务于应用层，它的前身是SSL，它实现了将应用层的报文进行加密后再交由TCP进行传输的功能。
但有TLS还是可能被攻击的，黑客可以利用SSL Stripping这种攻击手段，强制让HTTPS降级回HTTP，从而继续进行中间人攻击。

问题的本质在于浏览器发出去第一次请求就被攻击者拦截了下来并做了修改，根本不给浏览器和服务器进行HTTPS通信的机会。大致过程如下，用户在浏览器里输入URL的时候往往不是从https:\//开始的，而是直接从域名开始输入，随后浏览器向服务器发起HTTP通信，然而由于攻击者的存在，它把服务器端返回的跳转到HTTPS页面的响应拦截了，并且代替客户端和服务器端进行后续的通信。由于这一切都是暗中进行的，所以使用前端应用的用户对此毫无察觉。

防御:
使用HSTS,它通过下面这个HTTP Header以及一个预加载的清单，来告知浏览器在和网站进行通信的时候强制性的使用HTTPS，而不是通过明文的HTTP进行通信：

1
Strict-Transport-Security: max-age=<seconds>; includeSubDomains; preload

Strict-Transport-Security

敏感信息、错误信息暴露

  1. 由于程序员疏忽直接在页面的js以及AJAX请求返回的内容中输出参与评论用户的敏感信息，导致攻击者可以轻松获取用户的手机号，真实姓名，注册邮箱，住址甚至有可能获取用户手机的IMEI，和抽奖和抽中的游戏礼包号。泄露内容千奇百怪，遇到此类问题时，看着泄露的内容时常会被雷到。
    而这些敏感信息很容易就会获取到客户信息。

  2. 由于后台的疏忽，经常会出现堆栈信息被打印到页面，而这也是很容易很推断某些信息，而进行他想的攻击。

防御:

  1. 使用不对称密钥进行加密。
  2. 过滤堆栈信息，打印友好话术信息。