Preload 스크립트와 contextBridge — 안전한 IPC 브릿지

메인 프로세스 (Node.js)
    │
    │  BrowserWindow 생성 시 preload 지정
    ▼
Preload 스크립트 실행 (Node.js + DOM 접근 가능)
    │
    │  contextBridge로 API 노출
    ▼
렌더러 프로세스 (브라우저 환경)
    │
    │  window.electronAPI 사용
    ▼

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 메인 프로세스에 요청하고 결과를 받는 패턴
  getAppVersion: () => ipcRenderer.invoke('app:getVersion'),

  // 메인 프로세스에 단방향 메시지 전송
  sendLog: (message) => ipcRenderer.send('log:write', message),

  // 메인 프로세스의 이벤트를 렌더러에서 수신
  onUpdateAvailable: (callback) =>
    ipcRenderer.on('update:available', (_event, info) => callback(info)),
});

// 렌더러 (renderer.js)
// window.electronAPI를 통해 접근합니다
const version = await window.electronAPI.getAppVersion();
console.log(`앱 버전: ${version}`);

window.electronAPI.sendLog('앱 시작됨');

window.electronAPI.onUpdateAvailable((info) => {
  console.log('업데이트가 있습니다:', info.version);
});

// contextIsolation: true일 때
// preload.js에서 window에 직접 추가해도 렌더러에서 보이지 않음
window.myAPI = { doSomething: () => {} };
// 렌더러에서 window.myAPI는 undefined!

// contextBridge를 사용해야 함
contextBridge.exposeInMainWorld('myAPI', {
  doSomething: () => {},
});
// 이제 렌더러에서 window.myAPI.doSomething() 사용 가능

// ⚠️ 위험: contextIsolation이 false일 때
// 악의적인 웹 콘텐츠가 prototype을 오염시킬 수 있음
Array.prototype.push = function() {
  // 모든 push 호출을 가로챌 수 있음
  // preload에서 사용하는 배열도 영향 받음
};

// preload.js — ipcRenderer.invoke를 직접 노출하지 않기
contextBridge.exposeInMainWorld('electronAPI', {
  // ❌ 위험: 어떤 채널이든 호출 가능
  // invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),

  // ✅ 안전: 허용된 작업만 노출
  readFile: (filePath) => {
    // 인자 타입 검증
    if (typeof filePath !== 'string') {
      throw new Error('filePath must be a string');
    }
    return ipcRenderer.invoke('file:read', filePath);
  },

  writeFile: (filePath, content) => {
    if (typeof filePath !== 'string' || typeof content !== 'string') {
      throw new Error('Invalid arguments');
    }
    return ipcRenderer.invoke('file:write', filePath, content);
  },
});

// preload.js — 리스너 정리를 위한 패턴
contextBridge.exposeInMainWorld('electronAPI', {
  onProgress: (callback) => {
    const handler = (_event, progress) => callback(progress);
    ipcRenderer.on('download:progress', handler);

    // 리스너 제거 함수를 반환
    return () => {
      ipcRenderer.removeListener('download:progress', handler);
    };
  },
});

// 렌더러에서 사용
const removeListener = window.electronAPI.onProgress((progress) => {
  updateProgressBar(progress);
});

// 컴포넌트 언마운트 시 정리
removeListener();

// preload.js
const validSendChannels = ['log:write', 'app:quit'];
const validInvokeChannels = ['file:read', 'file:write', 'app:getVersion'];
const validReceiveChannels = ['update:available', 'download:progress'];

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, ...args) => {
    if (validSendChannels.includes(channel)) {
      ipcRenderer.send(channel, ...args);
    }
  },
  invoke: (channel, ...args) => {
    if (validInvokeChannels.includes(channel)) {
      return ipcRenderer.invoke(channel, ...args);
    }
    return Promise.reject(new Error(`Invalid channel: ${channel}`));
  },
  on: (channel, callback) => {
    if (validReceiveChannels.includes(channel)) {
      const handler = (_event, ...args) => callback(...args);
      ipcRenderer.on(channel, handler);
      return () => ipcRenderer.removeListener(channel, handler);
    }
  },
});

// types/electron.d.ts
export interface ElectronAPI {
  getAppVersion: () => Promise<string>;
  readFile: (path: string) => Promise<string>;
  writeFile: (path: string, content: string) => Promise<void>;
  onProgress: (callback: (progress: number) => void) => () => void;
}

declare global {
  interface Window {
    electronAPI: ElectronAPI;
  }
}

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';
import type { ElectronAPI } from './types/electron';

const api: ElectronAPI = {
  getAppVersion: () => ipcRenderer.invoke('app:getVersion'),
  readFile: (path) => ipcRenderer.invoke('file:read', path),
  writeFile: (path, content) => ipcRenderer.invoke('file:write', path, content),
  onProgress: (callback) => {
    const handler = (_e: Electron.IpcRendererEvent, progress: number) =>
      callback(progress);
    ipcRenderer.on('download:progress', handler);
    return () => ipcRenderer.removeListener('download:progress', handler);
  },
};

contextBridge.exposeInMainWorld('electronAPI', api);

// ❌ 절대 하지 마세요
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer);
// 렌더러에서 모든 IPC 채널에 접근 가능해짐

// ❌ contextBridge는 함수만 전달 가능
contextBridge.exposeInMainWorld('api', {
  process: process,  // 에러! 객체 전체는 전달 불가
});

// ✅ 필요한 값만 함수로 감싸서 전달
contextBridge.exposeInMainWorld('api', {
  getPlatform: () => process.platform,
  getNodeVersion: () => process.versions.node,
});