feat: enhance AUIApplicationBridge with binary response handling and add tests

Author: marosvolgyiz

apps/sensenet/docs/auiapplications.md

@@ -99,9 +99,15 @@ type BridgeResponse = {
   }
   text(): Promise<string>
   json(): Promise<any>
+  arrayBuffer(): Promise<ArrayBuffer>
+  blob(): Promise<Blob>
 }
 ```
 
+Binary responses are transferred as `ArrayBuffer`, so downloads from endpoints such as
+`/binaryhandler.ashx?nodeid=...&propertyname=Binary` can be read with `blob()` or
+`arrayBuffer()` without converting the body through text first.
+
 Requests are restricted to the current repository origin. Cross-repository and arbitrary external requests are rejected by the parent Admin UI.
 
 ## Admin UI Route Location

apps/sensenet/src/components/content/AUIApplicationView.tsx

@@ -7,6 +7,7 @@ import { useLocation } from 'react-router-dom'
 import {
   AUIApplicationBridgeLocation,
   AUIApplicationBridgeTheme,
+  createBridgeFetchResponse,
   createBridgeLocation,
   createBridgeTheme,
 } from './auiapplication-bridge'
@@ -104,18 +105,39 @@ const createApplicationDocument = (
     return headers;
   };
 
-  const createBridgeResponse = (response) => ({
-    ok: response.ok,
-    status: response.status,
-    statusText: response.statusText,
-    url: response.url,
-    headers: {
-      get: (name) => response.headers[String(name).toLowerCase()] || null,
-      entries: () => Object.entries(response.headers),
-    },
-    text: () => Promise.resolve(response.body),
-    json: () => Promise.resolve(JSON.parse(response.body)),
-  });
+  const createBodyBuffer = (body) => {
+    if (ArrayBuffer.isView(body)) {
+      return body.buffer.slice(body.byteOffset, body.byteOffset + body.byteLength);
+    }
+
+    if (body && typeof body.byteLength === 'number') {
+      return body.slice(0);
+    }
+
+    return new TextEncoder().encode(String(body || '')).buffer;
+  };
+
+  const createBridgeResponse = (response) => {
+    const bodyBuffer = createBodyBuffer(response.body);
+    const getHeader = (name) => response.headers[String(name).toLowerCase()] || null;
+    const getBodyCopy = () => bodyBuffer.slice(0);
+    const getBodyText = () => Promise.resolve(new TextDecoder().decode(getBodyCopy()));
+
+    return {
+      ok: response.ok,
+      status: response.status,
+      statusText: response.statusText,
+      url: response.url,
+      headers: {
+        get: getHeader,
+        entries: () => Object.entries(response.headers),
+      },
+      text: getBodyText,
+      json: () => getBodyText().then((body) => JSON.parse(body)),
+      arrayBuffer: () => Promise.resolve(getBodyCopy()),
+      blob: () => Promise.resolve(new Blob([getBodyCopy()], { type: getHeader('content-type') || '' })),
+    };
+  };
 
   window.addEventListener('message', (event) => {
     const data = event.data || {};
@@ -293,37 +315,38 @@ export const AUIApplicationView: React.FC = () => {
         return
       }
 
-      const postResponse = (message: Record<string, unknown>) => {
-        frameRef.current?.contentWindow?.postMessage(
-          {
-            source: AUI_APPLICATION_CONTENT_TYPE,
-            requestId: data.requestId,
-            ...message,
-          },
-          '*',
-        )
+      const postResponse = (message: Record<string, unknown>, transfer?: Transferable[]) => {
+        const targetWindow = frameRef.current?.contentWindow
+        const responseMessage = {
+          source: AUI_APPLICATION_CONTENT_TYPE,
+          requestId: data.requestId,
+          ...message,
+        }
+
+        if (!targetWindow) {
+          return
+        }
+
+        if (transfer?.length) {
+          targetWindow.postMessage(responseMessage, '*', transfer)
+          return
+        }
+
+        targetWindow.postMessage(responseMessage, '*')
       }
 
       try {
         const requestUrl = getRepositoryRequestUrl(repository.configuration.repositoryUrl, data.input)
         const response = await repository.fetch(requestUrl, getBridgeRequestInit(data.init))
-        const headers: Record<string, string> = {}
+        const bridgeResponse = await createBridgeFetchResponse(response)
 
-        response.headers.forEach((value, key) => {
-          headers[key.toLowerCase()] = value
-        })
-
-        postResponse({
-          type: 'fetch:success',
-          response: {
-            ok: response.ok,
-            status: response.status,
-            statusText: response.statusText,
-            url: response.url,
-            headers,
-            body: await response.text(),
+        postResponse(
+          {
+            type: 'fetch:success',
+            response: bridgeResponse,
           },
-        })
+          [bridgeResponse.body],
+        )
       } catch (error) {
         postResponse({
           type: 'fetch:error',

apps/sensenet/src/components/content/auiapplication-bridge.ts

@@ -8,6 +8,32 @@ export type AUIApplicationBridgeLocation = {
 
 export type AUIApplicationBridgeTheme = 'light' | 'dark'
 
+export type AUIApplicationBridgeFetchResponse = {
+  ok: boolean
+  status: number
+  statusText: string
+  url: string
+  headers: Record<string, string>
+  body: ArrayBuffer
+}
+
+export const createBridgeFetchResponse = async (response: Response): Promise<AUIApplicationBridgeFetchResponse> => {
+  const headers: Record<string, string> = {}
+
+  response.headers.forEach((value, key) => {
+    headers[key.toLowerCase()] = value
+  })
+
+  return {
+    ok: response.ok,
+    status: response.status,
+    statusText: response.statusText,
+    url: response.url,
+    headers,
+    body: await response.arrayBuffer(),
+  }
+}
+
 export const createBridgeLocation = (
   adminUiUrl: string,
   location: Pick<Location, 'pathname' | 'search' | 'hash'>,

apps/sensenet/test/auiapplication-bridge.test.ts

@@ -0,0 +1,24 @@
+import { createBridgeFetchResponse } from '../src/components/content/auiapplication-bridge'
+
+describe('createBridgeFetchResponse', () => {
+  it('serializes binary responses as ArrayBuffer without corrupting bytes', async () => {
+    const bytes = new Uint8Array([0x00, 0xff, 0x80, 0x41, 0x0a])
+    const response = new Response(bytes, {
+      status: 200,
+      statusText: 'OK',
+      headers: {
+        'Content-Type': 'application/octet-stream',
+      },
+    })
+
+    const bridgeResponse = await createBridgeFetchResponse(response)
+
+    expect(bridgeResponse.ok).toBe(true)
+    expect(bridgeResponse.status).toBe(200)
+    expect(bridgeResponse.headers['content-type']).toBe('application/octet-stream')
+    expect(Array.from(new Uint8Array(bridgeResponse.body))).toEqual(Array.from(bytes))
+
+    const blob = new Blob([bridgeResponse.body], { type: bridgeResponse.headers['content-type'] })
+    expect(Array.from(new Uint8Array(await blob.arrayBuffer()))).toEqual(Array.from(bytes))
+  })
+})