ELECTRON 체험기

ELECTRON 체험기

Reference : https://www.electronjs.org/docs/latest/tutorial/quick-start

Installation

$ brew update & brew install node
$ brew install corepack
$ corepack enable
$ npm install electron --save-dev
$ mkdir electron_test & cd electron_test
$ npm init
.. 코드 작성

Start

$ npm start

Package & Distribution

$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import
$ npm run make

Reverse Engineering

Electron based App은 내부에 js 코드가 그대로 있어 원본 소스를 알 수 있다. {Application}.app/Contents/Resources/app 경로 쯤에 있다.

ch4rli3kop in [~/code_snippets/electron_test/out/electron_test-darwin-arm64/electron_test.app/Contents/Resources/app] 17:04:58 › ll
total 32
-rw-r--r--   1 ch4rli3kop  staff   574B  4 19 16:28 index.html
-rw-r--r--   1 ch4rli3kop  staff   481B  4 19 16:28 main.js
drwxr-xr-x  14 ch4rli3kop  staff   448B  4 19 16:28 node_modules
-rw-r--r--   1 ch4rli3kop  staff   743B  4 19 16:28 package.json
-rw-r--r--   1 ch4rli3kop  staff   355B  4 19 16:28 preload.js

.asar이라는 압축 포맷으로 되어 있는 경우도 있는데, 이 경우 asar 패키지를 이용하여 extract 후 다시 package 하여 소스를 수정할 수 있다. asar 은 다음과 같이 사용이 가능하다.

$ npm install asar
$ npx asar extract app.asar unpacked/
$ npx asar pack unpacked app.asar

서비스의 소스를 확인할 수 있는 수준이니, 오히려 Electron 기반의 앱이 분석하기 더 쉬운 것 같다. 물론 nodejs에 익숙해져야겠지만..

다음의 링크와 같이 디스코드도 전체 소스를 확인할 수 있다. 한 번쯤 읽어보면 좋을 것 같다. 

https://dev.to/essentialrandom/adventures-in-hacking-electron-apps-3bbm