The user wants to know how to convert a React + FastAPI application into a desktop application using Electron, with a focus on security so that less data is leaked when delivering the desktop app to clients. They mentioned they'll render my response in an iframe in a web browser, so if I use external libraries, I should include full HTML in a single code block with `` and then JS moves it into `
` with textContent, then highlights. But careful: `` inside the code would break — my code samples don't contain ``... Actually the HTML for React index might. Let me avoid `` in samples or split it. I can write `<\/script>` won't work in plain text script tags — the parser ends at the first `` concatenation in the JS when injecting. Simpler: avoid it.

Actually, simpler still: escape manually with < etc. But with lots of code that's error-prone. The ``.

Structure of the page:

1. Hero: title, subtitle, quick stats
2. Architecture section with diagram
3. Step 1: Freeze FastAPI into a binary
4. Step 2: Point React at the local backend
5. Step 3: Electron main process
6. Step 4: Package with electron-builder
7. Step 5: Security hardening (multiple subsections)
   - What actually leaks (table)
   - Renderer hardening
   - ASAR + integrity + fuses
   - Lock down the local API
   - Secrets & data at rest
   - Obfuscation
   - Code signing
   - Licensing
8. Threat model / honest limits
9. Interactive checklist
10. Build commands summary / repo layout

Sidebar nav with scroll spy.

Let me write the code samples carefully.

**Backend entry (backend/entry.py):**

```python
import argparse, logging, os, secrets, sys

# Silence uvicorn/requests logs so stdout stays clean for Electron
logging.disable(logging.WARNING)

def main():
    parser = argparse.ArgumentParser()
    parser.add_argument("--port", type=int, required=True)
    parser.add_argument("--token", required=True)   # shared secret from Electron
    args = parser.parse_args()

    os.environ["APP_TOKEN"] = args.token

    from app.main import app          # import AFTER env is set
    import uvicorn

    uvicorn.run(
        app,
        host="127.0.0.1",             # NEVER 0.0.0.0
        port=args.port,
        log_level="warning",
        access_log=False,             # don't write request logs to disk
    )

if __name__ == "__main__":
    main()
```

**PyInstaller:**

```bash
pip install pyinstaller
pyinstaller entry.py \
  --onefile \
  --name myapp-backend \
  --clean \
  --noconfirm \
  --hidden-import app.main \
  --hidden-import uvicorn.logging \
  --hidden-import uvicorn.loops.auto \
  --hidden-import uvicorn.protocols.http.auto \
  --add-data "app:app"        # Windows uses ; instead of :
```

Note: `--add-data` separator is `:` on macOS/Linux, `;` on Windows.

Mention Nuitka alternative for stronger protection:
```bash
pip install nuitka
python -m nuitka --onefile --standalone entry.py
```

**Vite config:**

```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',                 // relative paths so it works from asar
  build: {
    outDir: 'build',
    sourcemap: false,         // never ship source maps
  },
  server: {
    proxy: {
      '/api': 'http://127.0.0.1:8000',   // dev only
    },
  },
})
```

**Electron main (electron/main.js):**

```js
const { app, BrowserWindow, shell } = require('electron')
const { spawn } = require('child_process')
const net = require('net')
const path = require('path')
const crypto = require('crypto')
const http = require('http')

let backendProcess = null
let mainWindow = null

const isDev = !app.isPackaged
const TOKEN = crypto.randomBytes(32).toString('hex')

function backendBinaryPath() {
  if (isDev) return path.join(__dirname, '..', 'backend', 'entry.py')
  return path.join(process.resourcesPath, 'backend', 'myapp-backend')
}

function freePort() {
  return new Promise((resolve) => {
    const srv = net.createServer()
    srv.listen(0, '127.0.0.1', () => {
      const { port } = srv.address()
      srv.close(() => resolve(port))
    })
  })
}

async function startBackend(port) {
  const args = ['--port', String(port), '--token', TOKEN]
  const cmd = isDev ? 'python' : backendBinaryPath()
  if (isDev) args.unshift(backendBinaryPath())

  backendProcess = spawn(cmd, args, {
    stdio: ['ignore', 'pipe', 'pipe'],
    env: { ...process.env },
  })

  // Never print the token; swallow backend output in production
  backendProcess.stdout.on('data', () => {})
  backendProcess.stderr.on('data', () => {})
}

