前端常见安全防范

1、XSS(跨站脚本攻击)：攻击者想尽一切办法将可以执行的代码注入到网页中

• 总体上分为两类：持久型和非持久型，持久型写入数据库，所有打开页面的用户都会被攻击到，非持久型一般通过URL参数的方式加入攻击代码

• 防范：

  • 1、转义字符

    function escape(str){
      str = str.replace(/&/g, '&')
      str = str.replace(/</g, '&lt;')
      str = str.replace(/>/g, '&gt;')
      str = str.replace(/"/g, '&quto;')
      str = str.replace(/'/g, '&#39;')
      str = str.replace(/`/g, '&#96;')
      str = str.replace(/\//g, '&#x2f;')
      return str
    }
    

    对于富文本，通常采用白名单过滤的办法

  • 2、 CSP

    本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行

    • 两种开启方式

      1、设置HTTP Header中的Content-Security-Policy

      2、设置meta标签的方式<meta http-equiv="Content-Security-Policy">

      Content-Security-Policy: default-src: 'self'  // 只允许加载本站资源
      Content-Security-Policy: img-src https://*  // 只允许加载HTTPS协议图片资源
      Content-Security-Policy: child-src 'none   // 允许加载任何来源框架
      

• 2、CSRF(跨站请求伪造)：攻击者构造出一个后端请求地址，诱导用户点击或通过某些途径自动发起请求，如果用户处于登录状态，后端就以为是用户在操作，从而进行相应的逻辑

  • 攻击过程：
    • 1、用户浏览并登录信任网站A
    • 2、验证通过，在用户处产生A的Cookie
    • 3、用户在没有登出A网站的情况下访问危险网站B
    • 4、B要求访问第三方网站A，发出一个请求
    • 5、根据B的请求，浏览器带着用户在A生成的Cookie访问A
    • 6、A不知道请求是用户发出的还是B网站发出的，由于浏览器会自动带上用户的Cookie，所以A会根据用户的权限处理请求，从而使得B达到了模拟用户操作的目的
  • 防范：
    • get请求不对数据进行修改
    • 不让第三方网站访问到用户Cookie
    • 阻止第三方网站请求接口
    • 请求时附带验证信息，比如验证码或者Token
  • SameSite
    • 对Cookie设置SameSite属性，表示Cookie不随着跨域请求发送，可以很大程度上减少CSRF攻击，但不兼容所有的浏览器
  • 验证Referer
    • 通过Referer判断该请求是否是第三方网站发起的
  • Token
    • 服务器下发随机Token，每次发起请求时将Token携带上，服务器验证Token是否有效

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

  • 防范：
    • 1、X-FRAME-OPTIONS：是HTTP响应头，三个值可选
      • DENY：表示页面不允许iframe的方式展示
      • SAMEORIGIN：可以在相同域名下通过iframe展示
      • ALLOW-FROM：指定来源的iframe中展示
    • JS 防御：当页面通过iframe方式加载页面时，攻击者的网页直接不显示所有内容