React Native 디컴파일

RN 동작 방식 및 디버깅

React Native는 컴파일(빌드)을 통해 모든 코드들이 *.bundle로 번들링된다.

 

개발자마다 bundle의 이름을 다르게 설정하기도 하는데, 기본적으로 index.ios.bundle와 index.android.bundle인 것으로 알고 있다.(또는 버전에 따라 main.jsbundle로 보여지기도 한다.)

이러한 bundle은 Android의 경우 V8 Engine에서 돌아가고, iOS의 경우 JavascriptCore Engine를 이용해 구동된다.

 

여기서 debug 모드가 enable 되어 있는 경우 Android는 chrome remote debugging을 통해 디버깅이 가능하고, 또는 Frida를 이용해 webview의 debug 모드를 강제로 활성화 시킬 수 있다. iOS는 Safari를 통해 디버깅이 가능하다. 마찬가지로 Frida를 이용해 debug를 활성화할 수 있다.

 

버전별 차이

React Native 0.69이하는 기본적으로 Javascript를 사용하며 번들링된 파일을 열어보면 이처럼 javascript를 확인할 수 있고 대부분의 코어 로직이 여기에 포함된다. 그렇기에 점검할 때 암호화해서 사용하고 앱 로딩시에는 복호화해서 사용하는 것을 권고하곤 한다.

javascript를 사용하는 bundle

 

하지만, React Native 0.70 버전 이상부터는 Hermes가 기본적으로 탑재되어 있다.

Hermes는 기존의 javascript에서 javascript bytecode로 번들링해서 사용한다. 다음 이미지를 확인보면 bundle의 내용만 봐서는 알 수 없을 정도로 되어 있다.

javascript bytecode를 사용하는 bundle

디컴파일

그냥 순수 번들링된 Javascript의 경우 react-native-decompiler를 사용해서 디컴파일할 수 있다. (나중에 해보면 추가로 작성하던가 하겠다.)

https://github.com/numandev1/react-native-decompiler

GitHub - numandev1/react-native-decompiler: Decompile React Native Android/IOS Bundle.

 

 

Javascript bytecode의 경우 hbctool을 이용해서 디컴파일할 수 있다.

https://github.com/bongtrop/hbctool

GitHub - bongtrop/hbctool: Hermes Bytecode Reverse Engineering Tool (Assemble/Disassemble Hermes Bytecode)

+ 현재는 hermes bytecode version 85만 지원한다고 되어 있는데, pr에 가보면 hbc90까지도 있으니 잘 활용해서 사용하면 된다.