ReactNative拆包

metro-bundler react-native专用的打包工具

github地址

  • react-native的模块系统遵循的是AMD模式,打包后会把AMD模块代码一起打包进去，在metro-bundler/src/defaults.js中
exports.moduleSystem = require.resolve('./Resolver/polyfills/require.js');
  • 所以可以通过修改这个指定自己的AMD加载模块。
    在自定义的cli.js中，修改成自定义的require.js
require("metro-bundler/src/defaults").moduleSystem=require.resolve("./require.js");

require加载流程

  • 首先注册了require和__d成全局方法,以及modules对象用来缓存模块
global.require = require;
global.__d = define;
const modules = Object.create(null);
//加入这段 方便以后动态获取或者修改已经加载好的模块
global.__modules=modules;

1）define方法

  • factory参数 是工厂类，用来构造对象

  • moduleId参数 是模块的Id

function define(
factory,
moduleId)
{
  if (moduleId in modules) {
    // prevent repeated calls to `global.nativeRequire` to overwrite modules
    // that are already loaded
    return;
  }
  modules[moduleId] = {
    dependencyMap,
    exports: undefined,
    factory,
    hasError: false,
    isInitialized: false };
}
  1. require方法
* 只有一个moduleId参数，如果module存在且已经初始化 直接返回module的exports对象，如果没有则调用
guardedLoadModule 去初始化module。

function require(moduleId) {
  //$FlowFixMe: at this point we know that moduleId is a number
  const moduleIdReallyIsNumber = moduleId;
  const module = modules[moduleIdReallyIsNumber];
  return module && module.isInitialized ? module.exports : guardedLoadModule(moduleIdReallyIsNumber, module);
}
  • reactNative处于调试下，global对象会有ErrorUtils对象，用于展示错误，发布模式则没有。实际调用了loadModuleImplementation方法去实现模块加载。
let inGuard = false;
function guardedLoadModule(moduleId, module) {
    if (!inGuard && global.ErrorUtils) {
        inGuard = true;
        let returnValue;
        try {
            returnValue = global.loadModuleImplementation(moduleId, module);
        } catch (e) {
            global.ErrorUtils.reportFatalError(e);
        }
        inGuard = false;
        return returnValue;
    } else {
        return global.loadModuleImplementation(moduleId, module);
    }
}
  • 如果module不存在 就表示define方法没有被调用，这样可以通过nativeRequire去加载模块的js文件，nativeRequire方法是c++实现的，只会加载assets/js-modules下的js文件。我们只要实现类似的c++方法就可以加载任意目录的js文件，并且可以加密和解密。
    nativeRequire调用过后。模块就会在modules对象中存在，调用module的factory，传入参数global, require, moduleObject, exports, dependencyMap,这里的参数与node类似，之后返回exports对象。
const ID_MASK_SHIFT = 16;
const LOCAL_ID_MASK = ~0 >>> ID_MASK_SHIFT;
global.loadModuleImplementation = function (moduleId, module) {
    const nativeRequire = global.nativeRequire;
    if (!module && nativeRequire) {
        if (isNaN(moduleId)) {
            nativeRequire(moduleId);
        } else {
            const bundleId = moduleId >>> ID_MASK_SHIFT;
            const localId = moduleId & LOCAL_ID_MASK;
            nativeRequire(localId, bundleId);
        }
        module = modules[moduleId];
    }

    if (!module) {
        throw unknownModuleError(moduleId);
    }

    if (module.hasError) {
        throw moduleThrewError(moduleId, module.error);
    }

    // We must optimistically mark module as initialized before running the
    // factory to keep any require cycles inside the factory from causing an
    // infinite require loop.
    module.isInitialized = true;
    const exports = module.exports = {};
    var _module =
        module;
    const factory = _module.factory, dependencyMap = _module.dependencyMap;
    try {

        const moduleObject = {exports};
        // keep args in sync with with defineModuleCode in
        // metro-bundler/src/Resolver/index.js
        // and metro-bundler/src/ModuleGraph/worker.js
        factory(global, require, moduleObject, exports, dependencyMap);

        // avoid removing factory in DEV mode as it breaks HMR
        if (!__DEV__) {
            // $FlowFixMe: This is only sound because we never access `factory` again
            module.factory = undefined;
            module.dependencyMap = undefined;
        }

        return module.exports = moduleObject.exports;
    } catch (e) {
        module.hasError = true;
        module.error = e;
        module.isInitialized = false;
        module.exports = undefined;
        throw e;
    }
}

