Raphaël Bosi
60f5964c64
Front components run untrusted third-party React in a Web Worker. That
worker previously shared the host origin, so it could reach
origin-scoped storage (the metadata-store IndexedDB, the
`twenty-sign-out` BroadcastChannel), cookies, and same-origin resources.
This runs the worker inside a `sandbox="allow-scripts"` (no
`allow-same-origin`) iframe, giving it an opaque origin where the
browser denies localStorage, cookies, IndexedDB, and BroadcastChannel
outright. The worker is kept inside the iframe (rather than a bare
iframe) so untrusted code always runs off the main thread; the
remote-dom render path is unchanged.
- **Transport:** host ↔ iframe ↔ worker over a re-transferred
`MessagePort` (`ThreadMessagePort`); a small bootstrap script is inlined
into the iframe via `srcdoc` (bundled at build time by a prebuild step)
and relays the port to the worker it spawns. Messages across the
boundary use a typed discriminated union with a single parse/guard.
- **Network:** under the opaque origin, direct fetches to the Twenty API
would be `Origin: null`, so the component source and SDK modules are
fetched through an allowlisted, credential-omitting `hostFetch` bridge
and blobbed inside the worker. The allowlist is single-sourced on the
host (http(s) origins only) and carried in the render context. The
bridge is mandatory (rendering fails closed if it is missing), refuses
redirects except for GET/HEAD to the known file-storage URLs, and caps
response body size.
- **SDK loading:** SDK client modules now load inside the worker through
the bridge, replacing the host-side SDK-blob state/effect/provider with
a pure `getSdkClientUrls` URL builder.
- **Isolation tests:** a unit test locks the sandbox attribute
(`allow-scripts`, never `allow-same-origin`); a browser test asserts the
worker actually gets an opaque origin with storage denied, probing
cookies by writing one rather than reading an empty jar.
Also adds a "List Companies" seed front component that queries workspace
data via the SDK client (exercising the bridge end-to-end),
single-sources the command-menu confirmation-modal result event name and
detail type in `twenty-shared` (previously a hand-synced duplicate), and
decomposes the renderer (bridge, sandbox, worker orchestration) into
small single-purpose utils with unit tests.
## How it works
```mermaid
sequenceDiagram
autonumber
participant Host as Host window (twenty-front · host origin)
participant Frame as Sandboxed iframe (allow-scripts · opaque origin)
participant Worker as Worker (untrusted component · opaque origin)
participant API as Twenty API (host origin)
rect rgb(238,242,248)
Note over Host,Worker: 1 — Boot handshake
Host->>Frame: create iframe sandbox="allow-scripts", srcdoc = inlined bootstrap script
Host->>Host: MessageChannel + ThreadMessagePort(port1)<br/>exports = host API + hostFetch
Frame-->>Host: READY
Host->>Frame: INIT + transfer port2
Frame->>Worker: spawn inlined Worker + re-transfer port2
Worker->>Worker: ThreadMessagePort(port)<br/>exports = render / updateContext
Note over Host,Worker: Port now entangles Host ↔ Worker directly
end
rect rgb(246,240,248)
Note over Host,Worker: 2 — Render
Host->>Worker: render(connection, { componentUrl, sdkClientUrls, hostFetchOrigins, token })
Worker->>Worker: override globalThis.fetch<br/>(Twenty origins → hostFetch)
end
rect rgb(248,244,238)
Note over Worker,API: 3 — Network via hostFetch bridge (opaque Origin:null cannot reach the API directly)
Worker->>Host: hostFetch(componentUrl, Bearer)
Host->>Host: origin allowlist + credentials:'omit'
Host->>API: fetch(componentUrl)
API-->>Host: source
Host-->>Worker: { status, headers, body }
Worker->>Host: hostFetch(sdkClientUrls.core / .metadata)
Host-->>Worker: SDK module sources
Worker->>Worker: blob each source in its own opaque origin → import() → run untrusted React
end
rect rgb(238,248,242)
Note over Worker,Host: 4 — Render mirror
Worker->>Host: remote-dom mutations (RemoteConnection)
Host->>Host: RemoteReceiver → RemoteRootRenderer → host DOM
end
Note over Worker: Opaque origin ⇒ browser denies localStorage,<br/>cookies, IndexedDB, BroadcastChannel
```
166 lines
4.5 KiB
TypeScript
166 lines
4.5 KiB
TypeScript
import { isDefined } from 'twenty-shared/utils';
|
|
|
|
import { createFrontComponentSandboxIframe } from '@/remote/sandbox/utils/createFrontComponentSandboxIframe';
|
|
|
|
type FrontComponentSandboxIsolationReport = {
|
|
iframeOrigin: string;
|
|
workerOrigin: string;
|
|
localStorageDenied: boolean;
|
|
cookiesDenied: boolean;
|
|
indexedDbDenied: boolean;
|
|
workerIndexedDbDenied: boolean;
|
|
};
|
|
|
|
const SANDBOX_ISOLATION_PROBE_REPORT_MESSAGE_TYPE =
|
|
'front-component-sandbox-isolation-report';
|
|
|
|
const SANDBOX_ISOLATION_PROBE_TIMEOUT_MS = 15000;
|
|
|
|
const SANDBOX_ISOLATION_PROBE_DATABASE_NAME =
|
|
'front-component-sandbox-isolation-probe';
|
|
|
|
type WorkerProbeReport = {
|
|
workerOrigin: string;
|
|
workerIndexedDbDenied: boolean;
|
|
};
|
|
|
|
const runWorkerStorageIsolationProbe = (databaseName: string): void => {
|
|
const report = { workerOrigin: self.origin, workerIndexedDbDenied: false };
|
|
|
|
try {
|
|
indexedDB.open(databaseName);
|
|
} catch {
|
|
report.workerIndexedDbDenied = true;
|
|
}
|
|
|
|
self.postMessage(report);
|
|
};
|
|
|
|
const runSandboxIframeIsolationProbe = (
|
|
workerProbeSource: string,
|
|
reportMessageType: string,
|
|
databaseName: string,
|
|
): void => {
|
|
const report = {
|
|
iframeOrigin: self.origin,
|
|
workerOrigin: '',
|
|
localStorageDenied: false,
|
|
cookiesDenied: false,
|
|
indexedDbDenied: false,
|
|
workerIndexedDbDenied: false,
|
|
};
|
|
|
|
try {
|
|
window.localStorage.getItem('probe');
|
|
} catch {
|
|
report.localStorageDenied = true;
|
|
}
|
|
|
|
try {
|
|
document.cookie = 'front_component_sandbox_isolation_probe=1';
|
|
report.cookiesDenied = !document.cookie.includes(
|
|
'front_component_sandbox_isolation_probe=1',
|
|
);
|
|
document.cookie = 'front_component_sandbox_isolation_probe=1;max-age=0';
|
|
} catch {
|
|
report.cookiesDenied = true;
|
|
}
|
|
|
|
try {
|
|
indexedDB.open(databaseName);
|
|
} catch {
|
|
report.indexedDbDenied = true;
|
|
}
|
|
|
|
const workerUrl = URL.createObjectURL(
|
|
new Blob([workerProbeSource], { type: 'application/javascript' }),
|
|
);
|
|
const worker = new Worker(workerUrl);
|
|
|
|
worker.onmessage = (event: MessageEvent<WorkerProbeReport>) => {
|
|
report.workerOrigin = event.data.workerOrigin;
|
|
report.workerIndexedDbDenied = event.data.workerIndexedDbDenied;
|
|
parent.postMessage({ type: reportMessageType, report }, '*');
|
|
};
|
|
};
|
|
|
|
const serializeProbeFunctionInvocation = (
|
|
probeFunction: (...probeArguments: string[]) => void,
|
|
...probeArguments: string[]
|
|
): string => {
|
|
const serializedArguments = probeArguments
|
|
.map((probeArgument) => JSON.stringify(probeArgument))
|
|
.join(', ');
|
|
|
|
return `(${probeFunction.toString()})(${serializedArguments});`;
|
|
};
|
|
|
|
const buildSandboxIsolationProbeDocument = (): string => {
|
|
const workerProbeSource = serializeProbeFunctionInvocation(
|
|
runWorkerStorageIsolationProbe,
|
|
SANDBOX_ISOLATION_PROBE_DATABASE_NAME,
|
|
);
|
|
|
|
const sandboxProbeScript = serializeProbeFunctionInvocation(
|
|
runSandboxIframeIsolationProbe,
|
|
workerProbeSource,
|
|
SANDBOX_ISOLATION_PROBE_REPORT_MESSAGE_TYPE,
|
|
SANDBOX_ISOLATION_PROBE_DATABASE_NAME,
|
|
);
|
|
|
|
return `<!doctype html><html><body><script>${sandboxProbeScript}</script></body></html>`;
|
|
};
|
|
|
|
export const runFrontComponentSandboxIsolationProbe =
|
|
(): Promise<FrontComponentSandboxIsolationReport> => {
|
|
const sandboxIframe = createFrontComponentSandboxIframe(
|
|
buildSandboxIsolationProbeDocument(),
|
|
);
|
|
|
|
return new Promise<FrontComponentSandboxIsolationReport>(
|
|
(resolve, reject) => {
|
|
const abortController = new AbortController();
|
|
|
|
const removeSandbox = () => {
|
|
abortController.abort();
|
|
sandboxIframe.remove();
|
|
};
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
removeSandbox();
|
|
reject(
|
|
new Error('Front component sandbox isolation probe timed out'),
|
|
);
|
|
}, SANDBOX_ISOLATION_PROBE_TIMEOUT_MS);
|
|
|
|
window.addEventListener(
|
|
'message',
|
|
(event: MessageEvent) => {
|
|
if (event.source !== sandboxIframe.contentWindow) {
|
|
return;
|
|
}
|
|
|
|
const data = event.data as {
|
|
type?: string;
|
|
report?: FrontComponentSandboxIsolationReport;
|
|
} | null;
|
|
|
|
if (
|
|
data?.type !== SANDBOX_ISOLATION_PROBE_REPORT_MESSAGE_TYPE ||
|
|
!isDefined(data.report)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
clearTimeout(timeoutId);
|
|
removeSandbox();
|
|
resolve(data.report);
|
|
},
|
|
{ signal: abortController.signal },
|
|
);
|
|
|
|
document.body.append(sandboxIframe);
|
|
},
|
|
);
|
|
};
|