function waitForBackend(port, timeoutMs = 30000) {
  const deadline = Date.now() + timeoutMs
  return new Promise((resolve, reject) => {
    const ping = () => {
      const req = http.get(
        { host: '127.0.0.1', port, path: '/health', timeout: 1000 },
        (res) => (res.statusCode === 200 ? resolve() : retry())
      )
      req.on('error', retry)
      function retry() {
        Date.now() > deadline
          ? reject(new Error('backend start timeout'))
          : setTimeout(ping, 300)
      }
    }
    ping()
  })
}
```

Then createWindow with security:

```js
function createWindow(port) {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,       // default, keep it
      nodeIntegration: false,       // default, keep it
      sandbox: true,
      webSecurity: true,
      devTools: !app.isPackaged,    // no devtools in production
    },
  })

  // Block ALL navigation away from the app
  mainWindow.webContents.on('will-navigate', (e, url) => {
    if (!url.startsWith('http://127.0.0.1')) e.preventDefault()
  })
  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
    shell.openExternal(url)   // external links go to the real browser
    return { action: 'deny' }
  })

  // CSP: lock the renderer down
  session.defaultSession.webRequest.onHeadersReceived((details, cb) => {
    cb({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src http://127.0.0.1:*; img-src 'self' data:"
        ],
      },
    })
  })

  if (isDev) {
    mainWindow.loadURL('http://localhost:5173')
  } else {
    mainWindow.loadFile(path.join(__dirname, '..', 'build', 'index.html'))
  }
}
```

Hmm wait — CSP with `connect-src http://127.0.0.1:*` — if loading via loadFile, the onHeadersReceived won't fire for file:// loads. Better to set CSP via a meta tag in index.html, or use `session.webRequest.onHeadersReceived` which only applies to http(s). For file:// I should use the meta tag approach. Let me simplify: recommend the meta tag in React's index.html. That works for both http and file protocols.

Meta tag:
```html

```

Careful — I said I'd avoid `` — a meta tag has no closing tag, fine. But this sample is HTML — if I use the script-type-text/plain trick, HTML inside is fine as long as no ` ipcRenderer.invoke('app:getVersion'),
})
```

Hmm, better to pass via additionalArguments or process.argv in preload. When using loadFile with query params: `loadFile('index.html', { query: { port } })` — then in preload, `process.argv` includes the query? Actually with `additionalArguments` in webPreferences it's cleaner. Let me show:

main.js: 
```js
webPreferences: {
  preload: ...,
  additionalArguments: [`--backend-url=http://127.0.0.1:${port}`, `--token=${TOKEN}`],
}
```
preload.js:
```js
const args = process.argv.filter(a => a.startsWith('--backend'))
const get = (k) => args.find(a => a.startsWith(`--${k}=`))?.split('=')[1]

contextBridge.exposeInMainWorld('desktop', {
  backendUrl: get('backend-url'),
  token: get('token'),
})
```

**FastAPI hardening:**

```python
# app/main.py
from fastapi import FastAPI, Request, HTTPException, Depends
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
import os, secrets

TOKEN = os.environ["APP_TOKEN"]          # injected by Electron
security = HTTPBearer(auto_error=False)

app = FastAPI(
    docs_url=None,        # ⛔ never expose /docs
    redoc_url=None,       # ⛔ never expose /redoc
    openapi_url=None,     # ⛔ never expose /openapi.json
)

@app.middleware("http")
async def lock_down(request: Request, call_next):
    # 1. Only our own renderer may call this API
    auth = request.headers.get("Authorization", "")
    if not secrets.compare_digest(auth, f"Bearer {TOKEN}"):
        raise HTTPException(401)
    # 2. Reject weird host headers (DNS-rebinding style attacks)
    if request.headers.get("host", "").split(":")[0] not in ("127.0.0.1", "localhost"):
        raise HTTPException(400)
    return await call_next(request)
