fix(extension): revalidate access and protect page previews

Author: waleedlatif1

.github/workflows/browser-extension.yml

@@ -17,6 +17,8 @@ on:
       - 'apps/sim/next.config.ts'
       - 'apps/sim/package.json'
       - 'packages/emcn/**'
+      - 'packages/logger/**'
+      - 'packages/utils/**'
       - 'bun.lock'
   workflow_dispatch:
 

apps/extension/scripts/test-e2e.ts

@@ -36,6 +36,7 @@ const fixture = Bun.serve({
         const received = [];
         window.addEventListener('message', event => {
           if (event.source !== parent || !event.origin.startsWith('chrome-extension://')) return;
+          if (event.data.type === 'e2e-barrier') document.body.dataset.barrierId = event.data.id;
           if (event.data.type === 'context' && event.data.sessionId === document.body.dataset.sessionId) {
             if (document.body.dataset.ignoreCaptures) return;
             received.push(event.data.snapshot);
@@ -206,6 +207,19 @@ try {
       }
     })
 
+  const settleMessages = async () => {
+    const barrierId = generateId()
+    await panel.evaluate(
+      ({ origin, barrierId }) => {
+        const target = document.querySelector('iframe')?.contentWindow
+        if (!target) throw new Error('Missing hosted frame')
+        target.postMessage({ type: 'e2e-barrier', id: barrierId }, origin)
+      },
+      { origin, barrierId }
+    )
+    await app.waitForFunction((id) => document.body.dataset.barrierId === id, barrierId)
+  }
+
   await check('Capture stays local until the trusted hosted frame is ready', async () => {
     await capture()
     await panel.getByRole('status').filter({ hasText: 'Waiting for Sim' }).waitFor()
@@ -225,6 +239,7 @@ try {
         }),
       receiverSessionId
     )
+    await settleMessages()
     assert((await snapshots()).length === 0, 'Wrong-origin readiness was accepted')
     const wrongFrameDelivered = panel.evaluate(
       () =>
@@ -246,6 +261,7 @@ try {
       document.body.append(child)
     }, receiverSessionId)
     await wrongFrameDelivered
+    await settleMessages()
     assert((await snapshots()).length === 0, 'Wrong-frame readiness was accepted')
     await page.evaluate(() => {
       document.body.textContent = 'SECOND_CAPTURE_SENTINEL'

apps/sim/app/extension/[workspaceId]/header.tsx

@@ -1,14 +1,19 @@
 'use client'
 
+import { useState } from 'react'
 import {
   Chip,
   ChipLink,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  scrollFadeAttributes,
+  scrollFadeClass,
   Tooltip,
+  useScrollEdges,
 } from '@sim/emcn'
 import { ArrowUpRight, BubbleChatDelay, ChevronDown, Plus } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
@@ -35,6 +40,10 @@ export function ExtensionHeader({
   const router = useRouter()
   const { data: workspaces } = useWorkspacesQuery()
   const { data: chats, isPending, error } = history
+  const [scopeElement, setScopeElement] = useState<HTMLDivElement | null>(null)
+  const scopeEdges = useScrollEdges(scopeElement)
+  const [historyElement, setHistoryElement] = useState<HTMLDivElement | null>(null)
+  const historyEdges = useScrollEdges(historyElement)
   return (
     <header className='flex shrink-0 items-center gap-1 border-[var(--border)] border-b px-3 py-2'>
       <DropdownMenu>
@@ -43,7 +52,12 @@ export function ExtensionHeader({
             {scopeName}
           </Chip>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align='start'>
+        <DropdownMenuContent
+          ref={setScopeElement}
+          align='start'
+          {...scrollFadeAttributes(scopeEdges)}
+          className={scrollFadeClass}
+        >
           <DropdownMenuItem
             active={!workspaceId}
             disabled={!workspaceId}
@@ -76,7 +90,12 @@ export function ExtensionHeader({
           </Tooltip.Trigger>
           <Tooltip.Content>Chat history</Tooltip.Content>
         </Tooltip.Root>
-        <DropdownMenuContent align='end' className='max-h-[320px] w-[240px] overflow-y-auto'>
+        <DropdownMenuContent
+          ref={setHistoryElement}
+          align='end'
+          {...scrollFadeAttributes(historyEdges)}
+          className={cn('max-h-[320px] w-[240px] overflow-y-auto', scrollFadeClass)}
+        >
           {isPending || error || !chats?.length ? (
             <DropdownMenuItem disabled>
               {isPending ? 'Loading chats…' : error ? 'Chat history unavailable' : 'No chats yet'}

apps/sim/app/extension/[workspaceId]/workspace.tsx

@@ -14,14 +14,20 @@ import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/prov
 import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/workspace-scope-sync'
 import { PermissionAccessBoundary } from '@/ee/access-requests/components/permission-access-boundary'
 import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
-import { useWorkspaceHostContextQuery } from '@/hooks/queries/workspace-host'
+import {
+  useWorkspaceHostContextQuery,
+  WORKSPACE_HOST_CONTEXT_STALE_TIME,
+} from '@/hooks/queries/workspace-host'
 
 interface ExtensionWorkspaceProps {
   workspaceId: string
 }
 
 export function ExtensionWorkspace({ workspaceId }: ExtensionWorkspaceProps) {
-  const { data, isPending, error, refetch } = useWorkspaceHostContextQuery(workspaceId)
+  const { data, isPending, error, refetch } = useWorkspaceHostContextQuery(workspaceId, {
+    refetchInterval: WORKSPACE_HOST_CONTEXT_STALE_TIME,
+    refetchOnWindowFocus: true,
+  })
   if (isApiClientError(error) && error.status === 401) return <ExtensionSignIn />
   if (isPending) return <ExtensionLoading />
   const accessDenied = isApiClientError(error) && (error.status === 403 || error.status === 404)

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/page-context.tsx

@@ -46,7 +46,13 @@ export function PageContext({ snapshot, onRemove, label }: PageContextProps) {
         onRemove={onRemove}
         removeLabel='Remove page context'
       />
-      <ChipModal open={open} onOpenChange={setOpen} srTitle='Page context' size='sm'>
+      <ChipModal
+        open={open}
+        onOpenChange={setOpen}
+        srTitle='Page context'
+        size='sm'
+        className='ph-no-capture'
+      >
         <ChipModalHeader onClose={() => setOpen(false)}>{title}</ChipModalHeader>
         <ChipModalBody>
           <div className='flex flex-wrap items-center justify-between gap-2'>

apps/sim/hooks/queries/organization.ts

@@ -55,6 +55,8 @@ export function useOrganizationSummary(organizationId: string) {
     queryFn: ({ signal }) =>
       requestJson(getOrganizationContract, { params: { id: organizationId }, query: {}, signal }),
     staleTime: ORGANIZATION_DETAIL_STALE_TIME,
+    refetchInterval: ORGANIZATION_DETAIL_STALE_TIME,
+    refetchOnWindowFocus: true,
   })
 }
 

apps/sim/hooks/queries/workspace-host.ts

@@ -23,12 +23,21 @@ async function fetchWorkspaceHostContext(
   })
 }
 
+interface WorkspaceHostContextQueryOptions {
+  refetchInterval?: number | false
+  refetchOnWindowFocus?: boolean
+}
+
 /**
  * Loads identity, host organization, owner-plan entitlements, and the viewer's
  * route-scoped authorization for one workspace.
  */
-export function useWorkspaceHostContextQuery(workspaceId: string) {
+export function useWorkspaceHostContextQuery(
+  workspaceId: string,
+  options: WorkspaceHostContextQueryOptions = {}
+) {
   return useQuery({
+    ...options,
     queryKey: workspaceHostKeys.detail(workspaceId),
     queryFn: ({ signal }) => fetchWorkspaceHostContext(workspaceId, signal),
     enabled: Boolean(workspaceId),