From 45e2521f8110b5472506ed57d4e998ffeb1f5f0e Mon Sep 17 00:00:00 2001
From: Liad Yosef <liadyo@monday.com>
Date: Wed, 13 Aug 2025 22:05:57 +0300
Subject: [PATCH 1/3] feat: use blob src as default

---
 docs/src/guide/client/html-resource.md        |  2 +
 docs/src/guide/client/resource-renderer.md    | 15 ++++++
 .../src/components/HTMLResourceRenderer.tsx   | 17 ++++++-
 .../__tests__/HTMLResourceRenderer.test.tsx   | 47 ++++++++++++++++++-
 4 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/docs/src/guide/client/html-resource.md b/docs/src/guide/client/html-resource.md
index 10ddef44..c7ba316d 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<string, unknown>;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
+  preferSrcDocOverBlob?: boolean;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'ref' | 'style'>;
 }
 ```
@@ -40,6 +41,7 @@ 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=<encoded_original_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.
+- **`preferSrcDocOverBlob`**: (Optional) Defaults to `false`. When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Setting this to `true` can be useful in environments with strict Content Security Policies that block blob URLs.
 
 ## How It Works
 
diff --git a/docs/src/guide/client/resource-renderer.md b/docs/src/guide/client/resource-renderer.md
index 327119eb..e7380282 100644
--- a/docs/src/guide/client/resource-renderer.md
+++ b/docs/src/guide/client/resource-renderer.md
@@ -63,6 +63,7 @@ interface UIResourceRendererProps {
     - **`ref`**: Optional React ref to access the underlying iframe element
   - **`iframeRenderData`**: Optional `Record<string, unknown>` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.
   - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.
+  - **`preferSrcDocOverBlob`**: Optional `boolean` (defaults to `false`). When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Useful in environments with strict Content Security Policies that block blob URLs.
 - **`remoteDomProps`**: Optional props for the `<RemoteDOMResourceRenderer>`
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: Optional remote element definitions for Remote DOM resources. REQUIRED for Remote DOM snippets.
@@ -151,6 +152,20 @@ function App({ mcpResource }) {
 />
 ```
 
+### Using srcDoc Instead of Blob URLs
+
+By default, HTML content is rendered using blob URLs for better security. If you need to use `srcDoc` instead (e.g., for environments with strict CSP policies that block blob URLs):
+
+```tsx
+<UIResourceRenderer
+  resource={mcpResource.resource}
+  htmlProps={{
+    preferSrcDocOverBlob: true
+  }}
+  onUIAction={handleUIAction}
+/>
+```
+
 ### Passing Render-Time Data to Iframes
 
 The `iframeRenderData` prop allows you to send a data payload to an iframe as it renders. This is useful for initializing the iframe with dynamic data from the parent application.
diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index c6d2460d..3544b2dc 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -10,6 +10,7 @@ export type HTMLResourceRendererProps = {
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
+  preferSrcDocOverBlob?: boolean;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'style'> & {
     ref?: React.RefObject<HTMLIFrameElement>;
   };
@@ -36,6 +37,7 @@ export const HTMLResourceRenderer = ({
   proxy,
   iframeRenderData,
   autoResizeIframe,
+  preferSrcDocOverBlob,
   iframeProps,
 }: HTMLResourceRendererProps) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -149,9 +151,22 @@ export const HTMLResourceRenderer = ({
       }
       return null;
     }
+    let iframeSrcProp: {
+      srcDoc?: string;
+    } | {
+      src?: string;
+    } = {
+      srcDoc: htmlString,
+    }
+    if (!preferSrcDocOverBlob && typeof URL.createObjectURL === 'function') {
+      const blob = new Blob([htmlString], { type: 'text/html' });
+      iframeSrcProp = {
+        src: URL.createObjectURL(blob),
+      };
+    }
     return (
       <iframe
-        srcDoc={htmlString}
+        {...iframeSrcProp}
         sandbox="allow-scripts"
         style={{ width: '100%', height: '100%', ...style }}
         title="MCP HTML Resource (Embedded Content)"
diff --git a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
index 49e17849..8d84560b 100644
--- a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
@@ -91,6 +91,49 @@ describe('HTMLResource component', () => {
     expect(iframe.srcdoc).toContain(html);
   });
 
+  it('sets blob HTML src without preferSrcDocOverBlob', () => {
+    const originalCreateObjectURL = window.URL.createObjectURL;
+    window.URL.createObjectURL = (blob: Blob) => {
+      return `blob:${blob.size}`;
+    }
+    const html = '<p>Blob Content</p>';
+    const encodedHtml = Buffer.from(html).toString('base64');
+    const props: HTMLResourceRendererProps = {
+      resource: {
+        uri: 'ui://blob-test',
+        mimeType: 'text/html',
+        blob: encodedHtml,
+      },
+      onUIAction: mockOnUIAction,
+    };
+    render(<HTMLResourceRenderer {...props} />);
+    window.URL.createObjectURL = originalCreateObjectURL;
+    const iframe = screen.getByTitle('MCP HTML Resource (Embedded Content)') as HTMLIFrameElement;
+    expect(iframe.src).toContain(`blob:${new Blob([html]).size}`);
+  })
+
+  it('respects preferSrcDocOverBlob', () => {
+    const originalCreateObjectURL = window.URL.createObjectURL;
+    window.URL.createObjectURL = (blob: Blob) => {
+      return `blob:${blob.size}`;
+    }
+    const html = '<p>Blob Content</p>';
+    const encodedHtml = Buffer.from(html).toString('base64');
+    const props: HTMLResourceRendererProps = {
+      resource: {
+        uri: 'ui://blob-test',
+        mimeType: 'text/html',
+        blob: encodedHtml,
+        },
+        onUIAction: mockOnUIAction,
+        preferSrcDocOverBlob: true,
+    };
+    render(<HTMLResourceRenderer {...props} />);
+    window.URL.createObjectURL = originalCreateObjectURL;
+    const iframe = screen.getByTitle('MCP HTML Resource (Embedded Content)') as HTMLIFrameElement;
+    expect(iframe.srcdoc).toContain(html);
+  })
+
   it('decodes URL from blob for ui:// resource with text/uri-list mimetype', () => {
     const url = 'https://example.com/blob-app';
     const encodedUrl = Buffer.from(url).toString('base64');
@@ -108,7 +151,7 @@ describe('HTMLResource component', () => {
   });
 
   it('handles multiple URLs in uri-list format and uses the first one', () => {
-    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
     const uriList =
       'https://example.com/first\nhttps://example.com/second\nhttps://example.com/third';
     const props: HTMLResourceRendererProps = {
@@ -177,7 +220,7 @@ describe('HTMLResource iframe communication', () => {
   };
 
   const mockOnUIAction = vi.fn<[UIActionResult], Promise<unknown>>();
-  const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+  const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
 
   const renderComponentForUIActionTests = (props: Partial<HTMLResourceRendererProps> = {}) => {
     return render(

From dc0c3decffd30b0e5727c3696cae0fc0e08a4b8d Mon Sep 17 00:00:00 2001
From: Liad Yosef <liadyo@monday.com>
Date: Wed, 13 Aug 2025 22:10:47 +0300
Subject: [PATCH 2/3] revoke url

---
 .../client/src/components/HTMLResourceRenderer.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index 3544b2dc..4df3791b 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -42,6 +42,7 @@ export const HTMLResourceRenderer = ({
 }: HTMLResourceRendererProps) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   useImperativeHandle(iframeProps?.ref, () => iframeRef.current as HTMLIFrameElement);
+  const iframeSrcBlobUrl = useRef<string | null>(null);
 
   const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
     () => processHTMLResource(resource, proxy),
@@ -72,6 +73,10 @@ export const HTMLResourceRenderer = ({
           },
         );
       }
+      if (iframeSrcBlobUrl.current && typeof window?.URL?.revokeObjectURL === 'function') {
+        window.URL.revokeObjectURL(iframeSrcBlobUrl.current);
+        iframeSrcBlobUrl.current = null;
+      }
       iframeProps?.onLoad?.(event);
     },
     [iframeRenderData, iframeSrcToRender, iframeProps?.onLoad],
@@ -160,8 +165,10 @@ export const HTMLResourceRenderer = ({
     }
     if (!preferSrcDocOverBlob && typeof URL.createObjectURL === 'function') {
       const blob = new Blob([htmlString], { type: 'text/html' });
+      const blobUrl = URL.createObjectURL(blob);
+      iframeSrcBlobUrl.current = blobUrl;
       iframeSrcProp = {
-        src: URL.createObjectURL(blob),
+        src: blobUrl,
       };
     }
     return (

From 5c6bcab8694f43fbabe8611e62cdf49ee9a5362f Mon Sep 17 00:00:00 2001
From: Liad Yosef <liadyo@monday.com>
Date: Thu, 14 Aug 2025 01:13:22 +0300
Subject: [PATCH 3/3] rename prop

---
 docs/src/guide/client/html-resource.md                      | 4 ++--
 docs/src/guide/client/resource-renderer.md                  | 4 ++--
 .../client/src/components/HTMLResourceRenderer.tsx          | 6 +++---
 .../src/components/__tests__/HTMLResourceRenderer.test.tsx  | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/guide/client/html-resource.md b/docs/src/guide/client/html-resource.md
index c7ba316d..ced1c1b0 100644
--- a/docs/src/guide/client/html-resource.md
+++ b/docs/src/guide/client/html-resource.md
@@ -14,7 +14,7 @@ export interface HTMLResourceRendererProps {
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
-  preferSrcDocOverBlob?: boolean;
+  useSrcDoc?: boolean;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'ref' | 'style'>;
 }
 ```
@@ -41,7 +41,7 @@ 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=<encoded_original_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.
-- **`preferSrcDocOverBlob`**: (Optional) Defaults to `false`. When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Setting this to `true` can be useful in environments with strict Content Security Policies that block blob URLs.
+- **`useSrcDoc`**: (Optional) Defaults to `false`. When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Setting this to `true` can be useful in environments with strict Content Security Policies that block blob URLs.
 
 ## How It Works
 
diff --git a/docs/src/guide/client/resource-renderer.md b/docs/src/guide/client/resource-renderer.md
index e7380282..8f3c41d3 100644
--- a/docs/src/guide/client/resource-renderer.md
+++ b/docs/src/guide/client/resource-renderer.md
@@ -63,7 +63,7 @@ interface UIResourceRendererProps {
     - **`ref`**: Optional React ref to access the underlying iframe element
   - **`iframeRenderData`**: Optional `Record<string, unknown>` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.
   - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.
-  - **`preferSrcDocOverBlob`**: Optional `boolean` (defaults to `false`). When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Useful in environments with strict Content Security Policies that block blob URLs.
+  - **`useSrcDoc`**: Optional `boolean` (defaults to `false`). When `false` (default), HTML content is rendered using a blob URL set as the iframe's `src` attribute. When `true`, HTML content is rendered using the `srcDoc` attribute with the raw HTML string. Useful in environments with strict Content Security Policies that block blob URLs.
 - **`remoteDomProps`**: Optional props for the `<RemoteDOMResourceRenderer>`
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: Optional remote element definitions for Remote DOM resources. REQUIRED for Remote DOM snippets.
@@ -160,7 +160,7 @@ By default, HTML content is rendered using blob URLs for better security. If you
 <UIResourceRenderer
   resource={mcpResource.resource}
   htmlProps={{
-    preferSrcDocOverBlob: true
+    useSrcDoc: true
   }}
   onUIAction={handleUIAction}
 />
diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index 4df3791b..e37a1d9d 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -10,7 +10,7 @@ export type HTMLResourceRendererProps = {
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
-  preferSrcDocOverBlob?: boolean;
+  useSrcDoc?: boolean;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'style'> & {
     ref?: React.RefObject<HTMLIFrameElement>;
   };
@@ -37,7 +37,7 @@ export const HTMLResourceRenderer = ({
   proxy,
   iframeRenderData,
   autoResizeIframe,
-  preferSrcDocOverBlob,
+  useSrcDoc,
   iframeProps,
 }: HTMLResourceRendererProps) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -163,7 +163,7 @@ export const HTMLResourceRenderer = ({
     } = {
       srcDoc: htmlString,
     }
-    if (!preferSrcDocOverBlob && typeof URL.createObjectURL === 'function') {
+    if (!useSrcDoc && typeof URL.createObjectURL === 'function') {
       const blob = new Blob([htmlString], { type: 'text/html' });
       const blobUrl = URL.createObjectURL(blob);
       iframeSrcBlobUrl.current = blobUrl;
diff --git a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
index 8d84560b..d3ad23ad 100644
--- a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
@@ -91,7 +91,7 @@ describe('HTMLResource component', () => {
     expect(iframe.srcdoc).toContain(html);
   });
 
-  it('sets blob HTML src without preferSrcDocOverBlob', () => {
+  it('sets blob HTML src without useSrcDoc', () => {
     const originalCreateObjectURL = window.URL.createObjectURL;
     window.URL.createObjectURL = (blob: Blob) => {
       return `blob:${blob.size}`;
@@ -112,7 +112,7 @@ describe('HTMLResource component', () => {
     expect(iframe.src).toContain(`blob:${new Blob([html]).size}`);
   })
 
-  it('respects preferSrcDocOverBlob', () => {
+  it('respects useSrcDoc', () => {
     const originalCreateObjectURL = window.URL.createObjectURL;
     window.URL.createObjectURL = (blob: Blob) => {
       return `blob:${blob.size}`;
@@ -126,7 +126,7 @@ describe('HTMLResource component', () => {
         blob: encodedHtml,
         },
         onUIAction: mockOnUIAction,
-        preferSrcDocOverBlob: true,
+        useSrcDoc: true,
     };
     render(<HTMLResourceRenderer {...props} />);
     window.URL.createObjectURL = originalCreateObjectURL;