04 — Preload 스크립트

[메인 월드 (React 코드)]
     ↑↓  ← contextBridge로 노출된 좁은 함수만
[isolated world (preload)]
     ↑↓  ← ipcRenderer (전권)
[IPC channel]
     ↑↓
[ipcMain (Main 프로세스)]
     ↑↓
[OS / fs / shell]

// preload.js (CommonJS)
const { contextBridge, ipcRenderer } = require('electron')
 
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  saveFile: (data) => ipcRenderer.invoke('file:save', data),
  onLog: (callback) => {
    const handler = (_event, msg) => callback(msg)
    ipcRenderer.on('log', handler)
    return () => ipcRenderer.off('log', handler)   // cleanup 반환
  },
})

// renderer.js (메인 월드)
// preload가 노출한 함수만 보인다
const file = await window.electronAPI.openFile()
console.log(file.contents)
 
// 이런 건 안 보인다 — preload는 격리된 isolate
console.log(typeof require)          // 'undefined'
console.log(typeof ipcRenderer)      // 'undefined'

// main.js
const { ipcMain, dialog } = require('electron')
const fs = require('node:fs/promises')
 
ipcMain.handle('dialog:openFile', async () => {
  const r = await dialog.showOpenDialog({ properties: ['openFile'] })
  if (r.canceled) return null
  const contents = await fs.readFile(r.filePaths[0], 'utf8')
  return { path: r.filePaths[0], contents }
})

// preload.js — 절대 이렇게 하지 마세요
window.api = {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
}

// preload.mjs
import { contextBridge, ipcRenderer } from 'electron/renderer'
 
contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
})

// main.js
new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.mjs'),
    sandbox: false,   // ESM preload는 현재 sandbox와 함께 못 씀 (v28 기준)
  },
})

// preload.js — 이러면 contextBridge를 쓰는 의미가 없다
contextBridge.exposeInMainWorld('electronAPI', {
  ipcRenderer,   // ← 통째 노출. 사실상 'nodeIntegration: true'와 같음
})
 
// → 메인 월드에서 window.electronAPI.ipcRenderer.send('exec', '...') 가능

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
})
 
// → 메인 월드가 임의 채널 호출 가능. allow-list가 없으면 RCE 통로.

const ALLOWED = ['dialog:openFile', 'file:save', 'log:append']
 
contextBridge.exposeInMainWorld('electronAPI', {
  invoke: (channel, ...args) => {
    if (!ALLOWED.includes(channel)) {
      throw new Error(`channel not allowed: ${channel}`)
    }
    return ipcRenderer.invoke(channel, ...args)
  },
})

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  saveFile: (data) => {
    // 타입 체크도 여기서
    if (typeof data !== 'string') throw new Error('data must be string')
    return ipcRenderer.invoke('file:save', data)
  },
  onLog: (cb) => {
    if (typeof cb !== 'function') return
    const h = (_e, msg) => cb(msg)
    ipcRenderer.on('log', h)
    return () => ipcRenderer.off('log', h)
  },
})

// main.js
const PRELOAD = path.join(__dirname, 'preload.js')
 
const editorWin = new BrowserWindow({ webPreferences: { preload: PRELOAD } })
const settingsWin = new BrowserWindow({ webPreferences: { preload: PRELOAD } })

// 에디터 창은 파일 저장 가능
const editorWin = new BrowserWindow({
  webPreferences: { preload: path.join(__dirname, 'preload-editor.js') }
})
 
// 설정 창은 설정만 읽기/쓰기
const settingsWin = new BrowserWindow({
  webPreferences: { preload: path.join(__dirname, 'preload-settings.js') }
})

// types/electron-api.d.ts
export interface ElectronAPI {
  openFile: () => Promise<{ path: string; contents: string } | null>
  saveFile: (data: string) => Promise<void>
  onLog: (cb: (msg: string) => void) => () => void
}
 
declare global {
  interface Window {
    electronAPI: ElectronAPI
  }
}