Files
openchamber/packages/web/server/lib/preview/proxy-runtime.test.js
T
Bohdan Triapitsyn 7f90ffb878 feat: browser-side annotation screenshots for web preview
Capture the preview/browser iframe DOM with snapDOM (html-to-image
fallback) so web annotation screenshots match the visible viewport,
without a headless Chromium dependency.

- Preserve document scroll via viewport crop and re-bake nested scroll
  (e.g. the Starlight sidebar) deterministically on the clone
- Pin position:fixed elements to their measured viewport rect so headers
  and sidebars land correctly in the crop
- Extract preview capture/proxy helpers into
  lib/preview/screenshot-capture.ts to slim down ContextPanel
- Guard the external preview proxy against SSRF to private, loopback and
  reserved/link-local addresses (incl. cloud metadata)
- Fully validate preview bridge messages before formatting/use
- Warn on the empty browser tab that pages run with full access, so
  users browse untrusted sites knowingly
2026-05-30 02:04:32 +03:00

190 lines
7.3 KiB
JavaScript

import { describe, expect, it } from 'vitest';
import { classifyPreviewNavigation, classifyPreviewResourceError, normalizeProxyTargetUrl, rewritePreviewBody } from './proxy-runtime.js';
const rewrite = (bodyText, kind) => rewritePreviewBody({
bodyText,
kind,
proxyBasePath: '/api/preview/proxy/abc123',
targetOrigin: 'http://127.0.0.1:3000',
});
describe('preview resource error classification', () => {
it('suppresses Astro/Vite stylesheet modules reported as failed scripts', () => {
expect(classifyPreviewResourceError({
tagName: 'script',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/src/styles/global.css',
})).toBe('suppress');
expect(classifyPreviewResourceError({
tagName: 'script',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/src/pages/support.astro?astro&type=style&index=0&lang.css',
})).toBe('suppress');
});
it('suppresses framework virtual modules reported by dev servers', () => {
expect(classifyPreviewResourceError({
tagName: 'script',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/src/layouts/BaseLayout.astro?astro&type=script&index=0&lang.ts',
})).toBe('suppress');
expect(classifyPreviewResourceError({
tagName: 'script',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/@vite/client',
})).toBe('suppress');
expect(classifyPreviewResourceError({
tagName: 'link',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/@id/astro:scripts/page.js',
})).toBe('suppress');
});
it('suppresses conservative ecosystem dev-runtime resources', () => {
const noisyResources = [
'/_next/static/chunks/webpack.js',
'/_next/static/chunks/react-refresh.js',
'/.svelte-kit/generated/client/app.js',
'/@id/__x00__virtual:sveltekit:browser',
'/@remix-run/dev/dist/browser.js',
'/__hmr?runtime=remix',
'/_nuxt/@vite/client',
'/_nuxt/@id/virtual:nuxt:%2FUsers%2Fapp',
'/webpack-dev-server/client/index.js',
'/webpack/hot/dev-server.js',
'/__webpack_hmr',
];
for (const resource of noisyResources) {
expect(classifyPreviewResourceError({
tagName: 'script',
url: `http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc${resource}`,
})).toBe('suppress');
}
});
it('keeps ordinary application resource failures visible', () => {
expect(classifyPreviewResourceError({
tagName: 'script',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/assets/app.js',
})).toBe('report');
expect(classifyPreviewResourceError({
tagName: 'img',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/missing.png',
})).toBe('report');
expect(classifyPreviewResourceError({
tagName: 'link',
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/styles/missing.css',
})).toBe('report');
});
});
describe('preview body URL rewriting', () => {
it('rewrites only HTML resource attributes in HTML responses', () => {
const input = '<img src="/logo.png"><a href="/docs">Docs</a><script>const url = "/api/data";</script>';
const output = rewrite(input, 'html');
expect(output).toContain('src="/api/preview/proxy/abc123/logo.png"');
expect(output).toContain('href="/api/preview/proxy/abc123/docs"');
expect(output).toContain('const url = "/api/data";');
});
it('rewrites only CSS imports and url references in CSS responses', () => {
const input = '@import "/theme.css"; .hero { background: url(/hero.png); } .copy::after { content: "/not-a-url"; }';
const output = rewrite(input, 'css');
expect(output).toContain('@import "/api/preview/proxy/abc123/theme.css"');
expect(output).toContain('url(/api/preview/proxy/abc123/hero.png)');
expect(output).toContain('content: "/not-a-url"');
});
it('rewrites only JavaScript static import specifiers in JavaScript responses', () => {
const input = 'import "/entry.js"; import value from "/module.js"; const url = "/api/data"; fetch("/api/data");';
const output = rewrite(input, 'javascript');
expect(output).toContain('import "/api/preview/proxy/abc123/entry.js"');
expect(output).toContain('from "/api/preview/proxy/abc123/module.js"');
expect(output).toContain('const url = "/api/data"');
expect(output).toContain('fetch("/api/data")');
});
});
describe('preview navigation policy', () => {
const currentUrl = 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/docs';
it('keeps same-page hash and already-proxied links in the iframe', () => {
expect(classifyPreviewNavigation({ url: '#section', currentUrl }).action).toBe('allow');
expect(classifyPreviewNavigation({
url: 'http://127.0.0.1:57123/api/preview/proxy/f4af70b4261d77706743959516f9cecc/roadmap',
currentUrl,
}).action).toBe('allow');
});
it('routes loopback absolute links through the preview proxy', () => {
expect(classifyPreviewNavigation({ url: 'http://localhost:3000/roadmap', currentUrl })).toEqual({
action: 'proxy',
url: 'http://localhost:3000/roadmap',
});
});
it('maps app-origin root links back to the upstream origin while proxied', () => {
expect(classifyPreviewNavigation({
url: 'http://127.0.0.1:57123/support',
currentUrl,
targetOrigin: 'https://openchamber.dev',
})).toEqual({
action: 'proxy',
url: 'https://openchamber.dev/support',
});
});
it('sends non-loopback http links outside the preview iframe', () => {
expect(classifyPreviewNavigation({ url: 'https://example.com/docs', currentUrl })).toEqual({
action: 'external',
url: 'https://example.com/docs',
});
});
it('leaves non-http links to browser defaults', () => {
expect(classifyPreviewNavigation({ url: 'mailto:test@example.com', currentUrl })).toEqual({
action: 'allow',
url: 'mailto:test@example.com',
});
});
});
describe('proxy target normalization (SSRF guard)', () => {
it('allows ordinary external hosts when allowExternal is set', () => {
expect(normalizeProxyTargetUrl('https://docs.openchamber.dev/security/', { allowExternal: true }))
.toEqual({ ok: true, origin: 'https://docs.openchamber.dev' });
});
it('rejects non-loopback hosts without allowExternal', () => {
expect(normalizeProxyTargetUrl('https://example.com/', {}).ok).toBe(false);
});
it('refuses private, loopback and link-local literals on the external path', () => {
for (const url of [
'http://127.0.0.1/',
'http://10.0.0.5/',
'http://172.16.9.9/',
'http://192.168.1.1/',
'http://169.254.169.254/latest/meta-data/',
'http://100.64.0.1/',
'http://localhost/',
'http://service.local/',
'http://[::1]/',
'http://[fd00::1]/',
'http://[fe80::1]/',
'http://2130706433/', // decimal form of 127.0.0.1, normalized by WHATWG URL
]) {
expect(normalizeProxyTargetUrl(url, { allowExternal: true }).ok, url).toBe(false);
}
});
it('still blocks private hosts even via IPv4-mapped IPv6', () => {
expect(normalizeProxyTargetUrl('http://[::ffff:127.0.0.1]/', { allowExternal: true }).ok).toBe(false);
});
});