移动时代的前端加密

移动时代的前端加密

标签: 加密 前端 HTML5 移动

---

背景

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

前端为什么要加密？

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

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

窜改不限于以下：

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

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

• HTML5 被山寨后太廉价

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

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

参考：锤子手机天猫开卖遇乌龙事件

前端加密的目标

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

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

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

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

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

• 限制在其他域名部署；

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

• 不容易被调试跟踪；

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

哪些代码不需要加密？

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

降低可读性的方法

压缩（compression）

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

这类工具有很多：YUI Compressor、UglifyJS、Google Closure Compiler

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

混淆（obfuscation）

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

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

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

• 标识符混淆

混淆前

function render(obj) {
   
  /* ... */
  console.log(obj.title);
}
render({title: 'buy'});

混淆后

function a(e){
   /* ... */console.log(e.title)}a({title:'buy'})

• 逻辑混淆

混淆前

function render(obj) {
   
  /* ... */
  console.log(obj.title);
}
render({title: 'buy'});

混淆后

var self=this,o={};o.__defineSetter__('t',function(e){
   self[t('elosnoc')][t('gol')](e[t('eltit')])});function t(e){
   return e.split('').reverse().join('')};o[t('eltit')]=t('yub');o.t=o

• aaencode

混淆前

alert("Hello, JavaScript")

混淆后

ﾟωﾟﾉ= /｀ｍ´）ﾉ ~┻━┻   //*´∇｀*/ ['_']; o=(ﾟｰﾟ)  =_=3; c=(ﾟΘﾟ) =(ﾟｰﾟ)-(ﾟｰﾟ); (ﾟДﾟ) =(ﾟΘﾟ)= (o^_^o)/ (o^_^o);(ﾟДﾟ)={ﾟΘﾟ: '_' ,ﾟωﾟﾉ : ((ﾟωﾟﾉ==3) +