Claude Fable 5
0875e2a087
All checks were successful
CI / Build container images (push) Has been skipped
CI / Lint, typecheck, test (push) Successful in 2m57s
CI / Import/export fidelity gate (push) Successful in 46s
CD / Build and push images (push) Successful in 3m16s
CD / Deploy to Test (push) Successful in 8s
CI / Auth e2e pack (push) Successful in 4m8s
CD / Smoke tests against Test (push) Successful in 1m9s
CD / Promote to Int (push) Successful in 10s
Implements the security core of the plugin system: code-plugin surfaces run in opaque-origin iframes (sandbox="allow-scripts", never allow-same-origin) with a capability-filtered RPC bridge. - api: serve a per-plugin sandbox frame document at /plugins/:id/:version/frame with a CSP that pins every load to the plugin's own asset path (built from APP_BASE_URL, not the request Host, so a Host-rewriting proxy cannot break it) and forbids network access (connect-src 'none'). Plugin assets get Access-Control-Allow-Origin: * so the null-origin frame can load its own module bundle. - web: sandbox-host creates the frame, wires the SDK host bridge over a source-filtered postMessage transport, drives render under a 5 s deadline (hung/failed plugin -> placeholder, never a frozen page), and tears down on unmount. PluginFrame/PluginPreviewPage surface it; the built-in ui.resize handler clamps plugin-requested heights. - plugin-sdk: host bridge reports gate violations via onViolation and registers a gated handler for every v1 method, so an undeclared capability is rejected with capability_not_permitted (not unknown_method). - tests: SDK gate unit test; web sandbox unit tests (opaque origin, source filtering, timeout); and the e2e security pack with a permanent malicious fixture plugin proving no escape (DOM/cookies/storage/fetch/ undeclared capability all blocked) plus well-behaved and hung cases. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EwZ4jR4KFAPvpjWevfUGX1
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useParams } from 'react-router-dom';
|
|
|
|
import type { PluginView } from '@dorfteich/shared';
|
|
|
|
import { apiGet } from '../lib/api';
|
|
import { PluginFrame } from '../plugins/PluginFrame';
|
|
|
|
/**
|
|
* Site-Admin preview of one installed plugin (issue #73): mounts each of the
|
|
* plugin's extension points in a real sandbox frame, with the declared
|
|
* permissions listed next to it. Doubles as the surface the plugin security
|
|
* e2e pack drives — the sandbox here is byte-identical to what pages embed.
|
|
*/
|
|
export function PluginPreviewPage(): React.JSX.Element {
|
|
const { t } = useTranslation('plugins');
|
|
const { pluginId } = useParams<{ pluginId: string }>();
|
|
const [plugins, setPlugins] = useState<PluginView[] | null>(null);
|
|
const [error, setError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
apiGet<PluginView[]>('/admin/plugins')
|
|
.then((list) => {
|
|
if (!cancelled) setPlugins(list);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setError(true);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const plugin = useMemo(
|
|
() => plugins?.find((entry) => entry.id === pluginId) ?? null,
|
|
[plugins, pluginId],
|
|
);
|
|
|
|
if (error) return <p role="alert">{t('preview.loadFailed')}</p>;
|
|
if (!plugins) return <p>{t('preview.loading')}</p>;
|
|
if (!plugin) return <p role="alert">{t('preview.notFound')}</p>;
|
|
|
|
return (
|
|
<div className="plugin-preview">
|
|
<h1>
|
|
{t('preview.title', { name: plugin.name })}{' '}
|
|
<span className="plugin-preview__version">v{plugin.version}</span>
|
|
</h1>
|
|
<section>
|
|
<h2>{t('preview.permissions')}</h2>
|
|
{plugin.permissions.length === 0 ? (
|
|
<p>{t('preview.noPermissions')}</p>
|
|
) : (
|
|
<ul className="plugin-preview__permissions">
|
|
{plugin.permissions.map((permission) => (
|
|
<li key={permission}>
|
|
<code>{permission}</code>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
{plugin.extensionPoints.map((point) => (
|
|
<section key={point.id} className="plugin-preview__surface">
|
|
<h2>
|
|
{t('preview.surface')} <code>{point.id}</code> ({point.type})
|
|
</h2>
|
|
<PluginFrame plugin={plugin} extensionPointId={point.id} />
|
|
</section>
|
|
))}
|
|
{plugin.extensionPoints.length === 0 ? <p>{t('preview.noSurfaces')}</p> : null}
|
|
</div>
|
|
);
|
|
}
|