feat(browser): in-app browser tab with webview security hardening

- Globe button in panel tab bars opens an embedded browser tab
  (Electron <webview>), gated behind posthog-code-browser-tab flag
- Main-process hardening: preload/node stripped from guests, scheme
  allowlist (http/https/about), link-local metadata range blocked,
  powerful permissions denied, popups routed http(s)-only to OS browser
- Address bar normalizes input (scheme passthrough, host detection,
  search fallback); disallowed schemes become searches
- Last committed url persists on the tab for restore-on-reload

Generated-By: PostHog Code
Task-Id: 4bc7193a-bc2b-4365-8435-a6b20cd00c08

Author: MattPua

apps/code/src/main/window.ts

@@ -120,6 +120,103 @@ function setupExternalLinkHandlers(window: BrowserWindow): void {
   });
 }
 
+// The authoritative gate for the in-app browser guest: main process, where a
+// guest page can't route around it. The renderer's normalizeAddress is only a
+// convenience on top of this.
+const ALLOWED_WEBVIEW_SCHEMES = new Set(["http:", "https:", "about:"]);
+
+// The link-local range (incl. cloud metadata 169.254.169.254) can hand out
+// instance credentials. Loopback and LAN are deliberately allowed — reaching a
+// local dev server is a first-class use of a coding tool's browser.
+function isBlockedWebviewHost(hostname: string): boolean {
+  return /^169\.254\./.test(hostname);
+}
+
+function safeProtocol(url: string): string {
+  try {
+    return new URL(url).protocol;
+  } catch {
+    return "";
+  }
+}
+
+function isAllowedWebviewNavigation(url: string): boolean {
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  return (
+    ALLOWED_WEBVIEW_SCHEMES.has(parsed.protocol) &&
+    !isBlockedWebviewHost(parsed.hostname)
+  );
+}
+
+// The guest runs on a shared persisted profile, so a single grant would stick
+// across every tab and task — deny powerful permissions outright.
+const DENIED_WEBVIEW_PERMISSIONS = new Set([
+  "media", // camera + microphone
+  "geolocation",
+  "notifications",
+  "midi",
+  "midiSysex",
+  "hid",
+  "serial",
+  "usb",
+  "pointerLock",
+  "idle-detection",
+  "openExternal", // popups are already routed through our own handler
+]);
+
+// Hardens <webview> guests used by the in-app browser tab. The guest renders
+// arbitrary untrusted web content inside a privileged app window.
+function setupWebviewHandlers(window: BrowserWindow): void {
+  // Strip any preload / node access an attacker page might request.
+  window.webContents.on("will-attach-webview", (_event, webPreferences) => {
+    webPreferences.preload = undefined;
+    webPreferences.nodeIntegration = false;
+    webPreferences.contextIsolation = true;
+  });
+
+  window.webContents.on("did-attach-webview", (_event, guest) => {
+    // Deny at both request time (prompts) and check time (sync fast-paths like
+    // navigator.permissions.query).
+    guest.session.setPermissionRequestHandler((_wc, permission, callback) => {
+      callback(!DENIED_WEBVIEW_PERMISSIONS.has(permission));
+    });
+    guest.session.setPermissionCheckHandler(
+      (_wc, permission) => !DENIED_WEBVIEW_PERMISSIONS.has(permission),
+    );
+
+    guest.setWindowOpenHandler(({ url }) => {
+      // http(s)-only: a hostile page must not launch external protocol
+      // handlers (smb:, file:, custom app URIs) via window.open.
+      if (/^https?:$/i.test(safeProtocol(url))) {
+        shell.openExternal(url);
+      } else {
+        log.warn("Blocked webview popup to non-http(s) target", { url });
+      }
+      return { action: "deny" };
+    });
+
+    const guard = (
+      event: { preventDefault: () => void },
+      url: string,
+    ): void => {
+      if (!isAllowedWebviewNavigation(url)) {
+        event.preventDefault();
+        log.warn("Blocked disallowed webview navigation", { url });
+      }
+    };
+    // will-navigate + will-redirect cover top-level loads and redirect chains
+    // (the SSRF-to-metadata vector); will-frame-navigate covers sub-frames.
+    guest.on("will-navigate", guard);
+    guest.on("will-redirect", guard);
+    guest.on("will-frame-navigate", (details) => guard(details, details.url));
+  });
+}
+
 function setupCrashLogging(window: BrowserWindow): void {
   window.webContents.on("render-process-gone", (_event, details) => {
     log.error("Renderer process gone", {
@@ -230,6 +327,7 @@ export function createWindow(): void {
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
+      webviewTag: true,
       preload: path.join(__dirname, "preload.js"),
       enableBlinkFeatures: "GetDisplayMedia",
       partition: "persist:main",
@@ -312,6 +410,7 @@ export function createWindow(): void {
   });
 
   setupExternalLinkHandlers(mainWindow);
+  setupWebviewHandlers(mainWindow);
   setupEditableContextMenu(mainWindow);
   setupCrashLogging(mainWindow);
   buildApplicationMenu();

packages/core/src/panels/panelLayoutTransforms.test.ts

@@ -1,9 +1,11 @@
 import { beforeEach, describe, expect, it } from "vitest";
 import {
+  addBrowserTab,
   addRecentFile,
   closeTab,
   createInitialTaskLayout,
   openTab,
+  updateBrowserTabUrl,
 } from "./panelLayoutTransforms";
 import { createFileTabId, resetPanelIdCounter } from "./panelStoreHelpers";
 import { findTabInTree } from "./panelTree";
@@ -75,6 +77,52 @@ describe("panelLayoutTransforms", () => {
     });
   });
 
+  describe("addBrowserTab", () => {
+    it("adds a browser tab carrying the initial url", () => {
+      const layout = createInitialTaskLayout();
+      const next = applyUpdates(
+        layout,
+        addBrowserTab(layout, "main-panel", "https://posthog.com"),
+      );
+
+      if (next.panelTree.type !== "leaf") return;
+      const browserTab = next.panelTree.content.tabs.find(
+        (t) => t.data.type === "browser",
+      );
+      expect(browserTab).toBeDefined();
+      expect(browserTab?.data).toEqual({
+        type: "browser",
+        url: "https://posthog.com",
+      });
+    });
+  });
+
+  describe("updateBrowserTabUrl", () => {
+    it("updates the url of an existing browser tab", () => {
+      const layout = createInitialTaskLayout();
+      const added = applyUpdates(
+        layout,
+        addBrowserTab(layout, "main-panel", "about:blank"),
+      );
+      if (added.panelTree.type !== "leaf") return;
+      const tabId = added.panelTree.content.tabs.find(
+        (t) => t.data.type === "browser",
+      )?.id;
+      if (!tabId) throw new Error("expected browser tab");
+
+      const next = applyUpdates(
+        added,
+        updateBrowserTabUrl(added, tabId, "https://example.com"),
+      );
+
+      const location = findTabInTree(next.panelTree, tabId);
+      expect(location?.tab.data).toEqual({
+        type: "browser",
+        url: "https://example.com",
+      });
+    });
+  });
+
   describe("addRecentFile", () => {
     it("dedupes and prepends, capping at the max", () => {
       const result = addRecentFile(["b", "a"], "a");

packages/core/src/panels/panelLayoutTransforms.ts

@@ -687,17 +687,34 @@ export function setActiveTab(
   return { panelTree: updatedTree };
 }
 
+// Tab ids key the whole tree; the monotonic suffix stops two adds within the
+// same millisecond from colliding.
+let tabIdSeq = 0;
+function uniqueTabId(prefix: string): string {
+  return `${prefix}-${Date.now()}-${tabIdSeq++}`;
+}
+
 export function addTerminalTab(
   layout: TaskLayout,
   panelId: string,
 ): Partial<TaskLayout> {
-  const tabId = `shell-${Date.now()}`;
+  const tabId = uniqueTabId("shell");
+  return appendTab(layout, panelId, {
+    id: tabId,
+    label: "Terminal",
+    data: { type: "terminal", terminalId: tabId, cwd: "" },
+  });
+}
+
+function appendTab(
+  layout: TaskLayout,
+  panelId: string,
+  tab: { id: string; label: string; data: TabData },
+): Partial<TaskLayout> {
   const updatedTree = updateTreeNode(layout.panelTree, panelId, (panel) => {
     if (panel.type !== "leaf") return panel;
     return addTabToPanel(panel, {
-      id: tabId,
-      label: "Terminal",
-      data: { type: "terminal", terminalId: tabId, cwd: "" },
+      ...tab,
       component: null,
       draggable: true,
       closeable: true,
@@ -707,6 +724,48 @@ export function addTerminalTab(
   return { panelTree: updatedTree };
 }
 
+export function addBrowserTab(
+  layout: TaskLayout,
+  panelId: string,
+  url: string,
+): Partial<TaskLayout> {
+  return appendTab(layout, panelId, {
+    id: uniqueTabId("browser"),
+    label: "Browser",
+    data: { type: "browser", url },
+  });
+}
+
+export function updateBrowserTabUrl(
+  layout: TaskLayout,
+  tabId: string,
+  url: string,
+): Partial<TaskLayout> {
+  const tabLocation = findTabInTree(layout.panelTree, tabId);
+  if (!tabLocation) return {};
+
+  const updatedTree = updateTreeNode(
+    layout.panelTree,
+    tabLocation.panelId,
+    (panel) => {
+      if (panel.type !== "leaf") return panel;
+
+      const updatedTabs = panel.content.tabs.map((tab) =>
+        tab.id === tabId && tab.data.type === "browser"
+          ? { ...tab, data: { ...tab.data, url } }
+          : tab,
+      );
+
+      return {
+        ...panel,
+        content: { ...panel.content, tabs: updatedTabs },
+      };
+    },
+  );
+
+  return { panelTree: updatedTree };
+}
+
 export function addActionTab(
   layout: TaskLayout,
   panelId: string,

packages/core/src/panels/panelTypes.ts

@@ -41,6 +41,11 @@ export type TabData =
       type: "canvas-instructions";
       body: string;
     }
+  | {
+      // `url` is the last committed location, so the tab restores on reload.
+      type: "browser";
+      url: string;
+    }
   | {
       type: "other";
     };

packages/shared/src/constants.ts

@@ -1,5 +1,6 @@
 export {
   BILLING_FLAG,
+  BROWSER_TAB_FLAG,
   DISCOVERY_RUN_FLAG,
   EXPERIMENT_SUGGESTIONS_FLAG,
   HOME_TAB_FLAG,

packages/shared/src/flags.ts

@@ -9,3 +9,5 @@ export const DISCOVERY_RUN_FLAG = "posthog-code-discovery-run";
 export const PROJECT_BLUEBIRD_FLAG = "project-bluebird";
 export const TASKS_PREWARM_SANDBOX_FLAG = "tasks-prewarm-sandbox";
 export const GLM_MODEL_FLAG = "posthog-code-glm-model";
+// Gates the in-app browser tab (the Globe "+" affordance in panel tab bars).
+export const BROWSER_TAB_FLAG = "posthog-code-browser-tab";

packages/ui/src/features/browser/BrowserPanel.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { normalizeAddress } from "./BrowserPanel";
+
+describe("normalizeAddress", () => {
+  it.each([
+    ["", "about:blank"],
+    ["   ", "about:blank"],
+    ["about:blank", "about:blank"],
+    ["https://posthog.com", "https://posthog.com"],
+    ["http://example.com/path", "http://example.com/path"],
+    ["example.com", "https://example.com"],
+    ["example.com/path?q=1", "https://example.com/path?q=1"],
+    ["localhost:3000", "http://localhost:3000"],
+    ["localhost", "http://localhost"],
+    ["localhost/dashboard", "http://localhost/dashboard"],
+    ["127.0.0.1:8000", "http://127.0.0.1:8000"],
+    [
+      "how to center a div",
+      "https://www.google.com/search?q=how%20to%20center%20a%20div",
+    ],
+    ["posthog", "https://www.google.com/search?q=posthog"],
+  ])("normalizes %j to %j", (input, expected) => {
+    expect(normalizeAddress(input)).toBe(expected);
+  });
+
+  it.each([
+    ["file:///etc/passwd", "file%3A%2F%2F%2Fetc%2Fpasswd"],
+    ["chrome://settings", "chrome%3A%2F%2Fsettings"],
+    [
+      "data:text/html,<h1>hi</h1>",
+      "data%3Atext%2Fhtml%2C%3Ch1%3Ehi%3C%2Fh1%3E",
+    ],
+    ["javascript:alert(1)", "javascript%3Aalert(1)"],
+  ])("routes disallowed scheme %j to search", (input, encoded) => {
+    expect(normalizeAddress(input)).toBe(
+      `https://www.google.com/search?q=${encoded}`,
+    );
+  });
+});