前端知识-质量与安全

质量保障

• 编码质量
  • 防御性编程: 判空处理; 异常处理try-catch; 降级处理(对允许出错的弱依赖场景, 可以返回默认值, 增加系统容错性)
  • 质量管理工具: 静态检查工具(ESLint); 风格控制工具(Prettier)
  • 代码评审: 交叉验证代码设计的合理性
• 测试
  通过编写测试用例来检查程序执行结果是否符合预期
  • 单元测试: 对实现某一特定功能的函数进行测试. 常见框架: Jest和Mocha
  • 集成测试: 验证各模块之间的正确性. 常见框架: Cypress和Playwright
  • 兼容性测试: 利用特性探针验证生产环境中某个API是否可用, 再配合埋点日志收集检测数据, 就可以提前准备兼容方案.
    常见的工具: Modernizr, caniuse, BrowserStack, Puppeteer
  • 性能测试( 见 用户体验 文章 )
  • UI测试: 关注用户界面的展示和交互前后是否符合预期. 工具: React的Testing Library, Vue的Test Utils
• 攻击防御
  • 跨站脚本攻击(XSS), 攻击者通过某些手段将恶意代码注入到用户的网页中来窃取敏感信息或是执行恶意操作.
    防御措施: 在代码注入环节进行校验和过滤, 比如采用sanitize-html对用户输入进行过滤.
  • 跨站请求伪造(CSRF), 攻击者诱导用户访问包含恶意代码的网页, 在用户不知情的情况下, 向没有做好防护的服务器发送恶意请求.
    防御方法: 同源检查和Token检查, 都依赖于服务器的检验保护.
• 稳定性
  供应链安全: 在一个标准研发流程中, 采用持续集成的方式迭代应用, 构建系统会从公网或内网NPM仓库中下载和安装依赖, 此时三方依赖的错误更新导致构建失败, 恶意脚本植入导致敏感信息泄露等.
  提升供应链的稳定性和安全性: 使用依赖锁文件(package-lock.json)并定期更新; 在构建系统中接入安全组件屏蔽恶意版本