更改react-native的C++代码

  • 在react-native/ReactCommon/cxxreact下JSCExcutor.cpp文件中
    这个方法是在JS启动的时候会被调用，里面定义了一些全局方法，这里加入了evalFile方法
void JSCExecutor::initOnJSVMThread() throw(JSException) {
····
      installNativeHook<&JSCExecutor::nativeFlushQueueImmediate>("nativeFlushQueueImmediate");
      installNativeHook<&JSCExecutor::nativeCallSyncHook>("nativeCallSyncHook");

      installNativeHook<&JSCExecutor::evalFile>("evalFile");

      installGlobalFunction(m_context, "nativeLoggingHook", JSCNativeHooks::loggingHook);
      installGlobalFunction(m_context, "nativePerformanceNow", JSCNativeHooks::nowHook);
····
}
  • c++实现的js方法 有两个参数，第一个参数argumentCount表示参数个数,arguments[]对应传入的参数，
    这里先判断了参数必须是一个且是字符串，否则抛出异常，然后检查第一个参数对应的文件是否存在，之后读取文件，然后调用evaluateScript执行文件，达到执行任意js文件的目的。
JSValueRef JSCExecutor::evalFile(size_t argumentCount,const JSValueRef arguments[]) {
          if (argumentCount < 1 ) {
             throw std::invalid_argument("Got wrong number of args");
          }
          Value value=Value(m_context, arguments[0]);
          if(!value.isString()){
                throw std::invalid_argument("Got wrong args[0] type");
          }
          FILE* fp=fopen(value.toString().str().c_str(),"rb");
          if(fp==NULL){
                throw std::invalid_argument(folly::to<std::string>("file not exists,path is ",value.toString().str()));
          }
          fseek(fp, 0, SEEK_END);
          int dwSize=ftell(fp);
          char* pBytes = new char[dwSize];
          fseek(fp, 0, SEEK_SET);
          fread(pBytes, dwSize, 1, fp);
          fclose(fp);
          evaluateScript(m_context,String(m_context,(char*)pBytes),value.toString());
          delete pBytes;
          return Value::makeUndefined(m_context);
}
  • 接下来就是需要通过java传入js文件的初始目录，通过ReactContextBaseJavaModule的getConstants方法，可以把初始目录的字符串传递到js中。
public class NativeUtil extends ReactContextBaseJavaModule {

    private static final String LOCAL_PATH = "LOCAL_PATH";

    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(LOCAL_PATH, getCurrentActivity().getFilesDir().getAbsolutePath());
        return constants;
    }
}
  • js中修改global.loadModuleImplementation ，这样就改变了require流程，如果模块不存在，会去指定目录加载对应{moduleId}.js文件
global._BASE_PATH=NativeUtil.LOCAL_PATH+"/pack/js-modules";
const old=global.loadModuleImplementation;
global.loadModuleImplementation=function(moduleId, module){
    if (!module && evalFile) {
        evalFile(global._BASE_PATH+"/"+moduleId+".js");
        module = global.__modules[moduleId];
    }
    return old(moduleId, module)
}

打包流程

  • unbundle命令会将入口js文件依赖的所有js打包到--bundle-output对应目录下，每个模块会被分配一个id，且放到--bundle-output的js-modules文件夹下
