03 · contextBridge — 좁은 함수만 노출하라

// preload.ts (위험한 옛날 방식)
window.electron = {
  readFile: require('fs').readFileSync,
  exec: require('child_process').exec,
};

// 공격자 코드 (renderer XSS)
window.electron.readFile.constructor.constructor('return process')().exit();
// → Function.constructor로 임의 코드 실행 → process 객체 접근 → 앱 종료

┌──────────────────────────────────────┐
│  Renderer Window                     │
│  ┌─────────────────┐  ┌────────────┐ │
│  │ Renderer Context│  │ Preload Ctx│ │
│  │  - DOM          │  │  - require │ │
│  │  - React        │  │  - ipcRend │ │
│  │  - window.x = 1 │  │            │ │
│  └─────────────────┘  └────────────┘ │
│         ↑                  │         │
│         └──── contextBridge ┘        │
│              (gate)                  │
└──────────────────────────────────────┘

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';
 
contextBridge.exposeInMainWorld('api', {
  readFile: (path: string) => ipcRenderer.invoke('fs:read', path),
  onUpdate: (cb: (v: string) => void) => {
    const listener = (_: any, v: string) => cb(v);
    ipcRenderer.on('app:update', listener);
    return () => ipcRenderer.removeListener('app:update', listener);
  },
});

// renderer.ts — window.api로 접근
const data = await window.api.readFile('config.json');
window.api.onUpdate((v) => console.log(v));

// 공격자 시도 — 더 이상 안 통한다
window.api.readFile.constructor.constructor('return process')();
// → renderer context의 Function이라 process가 없음 → undefined

contextBridge.exposeInIsolatedWorld(1, 'api', { ... });

// ❌ 절대 금지
contextBridge.exposeInMainWorld('ipc', ipcRenderer);

// ❌ 마찬가지로 금지
contextBridge.exposeInMainWorld('api', {
  invoke: (channel: string, ...args: any[]) => ipcRenderer.invoke(channel, ...args),
});

// ✅ 좋은 설계
contextBridge.exposeInMainWorld('api', {
  // 도메인: user
  user: {
    get: (id: string) => ipcRenderer.invoke('user:get', id),
    update: (id: string, patch: UserPatch) => ipcRenderer.invoke('user:update', id, patch),
  },
  // 도메인: fs (앱 데이터 폴더 안만)
  appData: {
    read: (filename: string) => ipcRenderer.invoke('app-data:read', filename),
    write: (filename: string, content: string) => ipcRenderer.invoke('app-data:write', filename, content),
  },
  // 도메인: app
  app: {
    getVersion: () => ipcRenderer.invoke('app:get-version'),
    quit: () => ipcRenderer.send('app:quit'),
  },
});

// ❌ 위험: 임의 경로
contextBridge.exposeInMainWorld('api', {
  readFile: (path: string) => ipcRenderer.invoke('fs:read', path),
});
// main.ts
ipcMain.handle('fs:read', (_, path) => fs.readFile(path, 'utf8'));
// → '/etc/passwd' 전달 가능

// ✅ 안전: 앱 데이터 폴더 한정
contextBridge.exposeInMainWorld('api', {
  readUserConfig: (name: string) => ipcRenderer.invoke('user-config:read', name),
});
// main.ts
ipcMain.handle('user-config:read', (_, name) => {
  // 이름만 추출 — '../'  공격 차단
  const safe = path.basename(name);
  const full = path.join(app.getPath('userData'), 'config', safe);
  return fs.readFile(full, 'utf8');
});

// 옛날 패턴
new BrowserWindow({
  webPreferences: {
    nodeIntegration: true, // 디폴트
    contextIsolation: false, // 디폴트
  },
});

// renderer.ts (옛날)
const fs = require('fs');
const data = fs.readFileSync('/etc/passwd', 'utf8');

new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,        // 명시
    contextIsolation: true,        // 명시
    sandbox: true,                 // 가능하면
    webSecurity: true,             // 명시
    preload: path.join(__dirname, 'preload.js'),
  },
});

// preload.ts
import type { IpcRenderer } from 'electron';
import { contextBridge, ipcRenderer } from 'electron';
 
const api = {
  readFile: (path: string): Promise<string> => ipcRenderer.invoke('fs:read', path),
  getVersion: (): Promise<string> => ipcRenderer.invoke('app:get-version'),
} as const;
 
contextBridge.exposeInMainWorld('api', api);
 
// 타입 export
export type Api = typeof api;

// renderer/global.d.ts
import type { Api } from '../preload/preload';
 
declare global {
  interface Window {
    api: Api;
  }
}
 
export {};