security: add CSP, navigation lockdown, remove bypassCSP

liangweifeng · claude · liangweifeng · commit ce8a9ee2dd36 · 2026-03-22T17:22:21.000+08:00
Electron security audit found 3 high-severity issues:

**Content Security Policy (HIGH)**:
- No CSP existed — renderer could load arbitrary external scripts.
- Added meta CSP: `default-src 'self'`, allows `connect-src https: wss:`
  for API calls, `img-src/media-src data: media:` for local media,
  `style-src 'unsafe-inline'` for Tailwind.

**Navigation lockdown (HIGH)**:
- No `will-navigate` or `setWindowOpenHandler` — renderer could navigate
  to malicious URLs. Added `hardenWindow()` to both main and overlay
  windows: blocks foreign navigation, opens external links in system
  browser via `shell.openExternal()`.

**media:// bypassCSP (HIGH)**:
- Custom protocol had `bypassCSP: true`, which would nullify CSP for
  media resources. Removed — media files don't need to bypass CSP.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/electron/main.ts b/electron/main.ts
@@ -68,7 +68,7 @@ function setupAppMenu() {
 
 protocol.registerSchemesAsPrivileged([{
   scheme: 'media',
-  privileges: { secure: true, supportFetchAPI: true, stream: true, bypassCSP: true },
+  privileges: { secure: true, supportFetchAPI: true, stream: true },
 }]);
 
 // ─── Single Instance Lock ──────────────────────────────────────────────────
diff --git a/electron/window-manager.ts b/electron/window-manager.ts
@@ -1,7 +1,24 @@
-import { BrowserWindow, screen } from 'electron';
+import { BrowserWindow, screen, shell } from 'electron';
 import path from 'path';
 import { state, isDev, isMac } from './app-state';
 
+/** Lock down a window: block navigation to foreign URLs, open external links in system browser */
+function hardenWindow(win: BrowserWindow) {
+  // Block in-app navigation to foreign origins
+  win.webContents.on('will-navigate', (e, url) => {
+    const allowed = isDev ? 'http://localhost:5173' : `file://${path.join(__dirname, '..')}`;
+    if (!url.startsWith(allowed)) {
+      e.preventDefault();
+      shell.openExternal(url);
+    }
+  });
+  // Block new window creation; open in system browser instead
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+}
+
 export function createMainWindow() {
   state.mainWindow = new BrowserWindow({
     width: 1000,
@@ -26,6 +43,7 @@ export function createMainWindow() {
     state.mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
   }
 
+  hardenWindow(state.mainWindow);
   state.mainWindow.once('ready-to-show', () => state.mainWindow?.show());
 
   state.mainWindow.on('close', (e) => {
@@ -71,5 +89,6 @@ export function createOverlayWindow() {
     state.overlayWindow.loadFile(path.join(__dirname, '../dist/index.html'), { hash: '/overlay' });
   }
 
+  hardenWindow(state.overlayWindow);
   state.overlayWindow.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
 }
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: media:; media-src 'self' media:; connect-src 'self' https: wss:; font-src 'self'" />
     <title>OpenType</title>
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
   </head>