node cli.js unbundle --entry-file index.android.js --platform android --dev false --bundle-output build/main.bundle --assets-dest build

每个模块的id是根据metro-bundler/src/lib/createModuleIdFactory.js生成的，修改这个文件就可以生成指定id,在cli.js下增加如下代码 改变moduleId生成的逻辑。

require("metro-bundler/src/lib/createModuleIdFactory.js");
ModuleCache[require.resolve("metro-bundler/src/lib/createModuleIdFactory.js")].exports=require("./createModuleIdFactory");

将src下的业务js的id从10000开始，而其他模块的id从0递增开始，这样就很容易将业务模块和固定模块进行拆分。

module.exports = function(){
    const fileToIdMap = new Map();
    let nextId = 0;
    let busId=0;
    return (_ref) => {
        let modulePath = _ref.path;
        // modulePath=modulePath.replace(basePath,"").replace(/\\|-/g,"_").replace(/\.js$/,"");
        modulePath=modulePath.replace(basePath,"");
        if(!modulePath.startsWith("src")){
            if (!fileToIdMap.has(modulePath)) {
                fileToIdMap.set(modulePath, nextId);
                nextId += 1;
            }
            return fileToIdMap.get(modulePath);
        }else{
            if (!fileToIdMap.has(modulePath)) {
                fileToIdMap.set(modulePath, 10000+busId);
                busId += 1;
            }
            return fileToIdMap.get(modulePath);
        }
    };
};

文件加密以及解密

  • 由于拆分 导致js很容易被分析识别所以需要加密存储。又由于是打包用的js,所以需要用js加密然后用c++解密。这里提供了利用了异或达到目的。
    js加密流程
let fs = require("fs");
const { Transform } = require('stream');

class EncodeTrans extends Transform {
    constructor(options={}) {
        super(options);
        this.code1=Buffer.from(options.key1||'fstat on bundle failed.', 'utf8');
        this.code2 = Buffer.from(options.key2||"nativeRequire", "utf8")
        this.code1Index = 0
        this.code2Index = 0
    }

    _transform(buf, enc, next) {
        let start=0;
        while (start < buf.length) {
            const uint = buf.readUInt8(start);
            const key1 = this.code1.readUInt8(this.code1Index++);
            const key2 = this.code2.readUInt8(this.code2Index++);
            (this.code1Index >= this.code1.length)&&(this.code1Index=0);
            (this.code2Index >= this.code2.length)&&(this.code2Index=0);
            buf.writeUInt8(uint ^ key1 ^ key2,start);
            start++;
        }
        next(null, buf);
    }
}

fs.createReadStream("build/js-modules/10.js")
    .pipe(new EncodeTrans())
    .pipe(fs.createWriteStream("10.js"));

c++ 解密流程

char* decodeByPass(const char* code1, const char* code2, byte* content, int contentLength) {
    byte* p = content;
    char* c = new char[contentLength+1];
    int code1Len = strnlen(code1,1000);
    int code2Len = strnlen(code2,1000);
    int code1Index = 0;
    int code2Index = 0;
    char* startC = c;
    while (p- content<contentLength) {
        *startC = (*p^code2[code2Index++]^code1[code1Index++]);
        startC++;
        p++;
        if (code2Index >= code2Len){
            code2Index = 0;
        }
        if (code1Index >= code1Len) {
            code1Index = 0;
        }
    }
    *startC = '\0';
    return c;
}

int main() {
    FILE* fp;
    fopen_s(&fp, "10.js", "rb");
    fseek(fp, 0, SEEK_END);
    int dwSize = ftell(fp);
    byte* pBytes = new byte[dwSize];
    fseek(fp, 0, SEEK_SET);
    fread(pBytes, dwSize, 1, fp);
    fclose(fp);

    char* pwd = decodeByPass("fstat on bundle failed.","nativeRequire", pBytes, dwSize);
    printf("%s\n", pwd);
    system("pause");
    return 0;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343