```

Note: for /health, need to skip auth — I'll mention exempting /health or having Electron send the token on the health check too. Simpler: make health check include the token header. Let me include the token in the http.get health check in main.js. I'll add header to the health request. Actually in my waitForBackend code above I used http.get with options; I can add headers: { Authorization: `Bearer ${TOKEN}` }. Let me do that to keep middleware simple. Or the middleware can exempt `/health` but then any local process can poll health — harmless. I'll exempt /health from token but note it's intentional. Hmm, cleaner to just send the header everywhere including health. Let me add headers to the health ping.

**electron-builder.yml:**

```yaml
appId: com.yourcompany.yourapp
productName: YourApp
directories:
  output: dist-desktop

files:
  - electron/**/*
  - build/**/*          # React production build
  - package.json

asar: true              # pack renderer + main into app.asar

extraResources:
  - from: dist-backend/myapp-backend
    to: backend
    filter: ["**/*"]

win:
  target: nsis
  # sign:
  #   certificateSubjectName: "Your Company LLC"

mac:
  target: dmg
  hardenedRuntime: true
  gatekeeperAssess: false
  entitlements: build/entitlements.mac.plist
  notarize: true

nsis:
  oneClick: false
  perMachine: false
  deleteAppDataOnUninstall: true

# Verify that the shipped binary matches what we built (anti-tamper)
afterPack: ./scripts/fuses.js
```

Hmm, afterPack is for fuses actually; checksum verify could be in a hook too. Let me keep fuses in afterPack.

**Fuses script (scripts/fuses.js):**

```js
const { fuseV2, FUSE_V2_OPTIONS, flipFuses } = require('@electron/fuses')
const path = require('path')

