Proxied localhost content
') + iframeDoc?.close() + + let clonedHtml = '' + vi.mocked(html2canvas).mockImplementation(async (_el: any, opts: any = {}) => { + if (typeof opts.onclone === 'function') { + const cloneDoc = document.implementation.createHTMLDocument('clone') + const cloneTarget = target.cloneNode(true) as HTMLElement + cloneDoc.body.appendChild(cloneTarget) + opts.onclone(cloneDoc) + clonedHtml = cloneTarget.innerHTML + return { + width: 800, + height: 500, + toDataURL: () => 'data:image/png;base64,PROXYPNG', + } as any + } + + return { + width: 500, + height: 300, + toDataURL: () => 'data:image/png;base64,IFRAMEPROXYPNG', + } as any + }) + + const result = await captureUiScreenshot({ scope: 'view' }, createRuntime() as any) + + expect(result.ok).toBe(true) + expect(result.imageBase64).toBe('PROXYPNG') + // The iframe should be replaced with an image, not a placeholder + expect(clonedHtml).toContain('data-screenshot-iframe-image="true"') + expect(clonedHtml).not.toContain('data-screenshot-iframe-placeholder') + expect(clonedHtml).not.toContain('This page has X-Frame-Options: DENY and CSP frame-ancestors 'none'
+ +`) + }) + server.listen(0, '127.0.0.1', () => { + const addr = server.address() as AddressInfo + resolve({ server, port: addr.port }) + }) + server.on('error', reject) + }) +} + +test.describe('Browser Pane Screenshot', () => { + test('proxied localhost URL with iframe-blocking headers renders actual content, not placeholder', async ({ + freshellPage, + page, + serverInfo, + terminal, + }) => { + // Start a canary HTTP server with X-Frame-Options and CSP headers + const canary = await startCanaryServer() + + try { + await terminal.waitForTerminal() + await createBrowserPane(page) + + // Navigate to the canary server's localhost URL + const urlInput = page.getByPlaceholder('Enter URL...') + await urlInput.fill(`http://localhost:${canary.port}/`) + await urlInput.press('Enter') + + // Wait for iframe to load - the BrowserPane should proxy it + const iframe = page.locator('iframe[title="Browser content"]') + await iframe.waitFor({ state: 'attached', timeout: 15_000 }) + + // Verify the iframe src uses the proxy URL pattern + const src = await iframe.getAttribute('src') + expect(src).toContain(`/api/proxy/http/${canary.port}/`) + + // Wait for the iframe content to actually load by checking the frame's content. + // Since the proxy strips X-Frame-Options and CSP, the iframe should render. + const frame = iframe.contentFrame() + + // Wait for the canary text to appear in the iframe + await expect(frame!.locator('#canary')).toHaveText('SCREENSHOT_CANARY', { timeout: 10_000 }) + + // Verify there is no placeholder element visible on the page + // (The placeholder would appear if the iframe content was blocked) + const placeholder = page.locator('[data-screenshot-iframe-placeholder="true"]') + await expect(placeholder).toHaveCount(0) + + // Take a screenshot via the agent API (POST /api/screenshots) + // This exercises the full screenshot chain: captureUiScreenshot -> + // captureIframeReplacement -> html2canvas + const screenshotResponse = await page.evaluate( + async (info: { baseUrl: string; token: string }) => { + const res = await fetch(`${info.baseUrl}/api/screenshots`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': info.token, + }, + body: JSON.stringify({ scope: 'view', name: 'canary-screenshot', overwrite: true }), + }) + return { status: res.status, body: await res.json() } + }, + { baseUrl: serverInfo.baseUrl, token: serverInfo.token }, + ) + + // The screenshot should succeed (agent API uses { status: 'ok', data: {...} }) + expect(screenshotResponse.status).toBe(200) + expect(screenshotResponse.body.status).toBe('ok') + expect(screenshotResponse.body.data?.path).toBeTruthy() + expect(screenshotResponse.body.data?.width).toBeGreaterThan(0) + expect(screenshotResponse.body.data?.height).toBeGreaterThan(0) + } finally { + await new PromiseProxied localhost content
') + iframeDoc?.close() + + let clonedHtml = '' + vi.mocked(html2canvas).mockImplementation(async (_el: any, opts: any = {}) => { + if (typeof opts.onclone === 'function') { + const cloneDoc = document.implementation.createHTMLDocument('clone') + const cloneTarget = target.cloneNode(true) as HTMLElement + cloneDoc.body.appendChild(cloneTarget) + opts.onclone(cloneDoc) + clonedHtml = cloneTarget.innerHTML + return { + width: 800, + height: 500, + toDataURL: () => 'data:image/png;base64,PROXYPNG', + } as any + } + + return { + width: 500, + height: 300, + toDataURL: () => 'data:image/png;base64,IFRAMEPROXYPNG', + } as any + }) + + const result = await captureUiScreenshot({ scope: 'view' }, createRuntime() as any) + + expect(result.ok).toBe(true) + expect(result.imageBase64).toBe('PROXYPNG') + // The iframe should be replaced with an image, not a placeholder + expect(clonedHtml).toContain('data-screenshot-iframe-image="true"') + expect(clonedHtml).not.toContain('data-screenshot-iframe-placeholder') + expect(clonedHtml).not.toContain('