聊聊前端安全和用户体验

缘起


今天听了一群大大们分享,结合自己的见解,给各位童鞋发下这块内容吧。这块内容小编主要是想在两方面分享,第一个是安全,第二个是给用户好的体验。

安全问题


这个问题其实没啥好多做分享的,内容还是老生常谈的内容,比如XSS,CSRF等等!小编从以下几个方面来聊聊吧。

  • 源码的保护
  • 写代码时的防范
  • 如何防范攻击

源码的保护


先来说说源码的保护,这个要从攻击者获取源码说起,一旦攻击者获取了源码,那么可以做一些不可思议的事,从而达到攻击的效果。

  • CSP,这个主要用来防御远程资源加载,防止攻击者可以注入一段带有攻击性的脚本,来达到自己的目的。
  • 对源代码进行二次加密上线,比如使用bytenode,把源代码编译成v8字节码,这样就提高了攻击者编译破解的成本。
  • 线上已经打包上线的资源,也可以通过生成hash文件签名的方式,我们可以把资源A这个版本的资源,按照一定规则生成hash文件签名,然后存到云端。这样一旦攻击者对资源进行了二次打包处理等等,造成hash签名改变,那么就可以对比云端的hash文件签名,做针对性处理!

写代码时的规范


这个其实也是长远的方法,大家简单看下就好。

  • eslint等工具类检测
  • Code Review
  • 单元测试
  • ts
  • git提交的钩子处理

如何防范攻击


  • 对用户输入的内容进行严格的长度和格式检查
  • 对输出内容遵循各个场景的最佳实践,说白了就是按照规则来
  • 白名单
  • 使用httpOnly,CSP,CORS,CSRF等
  • 使用自动扫描工具检查线上代码的漏洞
  • 每个请求附加唯一标识符,用来判断该请求是否合法
  • 安全内链,对重要的请求,给用户的是一个外链,返回的是一系列密匙,把密匙给安全内链使用,再返回数据,大家可以看看BAT网站的请求。

给用户好的体验


这个才是今天主要的内容,如何给用户好的体验,这个可以从以下两个方面入手。

  • 上线前的预防排坑
  • 上线后的定位问题,快速处理

上线前的预防排坑


  • Code Review
  • 单元测试
  • 多个环境验证代码的健壮性
  • 多个场景验证代码的健壮性(包括但不限于不同的设备,不同的浏览器,不同的用户使用等等)
  • 灰度发布
  • 攻防演练

攻防演练


其他的其实没啥好说的,我们重点聊聊攻防演练,大家按照以下几点就可以了。

  • 确定需要演练的分支和版本
  • 攻方按照特定的方式进行操作,拿白屏来说,攻方注入一段向演练服务器发送一段代码,守方接受了这段代码,导致线上dom被删除,从而显示白屏。守方这个时候是不知道啥原因白屏的,那么守方需要快速定位,比如看看是不是资源加载超时(通过timeout等看日志),然后看看是不是dom没加载(body高度,特定元素是不是存在),定位到问题,进行处理即可。

上线后的定位问题,快速处理


这个其实是为了减少损失,提高用户体验,其实主要还是从下面几点来判断的。

  • 埋点,这个是最常见的
  • 经验判断
  • 连线上环境调试,复现,如果公司允许的话,哈哈哈

尾声


今天的分享就到这里了,喜欢小编的话,记得多多关注,打赏一波哦,哈哈哈哈!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值