常规前端安全问题

在前端应用中我们常遇见的安全问题：

  • 跨站脚本攻击（xss）
  • 跨站请求伪造（csrf）
  • 点击劫持攻击
  • 中间人劫持

什么是XSS攻击

XSS跨站脚本攻击是攻击者向页面写入他的恶意代码获取用户的敏感信息例如登录信息等。 一般根据攻击来源的不同分为三种：

  • 储存型XSS攻击：攻击者利用站点漏洞将一段恶意代码提交到了网站服务端的数据库，然后用户向网站请求了包含这段恶意代码的页面，当用户浏览这个页面的时候，恶意的代码脚本就将用户的一些敏感信息暴露出去。
  • 反射型XSS攻击：通常攻击者将恶意代码放在了跳转的URL地址的参数上，当站点获取参数并把它拼接到HTML上，然后在浏览器上执行，受到攻击。
  • DOM型XSS攻击：相比较前面两个DOM攻击不涉及服务器，攻击者通过各种手段将恶意脚本注入到页面中，比如网络劫持在页面传输的过程中将恶意代码插入其中，这种类型的劫持有很多方式实现，比如WIFI路由器劫持的，本地恶意软件劫持等等，都是在web页面传输中或者用户使用页面的过程中修改了页面的数据。

如何预防XSS攻击

XSS攻击有两大要素：攻击者提交注入恶意代码，浏览器执行恶意代码。

  • 对于用户输入永远保持不信任，最普遍的做法就是转义用户的输入输出内容，对用户的输入信息进行过滤，防止攻击者提交恶意代码。
  • 充分利用CSP（内容安全策略），它本质上就是建立白名单，明确的告诉浏览器那些外部资源可以加载和执行，我们只需要配置规则，浏览器会自己实现拦截。

csp可以通过2种方式开启：

  1. 设置HTTP Header中的 Content-Security-Policy
 Content-Security-Policy: default-src 'self' // 只允许加载本站资源
 Content-Security-Policy: img-src https://* // 只允许加载 HTTPS 协议图片
 Content-Security-Policy: child-src 'none' // 允许加载任何来源框架复制代码
  1. 设置meta标签的方式
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">复制代码

配置策略可以查看内容安全策略文档

  • 设置Cookei HttpOnly web应用程序在设置cookei时，将其属性设置为HttpOnly，可以避免cookei被恶意脚本获取。

什么时CSRF

CSRF名为跨站请求伪造，原理就是攻击者构造一个后端请求地址，诱导用户点击或者通过钓鱼网站发起请求，如果用户在登录状态下，后端就认为是用户在操作，从而进行响应的逻辑操作。

<!DOCTYPE html><html><body>
  <h1>黑客的站点：CSRF攻击演示</h1>
  <form id='hacker-form' action="https://time.geekbang.org/sendcoin" method=POST><input type="hidden" name="user" value="hacker" /><input type="hidden" name="number" value="100" />
  </form>
  <script> document.getElementById('hacker-form').submit(); </script></body></html>复制代码

在这段代码种，攻击者在他自己的页面种构建了一个隐藏的表单，当用户点开这个网站，表单会自动提交，会带上对应的Cookei就实现了跨站点POST数据提交。

如何防范CSRF

上面我们知道攻击者一般是通过利用用户登录态发起CSRF攻击的，而Cookei正是浏览器与服务器之前维护登录态的一个关键数据。

  1. 如果是第三方站点发起的请求，那么浏览器就禁止发送某些关键的Cookei数据到服务器,在HTTP响应头中，通过set-cookei字段设置cookei时，可以带上SameSite选项，禁止第三方Cookei。
  2. 验证请求的来源站点，服务端可以通过HTTP请求头的Referer和Origin属性来判断来源地址，规避第三方网站的请求。
  3. 添加CSRF-Token发送请求时以参数的形式加入一个token，服务器验证这个token是否有效。

点击劫持

原理：点击劫持是一种视觉欺骗的攻击手段，攻击者将需要攻击的网站通过iframe嵌套的方式嵌入到自己的网页中，并将iframe设置为透明，在页面中透出一个按钮诱导用户点击。

防御方法：

  • **X-FRAME-OPTIONS：**HTTP响应头属性可以很好的防御点击劫持，有三个值：DENY(始终禁止在 frame 中显示此页面。),SAMEORIGIN(允许在和父文档同源的 frame 中显示此页面。),ALLOW-FROM domain(允许在来自给定域的父文档的 frame 中显示此页面。)

中间人劫持

中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让双方认为连接是安全的，但是实际上整个通信都被攻击者控制了，攻击者不仅能获得双方的通信信息，还能修改通信信息。

防御方式：

  • 使用HTTPS，HTTPS协议是HTTP协议的基础上增加了SSL层，SSL层依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。这样一来，即使攻击者截取用户发出的请求信息，也无法解密信息，更无法篡改信息。