CARTO: Do not mutate passed in loadOptions objects (#9580)

felixpalmer · web-flow · commit f7fe3d5544f8 · 2025-04-15T18:10:49.000+02:00
diff --git a/modules/carto/src/layers/cluster-tile-layer.ts b/modules/carto/src/layers/cluster-tile-layer.ts
@@ -38,7 +38,7 @@ import {DEFAULT_TILE_SIZE} from '../constants';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import {getQuadbinPolygon} from './quadbin-utils';
 import CartoSpatialTileLoader from './schema/carto-spatial-tile-loader';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import type {TilejsonResult} from '@carto/api-client';
 
 registerLoaders([CartoSpatialTileLoader]);
@@ -216,11 +216,11 @@ export default class ClusterTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'quadbin'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'quadbin'}
+    });
   }
 
   renderLayers(): Layer | null | LayersList {
diff --git a/modules/carto/src/layers/h3-tile-layer.ts b/modules/carto/src/layers/h3-tile-layer.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
 import {H3HexagonLayer, H3HexagonLayerProps} from '@deck.gl/geo-layers';
 import H3Tileset2D, {getHexagonResolution} from './h3-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
@@ -47,11 +47,11 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
   }
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'h3'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'h3'}
+    });
   }
 
   renderLayers(): SpatialIndexTileLayer | null {
diff --git a/modules/carto/src/layers/quadbin-tile-layer.ts b/modules/carto/src/layers/quadbin-tile-layer.ts
@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
 import QuadbinLayer, {QuadbinLayerProps} from './quadbin-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import {hexToBigInt} from 'quadbin';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 
 export const renderSubLayers = props => {
@@ -43,11 +43,11 @@ export default class QuadbinTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.cartoSpatialTile = {...loadOptions.cartoSpatialTile, scheme: 'quadbin'};
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      cartoSpatialTile: {scheme: 'quadbin'}
+    });
   }
 
   renderLayers(): SpatialIndexTileLayer | null {
diff --git a/modules/carto/src/layers/raster-tile-layer.ts b/modules/carto/src/layers/raster-tile-layer.ts
@@ -13,7 +13,7 @@ import {
 import RasterLayer, {RasterLayerProps} from './raster-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import type {TilejsonResult} from '@carto/api-client';
-import {injectAccessToken, TilejsonPropType} from './utils';
+import {TilejsonPropType, mergeLoadOptions} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 import {TileLayer, TileLayerProps} from '@deck.gl/geo-layers';
 import {copy, PostProcessModifier} from './post-process-utils';
@@ -62,10 +62,10 @@ export default class RasterTileLayer<
   static defaultProps = defaultProps;
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}}
+    });
   }
 
   renderLayers(): Layer | null | LayersList {
diff --git a/modules/carto/src/layers/utils.ts b/modules/carto/src/layers/utils.ts
@@ -9,15 +9,38 @@ import {_deepEqual as deepEqual} from '@deck.gl/core';
 import type {TilejsonResult} from '@carto/api-client';
 
 /**
- * Adds access token to Authorization header in loadOptions
+ * Merges load options with additional options, creating a new object without mutating the input.
+ * Handles nested objects through recursive deep merge with protection against circular references.
  */
-export function injectAccessToken(loadOptions: any, accessToken: string): void {
-  if (!loadOptions?.fetch?.headers?.Authorization) {
-    loadOptions.fetch = {
-      ...loadOptions.fetch,
-      headers: {...loadOptions.fetch?.headers, Authorization: `Bearer ${accessToken}`}
-    };
+export function mergeLoadOptions(loadOptions: any, additionalOptions: any, depth = 0): any {
+  if (!loadOptions) {
+    return additionalOptions;
   }
+  if (!additionalOptions) {
+    return loadOptions;
+  }
+
+  // Safety check against deep recursion
+  if (depth > 10) {
+    return additionalOptions;
+  }
+
+  const result = {...loadOptions};
+
+  for (const key in additionalOptions) {
+    const value = additionalOptions[key];
+    // Skip circular references
+    if (value === loadOptions || value === additionalOptions) {
+      continue;
+    }
+    if (typeof value === 'object' && value !== null) {
+      result[key] = mergeLoadOptions(loadOptions[key], value, depth + 1);
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
 }
 
 export function mergeBoundaryData(geometry: VectorTile, properties: PropertiesTile): VectorTile {
diff --git a/modules/carto/src/layers/vector-tile-layer.ts b/modules/carto/src/layers/vector-tile-layer.ts
@@ -20,7 +20,7 @@ import {
 import {GeoJsonLayer} from '@deck.gl/layers';
 
 import type {TilejsonResult} from '@carto/api-client';
-import {TilejsonPropType, injectAccessToken, mergeBoundaryData} from './utils';
+import {TilejsonPropType, mergeLoadOptions, mergeBoundaryData} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 import PointLabelLayer from './point-label-layer';
 
@@ -75,11 +75,11 @@ export default class VectorTileLayer<
   }
 
   getLoadOptions(): any {
-    const loadOptions = super.getLoadOptions() || {};
     const tileJSON = this.props.data as TilejsonResult;
-    injectAccessToken(loadOptions, tileJSON.accessToken);
-    loadOptions.gis = {format: 'binary'}; // Use binary for MVT loading
-    return loadOptions;
+    return mergeLoadOptions(super.getLoadOptions(), {
+      fetch: {headers: {Authorization: `Bearer ${tileJSON.accessToken}`}},
+      gis: {format: 'binary'} // Use binary for MVT loading
+    });
   }
 
   /* eslint-disable camelcase */
diff --git a/modules/carto/test/layers/utils.spec.ts b/modules/carto/test/layers/utils.spec.ts
@@ -0,0 +1,82 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import test from 'tape-promise/tape';
+import {mergeLoadOptions} from '../../src/layers/utils';
+
+test('utils#mergeLoadOptions', t => {
+  const accessToken = 'test-token';
+  const loadOptions = {
+    fetch: {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  };
+
+  const result = mergeLoadOptions(loadOptions, {
+    fetch: {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  t.deepEqual(result, {
+    fetch: {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  // Test with no existing headers
+  const loadOptions2 = {
+    fetch: {}
+  };
+
+  const result2 = mergeLoadOptions(loadOptions2, {
+    fetch: {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  t.deepEqual(result2, {
+    fetch: {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  // Test with no existing fetch
+  const loadOptions3 = {};
+
+  const result3 = mergeLoadOptions(loadOptions3, {
+    fetch: {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  t.deepEqual(result3, {
+    fetch: {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    }
+  });
+
+  // Test with no additional options
+  const result4 = mergeLoadOptions(loadOptions, null);
+  t.deepEqual(result4, loadOptions);
+
+  // Test with no load options
+  const result5 = mergeLoadOptions(null, loadOptions);
+  t.deepEqual(result5, loadOptions);
+});