async function run(afterPackContext) {
  const exePath = afterPackContext.appOutDir
    ? path.join(afterPackContext.appOutDir, require('electron/package.json').name.startsWith('electron') ? 'electron' : 'electron')
    : null
```

Hmm, the executable name differs per platform (YourApp.exe on win, YourApp.app/Contents/MacOS/YourApp). Common recipe:

```js
const { flipFuses, FuseVersion, FuseV1Options } = require('@electron/fuses')
const path = require('path')

module.exports = async function (context) {
  const electronBinaryPath =
    context.electronPlatformName === 'win32'
      ? path.join(context.appOutDir, `${context.packager.appInfo.productFilename}.exe`)
      : context.electronPlatformName === 'darwin'
        ? path.join(context.appOutDir, `${context.packager.appInfo.productFilename}.app/Contents/MacOS/${context.packager.appInfo.productFilename}`)
        : path.join(context.appOutDir, context.packager.appInfo.productFilename)

  await flipFuses(electronBinaryPath, {
    version: FuseVersion.V1,
    [FuseV1Options.RunAsNode]: false,              // disables ELECTRON_RUN_AS_NODE
    [FuseV1Options.EnableCookieEncryption]: true,  // encrypt cookies with OS key
    [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
    [FuseV1Options.EnableNodeCliInspectArguments]: false,  // blocks --inspect
    [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
    [FuseV1Options.OnlyLoadAppFromAsar]: true,
    [FuseV1Options.LoadBrowserProcessSpecificV8Snapshot]: false,
  })
}
```

That's the standard recipe. 

**Obfuscation (vite plugin):**

```bash
npm i -D vite-plugin-obfuscator javascript-obfuscator --save-exact
```

Hmm, actually the plugin is `vite-plugin-obfuscator` (wraps javascript-obfuscator). Config:

```js
import obfuscator from 'vite-plugin-obfuscator'

plugins: [
  react(),
  obfuscator({
    apply: 'build',
    options: {
      compact: true,
      controlFlowFlattening: true,
      controlFlowFlatteningThreshold: 0.5,
      stringArray: true,
      stringArrayEncoding: ['rc4'],
      stringArrayThreshold: 0.75,
      transformObjectKeys: true,
      selfDefending: true,
    },
  }),
]
```

Note tradeoff: performance hit and bundle size. Warn about over-obfuscation.

**Secrets at rest — safeStorage:**

```js
// main process
const { safeStorage } = require('electron')

function saveRefreshToken(token) {
  const enc = safeStorage.isEncryptionAvailable()
    ? safeStorage.encryptString(token)
    : Buffer.from(token)
  fs.writeFileSync(path.join(app.getPath('userData'), 'token.bin'), enc)
}
```

**Licensing (signed license file):**

Python side verifying Ed25519 — maybe keep this conceptual with a short sample:

```python
# Sign offline (your machine):
# openssl / cryptography — sign the license payload with Ed25519 private key
from cryptography.hazmat.primitives.asymmetric.ed25519 import Ed25519PublicKey
import base64, json

def verify_license(pubkey_b64: str, license_b64: str, sig_b64: str) -> bool:
    pub = Ed25519PublicKey.from_public_bytes(base64.b64decode(pubkey_b64))
    try:
        pub.verify(base64.b64decode(sig_b64), license_b64.encode())
        return json.loads(base64.b64decode(license_b64))
    except Exception:
        return None
```

Keep it brief — concept: public key ships in the app, private key never leaves you. 

**Table: what leaks & the fix**

| Leak vector | Default state | Fix |
|---|---|---|
| React bundle (app.asar) | plain minified JS | obfuscate, no sourcemaps, asar integrity |
| FastAPI source | .py files, fully readable | PyInstaller (bytecode) or Nuitka (machine code) |
| API schema | /docs, /openapi.json public | disable docs, token-gate everything |
| Local API | any process on the machine can call it | 127.0.0.1 + random port + bearer token |
| Secrets in code | extractable from asar | keep server-side / OS keychain / safeStorage |
| Database | plaintext SQLite | SQLCipher / encrypted storage |
| Update channel | MITM swap | code-sign installers, HTTPS + pinned certs |

**Honest threat model box:**
- "Anyone with the binary owns the machine it runs on." Client-side obfuscation raises cost, it doesn't create impossibility. Move secrets, licensing validation, and anything truly valuable to a server you control. If the app must be fully offline, accept that a skilled attacker with a debugger can always see what the app does.

**Build pipeline summary:**

```
1. cd backend && pyinstaller entry.py --onefile ...
2. cd frontend && npm run build          # vite build → build/
3. npx electron-builder --win --mac --linux
```

package.json scripts:

```json
{
  "scripts": {
    "build:backend": "cd backend && pyinstaller entry.py --onefile --name myapp-backend",
    "build:frontend": "vite build",
    "build:desktop": "npm run build:backend && npm run build:frontend && electron-builder",
    "start": "concurrently \"vite\" \"wait-on http://localhost:5173 && electron .\""
  }
}
```

**Interactive checklist** — list ~16 items with checkboxes and a progress bar. Nice interactive element.

**Directory layout:**

```
your-app/
├─ backend/
│  ├─ app/
│  │  └─ main.py
│  └─ entry.py              # PyInstaller entry point
├─ frontend/                 # React (Vite)
│  ├─ src/
│  ├─ index.html             # add CSP meta tag
│  └─ vite.config.js
├─ electron/
│  ├─ main.js
│  └─ preload.js
├─ scripts/
│  └─ fuses.js               # afterPack fuse flipper
├─ electron-builder.yml
└─ package.json
```

Also dev-mode proxy note for React dev.

Also: app quit cleanup:

```js
app.on('before-quit', (e) => {
  if (backendProcess) {
    e.preventDefault()
    backendProcess.kill()
    setTimeout(() => app.exit(0), 500)
  }
})
```

On Windows, tree-kill might be needed if backend spawns children (uvicorn workers). Mention `taskkill /PID  /T /F` on Windows.

Now the HTML page design. Let me go with:

- **Theme**: dark, deep slate background (#0b0f14 / #0d1117-like), accent color — maybe emerald/teal (FastAPI vibes: #009688 teal) plus Electron purple? FastAPI is teal (#009688), React cyan-blue (#61dafb), Electron purple-ish (#47848f actually Electron's color is #9FEAF9 teal-ish). Let me use a teal/emerald accent (#2dd4bf / #14b8a6) with subtle gradient. 
- **Fonts**: Inter for UI, JetBrains Mono for code (Google Fonts CDN).
- **Layout**: fixed sidebar (left, ~240px) on desktop, collapsible on mobile; main content max-width ~860px.
- **Components**:
  - Hero with title, description, and a mini architecture diagram
  - Step cards with numbered badges
  - Code blocks: header bar with language label + copy button; highlight.js for syntax
  - Callout boxes: warning (amber), danger (red), tip (green), info (blue)
  - Table for leak vectors
  - Checklist with progress ring or bar
  - Threat model box
- **Interactions**: scroll-spy nav, smooth scroll, copy-to-clipboard with feedback, checklist progress, maybe collapsible details.
- **Syntax highlighting**: highlight.js CDN with a custom-tweaked theme via CSS variables (I'll use github-dark-ish colors manually or load atom-one-dark theme CSS from CDN and tweak background).

Let me use:
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css
- Google fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap

For code injection, I'll use `
    

    
    
      STEP 01 · BACKEND
      Freeze FastAPI into a binary
      Never ship .py files — they're plain text. Turn the whole backend into one executable that Electron can spawn.

      The CLI entry point
      Electron will pass the port, a per-launch token and the data directory as arguments. Keep stdout clean — it's a process boundary, not a log file.

      

      The app itself (minimal for now — hardened in step 08)

      

      
        💡 Disabling docs is not cosmetic
        A default FastAPI build happily serves your entire API schema at /openapi.json to anyone who finds the port. Three Nones close the door.
      

      Compile with PyInstaller

      

      
        ⚠️ Two PyInstaller traps
        1. Never --add-data your .py source — imported modules are compiled into the bundle automatically; add-data is for assets only (models, templates). Otherwise you ship readable source next to the binary.
        2. PyInstaller bundles bytecode, and tools like pyinstxtractor can pull it back out. It stops casual readers, not experts.
      

      For high-value logic: Nuitka (true machine code)
      Nuitka compiles Python to C and links a real binary — there is no bytecode to extract. Slower builds, much stronger protection:

      
    

    
    
      STEP 02 · FRONTEND
      Point React at the local backend
      Three small changes: relative asset paths, a strict Content-Security-Policy, and one fetch wrapper that carries the auth token.

      

      Add a strict CSP to index.html
      
      Scripts may only load from the bundle itself — no inline script, no remote script, ever. If a build plugin injects inline scripts, it will break loudly, which is exactly what you want.

      One fetch wrapper, one place
      
      window.desktop is injected by the preload script in the next step — it carries the random backend URL and the one-time token, neither of which exists in the React source.
    

    
    
      STEP 03 · SHELL
      Build the Electron shell
      The main process is your security brain: it owns the port, the token and the backend's life cycle. The renderer gets none of those powers.

      

      The preload bridge — the renderer's only window to the world
      

      
        ⚠️ Dev-mode notes
        Development spawns python backend/entry.py, so your active Python env needs pip install -r backend/requirements.txt (or point the spawn at your venv's interpreter). Also consider app.requestSingleInstanceLock() to prevent two copies running at once.
      
    

    
    
      STEP 04 · PACKAGING
      Package it with electron-builder
      The React build and Electron code go into app.asar; the compiled backend rides along as an extraResource.

      

      
    

    
    
      HARDENING · 05
      What leaks by default — and the fix
      A naive Electron+Python build hands over almost everything: your source, your API map, your secrets. Here's the honest damage report.

      
        
          What leaks Why The fix
          
            Your entire React source app.asar is a plain archive — npx asar extract reads it in seconds; minification stops nobody Obfuscate the bundle, ship zero source maps, use asar integrity to block modified copies (step 07 & 10)
            Your whole API surface FastAPI serves /docs and /openapi.json by default docs_url=None, redoc_url=None, openapi_url=None
            Python backend source Shipping .py files = shipping plain text PyInstaller (bytecode) or Nuitka (machine code) — step 01
            API callable by any local process Fixed port, no auth — any app on the machine (or a malicious webpage via DNS rebinding) can call it 127.0.0.1 + random port + per-launch bearer token (step 08)
            API keys & DB credentials Hard-coded values are extractable from asar or strings on the binary They simply don't ship — fetch at runtime, store in OS keychain (step 09)
            Local user data Plain-text SQLite / JSON files in the user profile SQLCipher or safeStorage-encrypted files (step 09)
            Tampered copies run fine Unsigned binaries can be patched and re-distributed Code signing + asar integrity + fuses (steps 07 & 11)
            Malicious "updates" An unauthenticated update feed lets an attacker swap your app Signed installers + electron-updater with publisherName (step 11)
          
        
      
    

    
    
      HARDENING · 06
      Lock down the renderer
      The renderer is the most exposed surface — it runs your React code and touches user input. Treat it as untrusted by default. All settings below were already wired into main.js in step 03.

      
        
          ✓ ALWAYS
          
            contextIsolation: true — renderer can't touch Node internals
            sandbox: true — hardened OS-level sandbox around the renderer
            nodeIntegration: false — no require() inside React
            webSecurity: true — same-origin policy enforced
            Expose the minimum via a tiny preload bridge
            Deny every permission request by default
            Block navigation & popups; open external links in the real browser
            Strict CSP — scripts only from 'self'
          
        
        
          ✗ NEVER
          
            webSecurity: false — disables CORS & same-origin protections
            nodeIntegration: true — one XSS away from full system access
            contextIsolation: false
            Loading remote URLs into your window
            API keys or DB passwords in .env files packed into the asar
            Shipping source maps (even "hidden" ones)
            Trusting IPC messages without validating their shape in the main process
          
        
      

      
        💡 Why this matters more than DevTools
        People obsess over hiding DevTools. The real risk is blast radius: with these flags, even a full XSS in your React app gives the attacker… a sandboxed page that can call your local API. Without them, it gives them the operating system.
      
    

    
    
      HARDENING · 07
      ASAR, fuses & integrity
      app.asar is a container, not encryption — anyone can extract and read it. Its security value is integrity: a tampered archive refuses to boot. Electron "fuses" flip hardcoded security switches inside the binary itself.

      

      
        RunAsNode → off: stops attackers repurposing your signed electron.exe as a generic Node runtime.
        NodeOptions + inspect → off: kills environment-variable code injection and debugger attachment.
        Embedded asar integrity: electron-builder embeds a hash of app.asar; Electron verifies it at startup — works out of the box on Windows, requires a signed build on macOS (which you want anyway).
        OnlyLoadAppFromAsar: the app can never be swapped to run loose files.
      

      
        ⚠️ asarUnpack is a hole
        Anything in asarUnpack sits next to the archive as plain, patchable files. Avoid it unless a native module absolutely requires it — and know exactly what you're exposing.
      
    

    
    
      HARDENING · 08
      Guard the local API
      Without a guard, any process on the machine — or a malicious website doing DNS rebinding — can call your backend if it guesses the port. Close it with three locks: loopback only, random port, per-launch token.

      

      
        🔒 What this actually stops — be honest with yourself
        This stops other users' processes, remote pages and casual scripts from touching your API. A process running as the same user can, on some OSes, read another process's command line or memory — no client-side trick fully defends against that. It raises the bar from "free" to "deliberate"; that's the goal.
      
    

    
    
      HARDENING · 09
      Secrets & data at rest
      One rule above all: if it must stay secret, it must not ship. Anything inside the installer can eventually be extracted. For secrets the app genuinely needs at runtime, use the operating system's vault.

      

      
        Vendor API keys (Stripe, maps, AI…): if the key must never be used by the client, proxy those calls through a tiny server you host — that's the only real protection.
        Local database: use SQLite with SQLCipher (pysqlcipher3), or encrypt sensitive columns with Fernet and keep the key in safeStorage.
        Keep everything in one place: Electron passes --data-dir = app.getPath('userData'); never scatter files around the install dir.
        Logs: access_log=False, redact tokens, no secrets in log lines, and delete on uninstall (already set in the NSIS config).
        If the backend calls external APIs over HTTPS, add certificate pinning in Python (custom SSL context in httpx/requests) so a rogue proxy can't snoop the traffic.
      
    

    
    
      HARDENING · 10
      Obfuscate the JavaScript
      Minified ≠ unreadable — it de-minifies in one click. Real obfuscation flattens control flow and encrypts string literals, turning a 10-minute read into hours.

      

      
        ⚠️ Obfuscation has a price
        Heavy settings bloat the bundle and slow startup — and buggy configs can break runtime code. Test the packaged app end-to-end after every change. Obfuscate the parts worth protecting; UI boilerplate doesn't need triple-RC4.
      
    

    
    
      HARDENING · 11
      Code signing & updates
      Signing is what turns "a random .exe from the internet" into "Your Company LLC". It's both a trust signal for users and the foundation of tamper detection.

      
        Windows: buy an OV or EV code-signing certificate (DigiCert, SSL.com, Certum…). electron-builder signs automatically once certificateSubjectName is set. EV certs get instant SmartScreen reputation — no "unknown publisher" wall for your client.
        macOS: join the Apple Developer Program, create a "Developer ID Application" certificate, enable hardenedRuntime and notarization (env vars APPLE_ID, APPLE_APP_SPECIFIC_PASSWORD, APPLE_TEAM_ID). Unsigned mac apps are blocked by Gatekeeper outright.
        Updates: use electron-updater over HTTPS. On Windows it verifies the update's publisher name against your config before running it:
      

      

      
        🚨 The update channel is an attack channel
        If your update feed isn't authenticated, an attacker who can intercept traffic (or socially engineer a URL) can push a malicious build to every client. Signed binaries + verified publisher + HTTPS feed = closed.
      
    

    
    
      HARDENING · 12
      Licensing
      Since you're delivering to a client, bind the app to a license you can verify offline — signed with a key that never leaves your machine.

      
        You keep the Ed25519 private key; only the public key ships with the app.
        A license is a small JSON payload — customer, expiry, machine fingerprint (e.g. machine-uid) — signed by you.
        The backend verifies the signature at startup and refuses to serve without it. An attacker can't forge a license without your private key.
      

      

      For stronger control, add online activation: short-lived tokens refreshed from a licensing server you run — which also lets you revoke licenses remotely.
    

    
    
      STEP 13 · REALITY CHECK
      The honest threat model
      A binary that runs on a machine you don't control can, eventually, be understood by the person who controls that machine. Read this before you promise anyone "unbreakable".

      
        🧨 The uncomfortable truth
        Every technique in this guide converts "right-click → extract → read in 10 minutes" into "days with a disassembler". That is often exactly the protection a B2B product needs — and frequently more than the contract requires. What no client-side technique can ever give you is mathematical secrecy of anything that ships.
      

      
        
          ✓ What you CAN guarantee
          
            No secret keys ship inside the installer
            Local user data is encrypted at rest
            The local API can't be called by other apps or web pages
            Tampered or re-signed copies refuse to run
            Forged licenses are cryptographically impossible
          
        
        
          ✗ What you CANNOT
          
            Stop a determined expert from reading business logic
            Hide endpoint URLs from someone debugging their own process
            Prevent offline patching of client-side checks
            Protect anything by "hiding" it in the bundle
          
        
      

      So classify your assets by value — and pick the cheapest tier that protects each one:

      
        Minify onlystops nobody
        Obfuscate + ASAR + fusesstops casual extraction
        Compiled backendstops most logic reverse-engineering
        Keep it server-sidethe only real guarantee
      
      attacker cost rises →

      And don't forget the two protections that outrank all code: a solid license agreement (law beats obfuscators against corporate clients) and an architecture that keeps the crown jewels behind an API you host.
    

    
    
      STEP 14 · PRE-SHIP
      Security checklist
      Tick these off before every release. Your progress is tracked live.

      
        
          0 / 16
          Unprotected
hardening level
          
        
        
      

      
        01Backend is a compiled binaryNo .py files in the shipped package — PyInstaller minimum, Nuitka for high-value logic
        02Backend binds to 127.0.0.1 only, on a random portChosen fresh at every launch by the main process
        03/docs, /redoc and /openapi.json disabledThe API surface is never published
        04Per-launch bearer token on every requestBackend rejects anything without it
        05Host header validatedDNS-rebinding defence in the middleware
        06No source maps in the React buildsourcemap: false, and verify the build output
        07JS bundle obfuscatedControl-flow flattening + string encoding, tested end-to-end
        08contextIsolation + sandbox on, nodeIntegration offRenderer treated as untrusted code
        09DevTools disabled in production, inspect/Node fuses offPlus RunAsNode and NODE_OPTIONS fuses
        10Navigation and popups blockedThe window may only ever talk to 127.0.0.1
        11Strict CSP in index.htmlScripts restricted to 'self'
        12All permission requests denied by defaultsetPermissionRequestHandler → callback(false)
        13ASAR + OnlyLoadAppFromAsar + integrity validationTampered archives refuse to boot
        14No secrets in the bundleRuntime secrets live in the OS keychain via safeStorage
        15Local data encrypted at restSQLCipher or safeStorage-encrypted files in userData
        16Installers and updates are signedAuthenticode on Windows, Developer ID + notarization on macOS, verified update publisher
      
    

    
    
      STEP 15 · SHIP
      Build & ship
      The full pipeline, from clean checkout to signed installer.

      

      
        🔍 Test like an attacker, before the client does
        Install your own release on a clean VM, then:
        • Go offline — the app must work fully offline (it's a desktop app now).

        • Run npx asar extract on your own app.asar — you should see only obfuscated bundles and zero keys, passwords or tokens.

        • Run strings release/YourApp.exe | grep -i secret as a sanity check.

        • While the app runs, confirm nothing listens on non-loopback interfaces (netstat / lsof -i).

        • Try modifying one file inside app.asar — the app must refuse to start.
      

      
        React ⇄ FastAPI ⇄ Electron — package the trio, then harden in this order: close the docs, compile the backend, kill the source maps, flip the fuses, sign the binaries, keep the secrets server-side.
      
    

  








```

**The short version, if you're skimming:**

- **Architecture**: React builds to static files inside `app.asar`; FastAPI is compiled with **PyInstaller** (or **Nuitka** for real machine-code protection) and spawned by Electron on `127.0.0.1:` with a **per-launch bearer token** — the renderer never knows the port or token at build time.
- **Biggest security wins** (in order of impact): disable `/docs`, `/redoc`, `/openapi.json`; compile the Python (never ship `.py` files); `sourcemap: false` + JS obfuscation; Electron **fuses** (RunAsNode off, asar integrity on, OnlyLoadAppFromAsar); `contextIsolation` + `sandbox` + no `nodeIntegration`; **code-sign** installers and updates; secrets go in the OS keychain via `safeStorage` — never in the bundle.
- **The honest truth**: code on a client's machine can never be made unreadable — only expensive to read. Anything that must remain truly secret (keys, critical logic) should stay on a server you control, with the desktop app as a client. The license agreement does the rest.
What leaks	Why	The fix
Your entire React source	`app.asar` is a plain archive — `npx asar extract` reads it in seconds; minification stops nobody	Obfuscate the bundle, ship zero source maps, use asar integrity to block modified copies (step 07 & 10)
Your whole API surface	FastAPI serves `/docs` and `/openapi.json` by default	`docs_url=None, redoc_url=None, openapi_url=None`
Python backend source	Shipping `.py` files = shipping plain text	PyInstaller (bytecode) or Nuitka (machine code) — step 01
API callable by any local process	Fixed port, no auth — any app on the machine (or a malicious webpage via DNS rebinding) can call it	127.0.0.1 + random port + per-launch bearer token (step 08)
API keys & DB credentials	Hard-coded values are extractable from asar or `strings` on the binary	They simply don't ship — fetch at runtime, store in OS keychain (step 09)
Local user data	Plain-text SQLite / JSON files in the user profile	SQLCipher or safeStorage-encrypted files (step 09)
Tampered copies run fine	Unsigned binaries can be patched and re-distributed	Code signing + asar integrity + fuses (steps 07 & 11)
Malicious "updates"	An unauthenticated update feed lets an attacker swap your app	Signed installers + electron-updater with `publisherName` (step 11)
react to electron
