노트

Electron 앱 구조

Electron Process Model

프론트엔드#security#architecture · 연결된 개념 4개

쉽게 말하면

Electron 앱은 손님을 맞는 창구와 금고가 있는 안쪽 사무실로 나뉜 은행 같아요. 웹 화면은 창구인 렌더러에서 돌고, 파일 저장 같은 일은 정해진 신청서인 IPC로만 안쪽 메인 프로세스에 부탁해요.

비유의 한계 창구 직원이 금고 열쇠를 직접 쥐면 위험해요. 그래서 nodeIntegration을 끄고 contextIsolation을 켜고, preload로 노출하는 API를 좁게 둬서 렌더러에서 XSS가 터져도 OS까지 닿지 않게 해요.

Electron은 Chromium과 Node.js를 묶어 웹 기술(HTML·CSS·JavaScript)로 데스크톱 앱을 만드는 프레임워크다. 앱은 OS(Operating System) 권한을 가진 메인 프로세스(Main Process) 하나와, 창마다 하나씩 뜨는 렌더러 프로세스(Renderer Process)로 나뉜다.

  • 메인 프로세스: Node.js 환경. 앱 생명주기, BrowserWindow 생성, 파일 시스템·메뉴·트레이·알림 같은 OS 작업을 맡는다
  • 렌더러 프로세스: 각 창 안의 웹 페이지. 보통의 브라우저처럼 화면을 그리고, React 같은 UI 라이브러리가 여기서 돈다
  • preload 스크립트: 둘 사이의 다리. contextBridge.exposeInMainWorld()로 허용한 API(Application Programming Interface)만 window에 노출한다
  • IPC(Inter-Process Communication): 렌더러가 ipcRenderer.invoke()로 요청하면 메인이 ipcMain.handle()로 실제 작업(파일 저장 등)을 하고 결과를 돌려준다
Renderer ──window.api.save()──▶ Preload ──ipcRenderer.invoke──▶ Main(fs 접근)

보안 기본값

  • contextIsolation: true: preload와 페이지의 JS 컨텍스트를 분리한다
  • nodeIntegration: false: 렌더러가 Node API를 직접 쓰지 못하게 한다. 렌더러에서 외부 콘텐츠나 XSS(Cross-Site Scripting)가 실행돼도 OS까지 닿지 않게 하려는 것이다
  • 메인 프로세스는 브라우저의 동일 출처 정책 같은 제약을 받지 않으므로, preload로 노출하는 API는 좁게 둔다

배포와 코드 서명(Code Signing)

macOS Gatekeeper(공증 포함)와 Windows SmartScreen은 서명 없는 앱을 막거나 경고한다. 서명은 바이너리가 변조되지 않았음을 증명하고, macOS의 자동 업데이트(autoUpdater)와 앱 스토어 배포에도 필요하다.

렌더러의 로컬 저장소로는 IndexedDB를 많이 쓴다. 원격 호출을 함수처럼 감싸는 IPC의 발상은 RPC와 닮았다.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 하이드레이션

    하이드레이션(Hydration)은 서버가 미리 렌더해 보낸 HTML(HyperText Markup Language)을 클라이언트에서 다시 만들지 않고, 그 DOM(Document Object Model)에 React 컴포넌트를 연결해 이벤트 핸들러와 상태를 붙이는 과정이다(hydrateRoot). Dan Abramov의 비유로는 "마른 HTML에 상호작용이라는 물을 주는 일"이다.

  • react와 렌더러의 분리

    React는 컴포넌트를 정의하는 API(Application Programming Interface)를 담은 react 패키지와, 그 컴포넌트 트리를 특정 플랫폼의 화면으로 바꾸는 렌더러(renderer) 패키지로 나뉜다. 브라우저 DOM(Document Object Model)용이 react-dom, iOS·Android 네이티브 뷰용이 react-native다.

  • 웹뷰 브리지(웹↔네이티브 통신)

    앱 안의 웹뷰에서 웹과 네이티브가 서로 말을 거는 길. User-Agent 표식, 메시지 핸들러, 스크립트 실행, URL(딥링크)이 있다.

  • Lynx

    Lynx는 웹 기술(마크업, CSS, JavaScript)로 작성한 UI를 iOS·Android·HarmonyOS의 네이티브 화면과 웹에 렌더링하는 크로스플랫폼 UI 프레임워크다. ByteDance에서 만들어 TikTok 등에서 쓰다가 2025년 3월 5일 오픈소스로 공개했다. 웹뷰처럼 페이지를 띄우는 방식이 아니라, React Native·Flutter와 같은 부류의 네이티브 렌더링 프레임워크다.

  • localStorage와 sessionStorage

    브라우저에 문자열 키-값을 저장하는 Web Storage API의 두 가지. 쿠키와 달리 요청에 자동으로 실리지 않고, 출처 단위로 나뉘며(same-origin-policy), 보통 출처당 5MB 안팎을 쓸 수 있다. 동기 API라 큰 데이터를 자주 읽고 쓰면 메인 스레드를 막는다.

보기 옵션