fix: Modify utils functions for browser (box/box-codegen#686) (#585)

Author: box-sdk-build

.codegen.json

@@ -1 +1 @@
-{ "engineHash": "15d82b5", "specHash": "c303afc", "version": "1.15.1" }
+{ "engineHash": "4148197", "specHash": "c303afc", "version": "1.15.1" }

.github/workflows/build_and_test_browser.yml

@@ -0,0 +1,45 @@
+name: build-and-test
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: ['chrome', 'firefox']
+    name: Browser ${{ matrix.browser }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies and build
+        run: |
+          npm install
+          npm run build
+      - name: Run tests
+        run: |
+          cd test-browser
+          npm install
+          npx start-server-and-test build-run 3000 'cypress run --browser ${{ matrix.browser }}'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          JWT_CONFIG_BASE_64: ${{ secrets.JWT_CONFIG_BASE_64 }}
+          ADMIN_USER_ID: ${{ secrets.ADMIN_USER_ID }}
+          CLIENT_ID: ${{ secrets.CLIENT_ID }}
+          CLIENT_SECRET: ${{ secrets.CLIENT_SECRET }}
+          USER_ID: ${{ secrets.USER_ID }}
+          ENTERPRISE_ID: ${{ secrets.ENTERPRISE_ID }}
+          BOX_FILE_REQUEST_ID: ${{ secrets.BOX_FILE_REQUEST_ID }}
+          BOX_EXTERNAL_USER_EMAIL: ${{ secrets.BOX_EXTERNAL_USER_EMAIL }}
+          WORKFLOW_FOLDER_ID: ${{ secrets.WORKFLOW_FOLDER_ID }}
+          APP_ITEM_ASSOCIATION_FILE_ID: ${{ secrets.APP_ITEM_ASSOCIATION_FILE_ID }}
+          APP_ITEM_ASSOCIATION_FOLDER_ID: ${{ secrets.APP_ITEM_ASSOCIATION_FOLDER_ID }}
+          APP_ITEM_SHARED_LINK: ${{ secrets.APP_ITEM_SHARED_LINK }}

package-lock.json

@@ -20,8 +20,11 @@ import {
   Buffer,
   FormData,
   generateReadableStreamFromFile,
+  getEnvVar,
+  setEnvVar,
   utilLib,
 } from './utilsNode';
+import { MultipartItem } from '../networking';
 import { sanitizedValue } from '../serialization/json';
 
 export type HashName = 'sha1';
@@ -44,6 +47,8 @@ export {
   jsonStringifyWithEscapedUnicode,
   computeWebhookSignature,
   calculateMD5Hash,
+  getEnvVar,
+  setEnvVar,
   utilLib,
 };
 
@@ -133,10 +138,6 @@ export function hexStrToBase64(hex: string) {
   return base64;
 }
 
-export function getEnvVar(name: string) {
-  return process.env[name] || '';
-}
-
 export function generateByteStream(size: number): ByteStream {
   return generateByteStreamFromBuffer(generateByteBuffer(size));
 }
@@ -243,6 +244,42 @@ export function random(min: number, max: number): number {
   return Math.random() * (max - min) + min;
 }
 
+export async function multipartStreamToBuffer(
+  multipart: readonly MultipartItem[],
+): Promise<(MultipartItem & { fileStreamBuffer?: Buffer })[]> {
+  return await Promise.all(
+    multipart.map(async (item) => {
+      if (!item.fileStream) {
+        return item;
+      }
+      return {
+        ...item,
+        fileStream: undefined,
+        fileStreamBuffer: item.fileStream
+          ? await readByteStream(item.fileStream)
+          : undefined,
+      };
+    }),
+  );
+}
+
+export function multipartBufferToStream(
+  multipart: (MultipartItem & { fileStreamBuffer?: Buffer })[],
+): readonly MultipartItem[] {
+  return multipart.map((item) => {
+    if (!item.fileStreamBuffer) {
+      return item;
+    }
+    return {
+      ...item,
+      fileStreamBuffer: undefined,
+      fileStream: item.fileStreamBuffer
+        ? generateByteStreamFromBuffer(item.fileStreamBuffer)
+        : undefined,
+    } as MultipartItem;
+  });
+}
+
 /**
  * Sanitize a map by replacing sensitive values with a placeholder.
  * @param dictionary The map to sanitize

src/internal/utils.ts

@@ -57,8 +57,17 @@ export class Hash {
 }
 
 export function generateByteBuffer(size: number): Buffer {
+  // Maximum size for crypto.getRandomValues is 65536 bytes
+  const MAX_CHUNK_SIZE = 65536;
   const buffer = new Uint8Array(size);
-  window.crypto.getRandomValues(buffer);
+
+  for (let offset = 0; offset < size; offset += MAX_CHUNK_SIZE) {
+    const length = Math.min(MAX_CHUNK_SIZE, size - offset);
+    const chunk = new Uint8Array(length);
+    window.crypto.getRandomValues(chunk);
+    buffer.set(chunk, offset);
+  }
+
   return Buffer.from(buffer);
 }
 
@@ -124,6 +133,27 @@ export function stringToByteStream(data: string): ReadableStream {
   });
 }
 
+export function getEnvVar(name: string): string {
+  if (
+    typeof window !== 'undefined' &&
+    (window as any).env &&
+    (window as any).env[name]
+  ) {
+    return (window as any).env[name];
+  }
+  return '';
+}
+
+export function setEnvVar(name: string, value: string): void {
+  if (typeof window === 'undefined') {
+    throw new Error('This function requires a browser environment');
+  }
+  if (!(window as any).env) {
+    (window as any).env = {};
+  }
+  (window as any).env[name] = value;
+}
+
 export async function readByteStream(byteStream: ByteStream): Promise<Buffer> {
   const buffers: Buffer[] = [];
 

src/internal/utilsBrowser.ts

@@ -271,3 +271,17 @@ export function random(min: number, max: number): number {
 export async function calculateMD5Hash(data: string | Buffer): Promise<string> {
   return crypto.createHash('sha1').update(data).digest('hex');
 }
+
+export function getEnvVar(name: string): string {
+  if (typeof process === 'undefined' || !process.env) {
+    throw new Error('This function requires a Node.js environment');
+  }
+  return process.env[name] || '';
+}
+
+export function setEnvVar(name: string, value: string): void {
+  if (typeof process === 'undefined' || !process.env) {
+    throw new Error('This function requires a Node.js environment');
+  }
+  process.env[name] = value;
+}

src/internal/utilsNode.ts

@@ -8,6 +8,8 @@ import {
   isBrowser,
   readByteStream,
   calculateMD5Hash,
+  multipartStreamToBuffer,
+  multipartBufferToStream,
 } from '../internal/utils';
 import { sdkVersion } from './version';
 import { NetworkClient } from './networkClient.generated';
@@ -26,7 +28,15 @@ import { NetworkSession } from './network.generated';
 export const userAgentHeader = `Box JavaScript generated SDK v${sdkVersion} (${
   isBrowser() ? navigator.userAgent : `Node ${process.version}`
 })`;
+
 export const xBoxUaHeader = constructBoxUAHeader();
+export const shouldIncludeBoxUaHeader = (options: FetchOptions) => {
+  return !(
+    isBrowser() &&
+    (options.responseFormat === 'binary' ||
+      options.responseFormat === 'no_content')
+  );
+};
 
 export interface MultipartItem {
   readonly partName: string;
@@ -118,15 +128,18 @@ async function createRequestInit(options: FetchOptions): Promise<RequestInit> {
   return {
     method,
     headers: {
-      ...contentHeaders,
+      // Only set content type if it is not a GET request
+      ...(method != 'GET' && contentHeaders),
       ...headers,
       ...(options.auth && {
         Authorization: await options.auth.retrieveAuthorizationHeader(
           options.networkSession,
         ),
       }),
-      'User-Agent': userAgentHeader,
-      'X-Box-UA': xBoxUaHeader,
+      ...(shouldIncludeBoxUaHeader(options) && {
+        'User-Agent': userAgentHeader,
+        'X-Box-UA': xBoxUaHeader,
+      }),
       // Additional headers will override the default headers
       ...options.networkSession?.additionalHeaders,
     },
@@ -157,11 +170,18 @@ export class BoxNetworkClient implements NetworkClient {
     const fileStreamBuffer = fetchOptions.fileStream
       ? await readByteStream(fetchOptions.fileStream)
       : void 0;
+    const multipartBuffer = fetchOptions.multipartData
+      ? await multipartStreamToBuffer(fetchOptions.multipartData)
+      : void 0;
+
     const requestInit = await createRequestInit({
       ...fetchOptions,
       fileStream: fileStreamBuffer
         ? generateByteStreamFromBuffer(fileStreamBuffer)
         : void 0,
+      multipartData: multipartBuffer
+        ? multipartBufferToStream(multipartBuffer)
+        : void 0,
     });
 
     const { params = {} } = fetchOptions;
@@ -220,7 +240,16 @@ export class BoxNetworkClient implements NetworkClient {
         numRetries,
       );
       await new Promise((resolve) => setTimeout(resolve, retryTimeout));
-      return this.fetch({ ...options, numRetries: numRetries + 1 });
+      return this.fetch({
+        ...options,
+        numRetries: numRetries + 1,
+        fileStream: fileStreamBuffer
+          ? generateByteStreamFromBuffer(fileStreamBuffer)
+          : void 0,
+        multipartData: multipartBuffer
+          ? multipartBufferToStream(multipartBuffer)
+          : void 0,
+      });
     }
 
     if (

src/networking/boxNetworkClient.ts

@@ -80,6 +80,10 @@ import { BoxClient } from '../client.generated.js';
 import { ClassificationTemplate } from '../schemas/classificationTemplate.generated.js';
 import { FileFull } from '../schemas/fileFull.generated.js';
 import { TermsOfService } from '../schemas/termsOfService.generated.js';
+import { Authentication } from '../networking/auth.generated.js';
+import { BoxCcgAuth } from '../box/ccgAuth.generated.js';
+import { CcgConfig } from '../box/ccgAuth.generated.js';
+import { isBrowser } from '../internal/utils.js';
 import { BoxJwtAuth } from '../box/jwtAuth.generated.js';
 import { JwtConfig } from '../box/jwtAuth.generated.js';
 import { toString } from '../internal/utils.js';
@@ -91,6 +95,15 @@ import { sdIsNumber } from '../serialization/json.js';
 import { sdIsString } from '../serialization/json.js';
 import { sdIsList } from '../serialization/json.js';
 import { sdIsMap } from '../serialization/json.js';
+export function getCcgAuth(): BoxCcgAuth {
+  const ccgConfig: CcgConfig = new CcgConfig({
+    clientId: getEnvVar('CLIENT_ID'),
+    clientSecret: getEnvVar('CLIENT_SECRET'),
+    enterpriseId: getEnvVar('ENTERPRISE_ID'),
+  });
+  const auth: BoxCcgAuth = new BoxCcgAuth({ config: ccgConfig });
+  return auth;
+}
 export function getJwtAuth(): BoxJwtAuth {
   const jwtConfig: JwtConfig = JwtConfig.fromConfigJsonString(
     decodeBase64(getEnvVar('JWT_CONFIG_BASE_64')),
@@ -99,12 +112,19 @@ export function getJwtAuth(): BoxJwtAuth {
   return auth;
 }
 export function getDefaultClientWithUserSubject(userId: string): BoxClient {
+  if (isBrowser()) {
+    const ccgAuth: BoxCcgAuth = getCcgAuth();
+    const ccgAuthUser: BoxCcgAuth = ccgAuth.withUserSubject(userId);
+    return new BoxClient({ auth: ccgAuthUser });
+  }
   const auth: BoxJwtAuth = getJwtAuth();
   const authUser: BoxJwtAuth = auth.withUserSubject(userId);
   return new BoxClient({ auth: authUser });
 }
 export function getDefaultClient(): BoxClient {
-  const client: BoxClient = new BoxClient({ auth: getJwtAuth() });
+  const client: BoxClient = new BoxClient({
+    auth: isBrowser() ? getCcgAuth() : getJwtAuth(),
+  });
   return client;
 }
 export async function createNewFolder(): Promise<FolderFull> {

src/test/commons.generated.ts

@@ -33,6 +33,7 @@ import { UploadFileRequestBody } from '../managers/uploads.generated.js';
 import { UploadFileRequestBodyAttributesField } from '../managers/uploads.generated.js';
 import { UploadFileRequestBodyAttributesParentField } from '../managers/uploads.generated.js';
 import { GetFileThumbnailUrlExtension } from '../managers/files.generated.js';
+import { Buffer } from '../internal/utils.js';
 import { GetFileThumbnailByIdExtension } from '../managers/files.generated.js';
 import { GetFileByIdQueryParams } from '../managers/files.generated.js';
 import { GetFileByIdHeaders } from '../managers/files.generated.js';
@@ -46,6 +47,8 @@ import { CopyFileRequestBodyParentField } from '../managers/files.generated.js';
 import { getUuid } from '../internal/utils.js';
 import { generateByteStream } from '../internal/utils.js';
 import { readByteStream } from '../internal/utils.js';
+import { generateByteStreamFromBuffer } from '../internal/utils.js';
+import { generateByteBuffer } from '../internal/utils.js';
 import { bufferEquals } from '../internal/utils.js';
 import { ByteStream } from '../internal/utils.js';
 import { createNull } from '../internal/utils.js';
@@ -93,7 +96,9 @@ test('testGetFileThumbnailUrl', async function testGetFileThumbnailUrl(): Promis
 });
 test('testGetFileThumbnail', async function testGetFileThumbnail(): Promise<any> {
   const thumbnailFileName: string = getUuid();
-  const thumbnailContentStream: ByteStream = generateByteStream(1024 * 1024);
+  const thumbnailBuffer: Buffer = generateByteBuffer(1024 * 1024);
+  const thumbnailContentStream: ByteStream =
+    generateByteStreamFromBuffer(thumbnailBuffer);
   const thumbnailFile: FileFull = await uploadFile(
     thumbnailFileName,
     thumbnailContentStream,
@@ -104,12 +109,7 @@ test('testGetFileThumbnail', async function testGetFileThumbnail(): Promise<any>
       'png' as GetFileThumbnailByIdExtension,
     );
   if (
-    !!(
-      bufferEquals(
-        await readByteStream(thumbnail!),
-        await readByteStream(thumbnailContentStream),
-      ) == true
-    )
+    !!(bufferEquals(await readByteStream(thumbnail!), thumbnailBuffer) == true)
   ) {
     throw new Error('Assertion failed');
   }