Giới thiệu Electron

và debug một ứng

dụng Electron đơn
giản
Dương Thành Vịnh
(vinhjaxt)
Giới thiệu Electron

- Electron là một open-source framework được

duy trì và phát triển bởi GitHub. Electron cho
phép người lập trình phát triển ứng dụng
desktop GUI sử dụng các công nghệ web. Nó
bao gồm nhân Chromium rendering và Node.js
runtime. (Theo wikipedia)

- Electron đang là một framework phổ biến và

hữu dụng được sử dụng bởi: vscode, atom,
discord, slack, skype, zalo,..

2
 Giới thiệu Electron

Electron trông như thế nào?

$ aria2c https://github.com/electron/electron-api-demos/archive/master.zip
$ unzip electron-api-demos-master.zip
$ cd electron-api-demos-master/
$ npm install
$ npm start

3
4
 Giới thiệu Electron

Một ứng dụng Electron có 2

thành phần chính:

+ Front-end: HTML, CSS, JS (Có

thể có nodeIntegration)

+ Back-end: JS, native module

(main process)

5
 Giới thiệu Electron

Luồng hoạt động của ứng dụng:

1. Khi khởi động, electron tìm đến

main entry point trong package.json
hoặc index.js

2. Main process tạo một cửa sổ

bằng class BrowserWindow, gọi
phương thức loadURL

3. Render process có tác dụng

render HTML, CSS và xử lý JS

6
Giới thiệu Electron

7
Giới thiệu Electron

8
Giới thiệu Electron

Build Electron in Production

$ npm run package:win

hoặc

$ node_modules/.bin/electron-packager . --overwrite --platform=win32 --arch=x64 --

out=out --asar

9
Giới thiệu Electron

Thư mục sau khi build:

10
Debug một ứng dụng Electron đơn giản

app.asar là một tệp nén chứa hầu hết mã thực thi của ứng
dụng
11
Debug một ứng dụng Electron đơn giản

- Mục tiêu: Debug frontend (Mở được devtools của chromium)

- Cài đặt công cụ asar: $ npm install -g asar

- Extract app.asar: $ asar e app.asar app-src

- Tìm BrowserWindow và thêm lệnh mở devtools (webPreferences: {

devTools: true }):

- Pack lại app.asar và mở ứng dụng: $ mv app.asar app.asar.bak && asar p

app-src app.asar 12
Debug một ứng dụng Electron đơn giản

13
Debug một ứng dụng Electron đơn giản

- Mục tiêu: Debug nodejs runtime (main process)

- Chạy ứng dụng với option: --inspect-brk
- Sử dụng chrome truy cập: chrome://inspect
- Chọn inspect

14
Debug một ứng dụng Electron đơn giản

15
 Demo

- Bug 1: XSS => Account/Session takeover

- Sản phẩm: Zalo Web version

- Ảnh hưởng tới toàn bộ user sử dụng Zalo Web

- Wormable

16
17
 Demo

- Bug 2: Arbitrary File Write => RCE

- Sản phẩm: Zalo Desktop version

- Ảnh hưởng tới toàn bộ user sử dụng Zalo

Desktop

- Wormable

18
19
Cảm ơn mọi người đã
quan tâm theo dõi!

Contact:

- Facebook: fb.com/i.am.ioser
- Email: ngoc.lo.dang@gmail.com

20