移动时代的前端加密

     2494     9月-02,15    

1、背景

相比其他被编译成二进制的应用,前端这种纯文本应用,太容易被解读和窜改。

1.1前端为什么要加密?

加密重要的目的是出于对商业利益的保护。

  • 由于作品太容易被复制窜改,容易会失去渠道先机

窜改不限于以下:

  1. 署名被移除或替换;
  2. 链接地址被替换;
  3. 文案被修改;
  4. 广告被移除、替换或植入;

一些轻度游戏,用户只会玩一两次,生命周期也就两三天。如果你开发的游戏被人山寨且他的渠道比你更广,那么对于流量就是致命打击。

  • HTML5 被山寨后太廉价

在淘宝上搜索「HTML5 微信小游戏」400套/10元

  • 避免泄露一些用于运营的脚本

参考:锤子手机天猫开卖遇乌龙

1.2前端加密的目标

总之就是减少加密的成本增加破解的成本:如果每次花 1 分钟加密的应用,都需要花 2 小时以上去破解那就算成功了。

  • 加密后的文件不易过大;

100K 文件如果加密后到 1M 无疑增加了用户使用的成本和体验。

  • 没有人工介入不能破解;

即:破解的过程需要人工介入,人工成本无疑是最大的开销。

  • 限制在其他域名部署;

守护代码和业务放在一起,部署到其他域名则不能正常使用。

  • 不容易被调试跟踪;

对主流的调试工具有防范能力,如:Firebug、Chrome 开发者工具。

1.3哪些代码不需要加密?

  • 开源项目
  • 用于学习的项目

2、降低可读性的方法

2.1压缩(compression)

压缩的目的通常是减少传输量,但也取到降低可读性的作用。
去掉注释、多余的分隔符、空白字符、标识符简写。

这类工具有很多:YUI CompressorUglifyJSGoogle Closure Compiler

「标识符简写」是一种压缩也是一种混淆。

2.2混淆(obfuscation)

混淆常见的方法是分离静态资源、打乱控制流、增加无义的代码。

UglifyJSGoogle Closure Compiler 这类工具实际上也会做简单改变语句。

混淆是降低可读性的利器,有一款商业产品 jscrambler,最高配每个月 95 美刀。

  • 标识符混淆

混淆前

混淆后

 

  • 逻辑混淆

混淆前

混淆后

混淆前

混淆后

混淆前

混淆后

 

2.3加密(encryption)

这里「加密」指代码内容可逆编码。而文中「前端加密」指页面和相关资源文件处理后能正常运行。

  • 简单 base64

加密前

加密后

  • Packer

加密前

加密后

 

3、新技术带来的新思路

到移动时代我们可以放心的用上 HTML5、CSS3,使用一些新特性结合已有的方案,可以更大程度增加破解的成本。

代码可以放置其他位置

将代码放到非 JS 文件中,增加代码定位的难度。

  • 放到 png 中

利用 HTML Canvas 2D Context 获取二进制数据的特性,可以用图片来存储脚本资源。

  • 放到 css 文件中

利用 content 样式能存放字符串的特性,同样可以用来存储脚本资源。

执行代码字符串

无论代码放到哪,都需要执行。执行代码字符串的方式有如下几种:

  • 创建 <script> 执行

  • 调用 setTimeout() / setInterval() 执行

  • 创建 new Function() 执行

  • 使用 Worker 执行

  • 使用 DOM 事件执行

  • location 赋值 javascript 协议的链接

3.1.2如何防止代码执行被截获

比想象的难太多

  • 截获 eval() / new Function() 的示例代码

 

  • 还以为用字面量就妥妥了。o(╯□╰)o 后来发现是杯具的

  • 截获 constructor 的示例代码

 

  • 目前能想到的是判断 eval 是否被重定向

示例,如果 eval 被重定向 z 变量不会被泄露

 

3.2防止开发者工具

再复杂的前端加密也难对付调试工具的跟踪分析。

  • 那么如何判断浏览器是否开启控制台?

这个问题由 @EtherDream 提供了目前最完美的解决方案。
详情参考:Find out whether Chrome console is open?

  • 判断如果控制台开启则堵塞 Javascript 执行

 

3.3混合加密

单个方法总是容易被破解,但组合起来千变万化就不那么容易了!破解成本显然指数增长。

  • 嵌套加密

 

  • 随机加密

3.4实际案例

这里要安利两下:

  • 我和小伙伴们开发的剪纸游戏 天天爱剪纸,用到了混合加密,你可以尝试破解挑战一下。(已被 @前端农民工 扒了)
  • 独立开发的代码预处理工具 jdists,非常适合用来做混合加密。

参考:jdists 混合加密示例

4、更有力的防范

很难做到 100% 防止逆向工程,只是增加一些破解的成本。

4.1使用专属素材

修改素材也就是要做同一套素材,这个其实不比修改代码容易到哪去。

4.2不是单一的前端应用,依赖服务端的存储

前端容易破解,后端却不容易,物理上就隔离了。

4.3更好的产品和服务,更快的迭代

再怎么山寨也山寨不了精髓。

5、参考资料

[文章来自]  div.io

你需要先 登录 才能发表评论.