mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-10-31 08:13:50 +00:00
Linus Rath
e38e326efb
Every plugin iframe loaded /plugin-sandbox, a force-dynamic Next page. Each frame then fetched, parsed and hydrated Next's client router on top of React and the runtime, and the server rendered the page once per frame, one after another when a dozen plugins started together. Sandboxed frames have opaque origins, so the browser's code cache never helps, and they run on the host page's main thread: with 12 plugins the frames took 2.5-3 s to come up after the app had loaded. The sandbox routes now return a small HTML page with the UI kit's stylesheet and the runtime as an ES module, both built ahead of time: - `scripts/build-plugin-sandbox.mjs` bundles the runtime with esbuild and compiles `plugin-kit.css` with the app's Tailwind setup into `public/plugin-sandbox-assets/`, with a manifest. Named Tabler imports are pointed at the icons' own files, so the full icon set stays in a chunk that only loads for an icon name the kit doesn't ship. - `npm run build`, `npm run dev`, the Dockerfile and the perf-guard workflow run it before `next build`. - `lib/plugin-sandbox/sandbox-document.ts` writes the page; proxy.ts still sets the sandbox CSP and the script carries its nonce. - The assets are served from public/ with CORS and immutable caching. A frame on an idle page is ready in 255 ms instead of 362 ms, eleven at once in 1.0 s instead of 2.1 s.
74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
// @vitest-environment node
|
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
|
|
|
const files = vi.hoisted(() => new Map<string, string>());
|
|
vi.mock('node:fs/promises', async (orig) => ({
|
|
...(await orig<typeof import('node:fs/promises')>()),
|
|
readFile: vi.fn(async (p: string) => {
|
|
const key = String(p).replace(/\\/g, '/').split('/public/')[1];
|
|
if (key && files.has(key)) return files.get(key)!;
|
|
throw Object.assign(new Error('ENOENT'), { code: 'ENOENT' });
|
|
}),
|
|
}));
|
|
|
|
import { GET as untrusted } from '@/app/(sandbox)/plugin-sandbox/route';
|
|
import { GET as privileged } from '@/app/(sandbox)/plugin-sandbox-privileged/route';
|
|
|
|
const MANIFEST = 'plugin-sandbox-assets/manifest.json';
|
|
|
|
function request(nonce = 'n0nce'): Request {
|
|
return new Request('http://localhost:3000/plugin-sandbox', { headers: { 'x-nonce': nonce } });
|
|
}
|
|
|
|
beforeEach(() => {
|
|
files.clear();
|
|
files.set(MANIFEST, JSON.stringify({ script: 'runtime-ABC.js', style: 'kit-123.css', preload: ['chunk-ICONS.js'] }));
|
|
vi.stubEnv('NODE_ENV', 'development'); // re-read the manifest for every test
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.unstubAllEnvs();
|
|
});
|
|
|
|
// Plugin frames used to load a Next page: its client router and hydration
|
|
// in every frame, and a server render per frame.
|
|
describe('plugin sandbox document', () => {
|
|
it.each([['/plugin-sandbox', untrusted], ['/plugin-sandbox-privileged', privileged]])(
|
|
'%s is a plain page with the runtime script and the kit stylesheet', async (_path, GET) => {
|
|
const res = await GET(request());
|
|
const html = await res.text();
|
|
|
|
expect(res.status).toBe(200);
|
|
expect(res.headers.get('content-type')).toContain('text/html');
|
|
expect(html).toContain('<script type="module" nonce="n0nce" src="/plugin-sandbox-assets/runtime-ABC.js"></script>');
|
|
expect(html).toContain('<link rel="stylesheet" href="/plugin-sandbox-assets/kit-123.css">');
|
|
// Fetched with the script, not after it has been parsed.
|
|
expect(html).toContain('<link rel="modulepreload" nonce="n0nce" href="/plugin-sandbox-assets/chunk-ICONS.js">');
|
|
expect(html).toContain('<div id="plugin-sandbox-root"></div>');
|
|
expect(html).not.toContain('/_next/');
|
|
});
|
|
|
|
it('serves the assets under the base path', async () => {
|
|
vi.stubEnv('NEXT_PUBLIC_BASE_PATH', '/webmail');
|
|
const html = await (await untrusted(request())).text();
|
|
|
|
expect(html).toContain('src="/webmail/plugin-sandbox-assets/runtime-ABC.js"');
|
|
expect(html).toContain('href="/webmail/plugin-sandbox-assets/kit-123.css"');
|
|
});
|
|
|
|
it('does not let the nonce header break out of its attribute', async () => {
|
|
const html = await (await untrusted(request('x"><script>alert(1)</script>'))).text();
|
|
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
|
expect(html.match(/<script/g)).toHaveLength(1);
|
|
});
|
|
|
|
it('says what to run when the assets were not built', async () => {
|
|
files.clear();
|
|
const res = await untrusted(request());
|
|
|
|
expect(res.status).toBe(503);
|
|
expect(await res.text()).toContain('build-plugin-sandbox');
|
|
});
|
|
});
|