分享离线打包js的加密方法

最近在做一个app小工具，打算发布在ios和android平台，又不想双平台各写一份代码，就这样mui成为了选项。

顺利做完要发布前，代码的安全性成了考虑。先说下个人的经历，开发技术栈主要集中在iOS app和手游上，前端算是菜鸟，只是稍有入门，js风格没有讲究范式，因此代码写的很随兴，全局变量、全局函数四处飞，写的时候是爽了，要做压缩混淆时就有点傻眼了。看了各种js的压缩教程，也试了各种压缩和混淆工具后，效果都不是太好，全局变量和函数名基本都是明的，也有考试过eval这种混淆方式，虽然混淆后是面目全非了，但是js文件里那个刺眼的eval简直就是在赤裸裸地告诉破解者对应的解密方式。

考虑一番后，打算不走寻常路，对js进行加密(真正意义上的加密，非js混淆)，为此我们需要在js载入流程上做改动。

废话不多说，干货开始。

加密后的载入方式如下：

1. 在plusReady事件触发时先载入解密js的插件，此插件流程在稍后叙述。
2. 利用此插件载入加密过的js。
3. 继续执行正常的js逻辑代码。

打包前对敏感的js做加密，再放到包里。

第一点:
需要我们写一个解密的第三方插件，iOS和android各一份。第三方插件的教程在论坛里很清楚，这里各位同学可以自由挑选要使用的加密算法，在native层实现。

第二点:
假定这个包装好的插件入口在plus.jsUtils。
jsUtils.js代码如下:

document.addEventListener( "plusready",  function()  
{  
    var pluginName = 'jsUtils', B = window.plus.bridge;  
    var isBuilder = plus.runtime.version > '8'; //为了确保调试基座也能正常,简单用版本号判断是否调试基座,稳妥做法是用包名判断  
    var bfUtils;  
    if (!isBuilder)  
        jsUtils = {  
                load : function (files, success, fail) {  
                    var callbackId = B.callbackId(success, fail);  
                                return B.exec(pluginName, "load", [callbackId, files]);  
                }  
            };  
        else  
            jsUtils = {  
                load: function (files, success, fail) {  
                    success();  
                    return true;  
                }  
            };  
    window.plus.jsUtils = jsUtils;  
}, false );

html载入页面写法：

<script src="js/jsUtils.js"></script>  
<script>  
mui.init();  
document.addEventListener('plusready', function () {  
    if (plus.jsUtils)  
        plus.jsUtils(['a.js', 'b.js'], init, function() {});  
    else  
        init();  
}, false);  

function init() {  
    //正常的代码逻辑  
}  
</script>

第三方插件执行流程如下：

1. 读取加密后的js文件内容。
2. 执行解密操作。
3. 执行解密后的js代码，回调success函数。在iOS下是[JSFrameContext evaluateJavaScript]，android下是IWebview.evalJS (android的evalJS载入是异步，因此要调用带回调参数的的evalJS)。

如此大功告成。