From 6ab446a889bdef822a3601270d9ccfa8a0f4c4ec Mon Sep 17 00:00:00 2001 From: Liad Yosef Date: Fri, 15 Aug 2025 10:13:41 +0300 Subject: [PATCH] feat: add sandbox permissions instead of an override --- docs/src/guide/client/html-resource.md | 19 +++++++-- docs/src/guide/client/resource-renderer.md | 3 ++ sdks/typescript/client/README.md | 1 + .../src/components/HTMLResourceRenderer.tsx | 21 +++++++++- .../__tests__/HTMLResourceRenderer.test.tsx | 42 +++++++++++++++++++ 5 files changed, 81 insertions(+), 5 deletions(-) diff --git a/docs/src/guide/client/html-resource.md b/docs/src/guide/client/html-resource.md index 10ddef44..edb20ca9 100644 --- a/docs/src/guide/client/html-resource.md +++ b/docs/src/guide/client/html-resource.md @@ -14,6 +14,7 @@ export interface HTMLResourceRendererProps { proxy?: string; iframeRenderData?: Record; autoResizeIframe?: boolean | { width?: boolean; height?: boolean }; + sandboxPermissions?: string; iframeProps?: Omit, 'src' | 'srcDoc' | 'ref' | 'style'>; } ``` @@ -40,6 +41,11 @@ The component accepts the following props: - **`proxy`**: (Optional) A URL to a proxy script. This is useful for hosts with a strict Content Security Policy (CSP). When provided, external URLs will be rendered in a nested iframe hosted at this URL. For example, if `proxy` is `https://my-proxy.com/`, the final URL will be `https://my-proxy.com/?url=`. For your convenience, mcp-ui hosts a proxy script at `https://proxy.mcpui.dev`, which you can use as a the prop value without any setup (see `examples/external-url-demo`). - **`iframeProps`**: (Optional) Custom props for the iframe. - **`autoResizeIframe`**: (Optional) When enabled, the iframe will automatically resize based on messages from the iframe's content. This prop can be a boolean (to enable both width and height resizing) or an object (`{width?: boolean, height?: boolean}`) to control dimensions independently. +- **`sandboxPermissions`**: (Optional) Additional iframe sandbox permissions to add to the defaults. These are merged with: + - External URLs (`text/uri-list`): `'allow-scripts allow-same-origin'` + - Raw HTML content (`text/html`): `'allow-scripts'` + + For example, to allow forms in raw HTML: `sandboxPermissions="allow-forms"` ## How It Works @@ -53,12 +59,14 @@ The component accepts the following props: - If using `blob`, it decodes it from Base64. - Renders an `