前端技术周刊20190226：前端代码保护

2019-02-26 前端代码保护

前端快爆

• Vue 2.6 正式发布&＃xff0c;带来了全新的 Slots&＃xff08;插槽&＃xff09;语法、异步错误处理、动态指令参数、编译警告位置信息、显式创建响应式对象、SSR 数据预抓取、可直接在浏览器中引入的 ES Modules 构建文件等特性&＃xff0c;这一切都将更好的接轨未来的 3.0 版本。?

真的学不动了&＃xff0c;小右哥求放过。

• Chrome 浏览器即将引入一个名为“Focus Mode”的新功能&＃xff0c;该模式下会让你更加专注于网页内容的浏览&＃xff0c;禁用一些无关打扰&＃xff0c;比如关闭网页通知等。目前默认禁用&＃xff0c;需要通过 「chrome://flags/#focus-mode」开启。?

点评&＃xff1a;浏览器很多个&＃xff0c;谷歌老大哥&＃xff0c;上网不规范&＃xff0c;亲人两行泪&＃xff08;什么破词&＃xff0c;一点都不圆润&＃xff0c;盘它&＃xff01;&＃xff09;

• Ionic React Beta 版发布&＃xff0c;Ionic 是一个用于构建跨平台 Hybrid 移动应用程序的框架&＃xff0c;现在开始提供 React 方式构建&＃xff0c;目前大概已有 70 多个组件。?

这年头写个框架不支持 React 和 Vue 都不好意思拿出来。

• Node.js 11.10.0 发布&＃xff0c;主要带来了 npm 6.7.0、response.writeHead 现在返回 response、新增 repl.setupHistory、引入客户端 「session」 事件等特性。?
• npm 企业版正式发布&＃xff0c;主打安全性&＃xff0c;目前主要有以下功能&＃xff1a;可托管在 Kubernetes 集群中的专用单租户、提供公司专用的 companyname.npme.io URL、支持行业标准的 SSO 身份验证、基于角色的访问控制、在团队之间和团队之间共享包、可定制的协作和无缝 CI/CD 系统集成工作流程、通过“npm audit”告知用户已发现的漏洞。?
  

点评&＃xff1a;cnpm 笑而不语。

• 微软发力&＃xff0c;为 Chromium 的字幕添加 Windows 系统样式支持。?

点评&＃xff1a;我软巨硬。

优秀 Demo

• CSS cubic-bezier() 动画
• 
• ThreeJS 实现的钟摆效果
  
  

专题&＃xff1a;前端代码保护

本期为 &＃64;叶兮 为我们带来的前端代码保护相关的文章。

• 介绍

  • 可信前端之路&＃xff1a;代码保护&＃xff1a;介绍了前端代码保护的意义以及手段。浏览器特性导致前端单纯的加密和解密强度并不高&＃xff0c;容易被拦截。基于混淆的代码保护强度更高&＃xff0c;但也只是增加破解的难度。

• 代码混淆

  • 使用 Esprima 进行代码混淆&＃xff1a;生成 AST&＃xff0c;设计自定义规则从而实现代码混淆 & Esprima 在线版。
  • JointJS。

• 虚拟机保护器&＃xff1a;不是单纯在浏览器运行混淆后的代码&＃xff0c;而是将源代码混淆后&＃xff0c;用解释器对 bytecode 进行解释执行。每一个保护器的编译工具和解释器都是根据随机生成的编码重新生成。是目前在应用的性能开销最大&＃xff0c;也是强度最高的一类代码混淆器。

  • LLVM 编译器防护
  • 小型虚拟机保护并逆向分析

• 调试保护

  • 防开发者调试&＃xff1a;一个判断浏览器是否开启控制台的完美解决方案&＃xff0c;开启则阻塞JS执行。

• 综合工具与逆向

  • Obfuscator:通过一系列基础的混淆将源代码转换为不可读内容&＃xff0c;支持反美化、反调试、域名保护等。
  • 前端工程师如何反击爬虫 & 自定义字体混淆信息的自动化破解&＃xff1a;前者是反击爬虫的综述&＃xff0c;后者是使用 OCR 进行的相应破解。
  • JSNice、JSBeautifier。仅对基础的混淆起作用。支持转换变量名&＃xff0c;去掉无用代码注入等。对于虚拟机保护器和调试保护无用。
  • 对 Google ReCaptcha 进行的逆向尝试&＃xff1a;Botguard 有两部分&＃xff0c;一部分是 UA 采集模块&＃xff0c;另一部分是虚拟机解释执行保护。
  • VMProtect & VMAttack&＃xff1a;前者是 Windows 系统上的代码保护工具&＃xff0c;后者是针对 VMProtect 的伪源码还原&＃xff0c;动静态分析。
  • 
    

本期编辑&＃xff1a;&＃64;壹丝&＃xff0c;审核&＃xff1a;&＃64;承虎&＃xff0c;专题供稿&＃xff1a;&＃64;叶兮
题图来源&＃xff1a;http://www.aspectestateagents.com.au/10-ways-to-protect-your-home-from-storm-damage/