面试官问:你知道前端安全问题有哪些吗

104 阅读5分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

前端安全相关大体上可分为3类,XSS(跨域脚本攻击)、CSRF(跨站请求伪造)、网络传输安全(中间人攻击)。本文就让我们一起探索一下吧

1. XSS(跨域脚本攻击)

XSS(Cross-site scripting)是跨域脚本攻击的简写,攻击者想尽一切方法 将一段脚本内容放到目标网站的目标浏览器上解释执行。攻击者将恶意脚本输入到目标网站中。 当其他用户访问该网站的时候,由于浏览器不知道它是由网站提供服务的脚本还是攻击者埋入的脚本,因此将执行此该脚本。攻击者就可以很容易利用埋入的脚本进行攻击。

如下图:

无标题_看图王.png

  1. 攻击者编写恶意攻击的脚本
  2. 攻击者访问前端页面,在输入框中输入编写好的恶意脚本
  3. 攻击者将恶意脚本进行提交,后端将恶意脚本存储在数据库中
  4. 当某些合法用户访问该网站的时候,该网站会获取存储在数据库中的恶意脚本,但是浏览器不知道它是恶意脚本所以执行了。

其实就相当于攻击者在用户端的页面上注入了一段脚本,有了这段脚本攻击者就可以为所欲为了。

例如:

  • 博客中插入恶意
  • 发布博客,一旦有人查看,就能获取查看者的cookie到攻击者服务器中

防范措施

  1. 永远不要相信用户的输入,对用户输入的特殊字符串进行转译(如用&lt;替换<),针对用户的输入设置标签白名单

  2. cookie设置HttpOnly,配合token或验证码防范

  3. 设置CSP(Content-Security-Policy)安全策略-主要用来限制资源获取和报告资源获取越权

    可以通过两种方式设置CSP,一种是meta标签,一种是HTTP响应头

    1. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

    2. 设置为只支持外链的方式引入的script,其余内联script标签不能执行,这就阻止了xss,同时也限制了我们开发只能外链写入js

      image.png

      下面这种设置,除了阻止内联js,还可以阻止外链非本域名

      image.png

      但这种方案对表单没用,action还是可以跳转到其他域名,表单要加上form-action 'self'

      image.png

2. CSRF(跨站请求伪造)

跨站请求伪造 Cross-site request forgery。CSRF是跨站请求伪造 的简写,一种诱骗受害者提交恶意请求的攻击,攻击者盗用了你的身份,以你的名义发送恶意请求,请求到达后端时,服务器将无法区分恶意请求和合法请求。CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账等。

整体过程如下图:

无标题_看图王(1).png CSRF攻击必须具备两个流程

  1. 登录受信任网站A,并在本地生成Cookie。
  2. 在不登出A的情况下,访问危险网站B。

例如:

防范措施

  1. 同源检测,直接禁止外域(受信域可以开白名单)对我们发起请求。Referer验证,服务器判断页面来源,页面来源于网站A下的站点才允许访问
  2. Token验证,Cookie可以自动携带,Token不会自动携带。把Token以参数的形式加入请求了,提交给服务器的时候,服务器需要判断Token的有效。
  3. Cookie属性Samesite ,Samesite=Strict只允许同源网站提交请求携带cookie

CSRF和XSS区别

  • XSS

    • 向页面注入js去运行,在函数体中做黑客想做的事
  • CSRF

    • 利用网站A本身的漏洞去自动执行网站A的某些接口,依赖于用户必须登录过网站A一次

3. 网络传输安全

中间人 (Man-in-the-middle attack, MITM) 是指攻击者与通讯的两端分别创建独立的联系, 并交换其所收到的数据, 使通讯的两端认为他们正在通过一个私密的连接与对方直接对话, 但事实上整个会话都被攻击者完全控制. 在中间人攻击中, 攻击者可以拦截通讯双方的通话并插入新的内容。

image.png

例如: http请求的抓包,其实就是一种中间人攻击。http是明文传输,被抓包时可以拿到所有信息

  • 那么有了https网络传输安全问题就迎刃而解了呢,即使被中间人拦截了,数据也是加密的,无法被中间人攻击吗?如下图确实是密文无法识别。

image.png

  • 但是并非如此,因为当我们在抓包软件上设置了证书和SSL配置后,只要我们访问浏览器时选择信任,抓包软件就就又能截取到明文了,其实这就是中间人攻击。这是因为此时我们允许了伪造的证书。

image_看图王.png

image.png

抓包的中间人攻击整体流程如下:

image.png

防范措施

  1. 对于个人来说防止自己被中间人攻击最基本的就是不要乱连不信任的网络
  2. 公司APP来说应该配置禁止被抓包
  3. APP和浏览器都应该严格校验证书,不使用不安全的APP和浏览器