fix: DEV-4081: Handle edge case related to CORS headers and AWS S3

e2e/tests/image.magic-wand.test.js

@@ -158,10 +158,9 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct
   I.say('Unselecting last magic wand region');
   I.pressKey('Escape');
 
-  // @todo currently gallery doesn't work well with CORS, so this is not covered by test
   // Change to the false color view, zoom in, and magic wand with a new class.
-  // I.say('Changing to false-color view');
-  // I.click('[class*="gallery--"] img[src*="false_color"]');
+  I.say('Changing to false-color view');
+  I.click('[class*="gallery--"] img[src*="false_color"]');
 
   I.say('Zooming in');
   I.click('button[aria-label="zoom-in"]');

src/tags/object/Image.js

@@ -34,22 +34,22 @@ import { FF_DEV_3377, FF_DEV_3666, FF_DEV_4081, isFF } from '../../utils/feature
  * @name Image
  * @meta_title Image Tags for Images
  * @meta_description Customize Label Studio with the Image tag to annotate images for computer vision machine learning and data science projects.
- * @param {string} name                       - Name of the element
- * @param {string} value                      - Data field containing a path or URL to the image
- * @param {boolean} [smoothing]               - Enable smoothing, by default it uses user settings
- * @param {string=} [width=100%]              - Image width
- * @param {string=} [maxWidth=750px]          - Maximum image width
- * @param {boolean=} [zoom=false]             - Enable zooming an image with the mouse wheel
- * @param {boolean=} [negativeZoom=false]     - Enable zooming out an image
- * @param {float=} [zoomBy=1.1]               - Scale factor
- * @param {boolean=} [grid=false]             - Whether to show a grid
- * @param {number=} [gridSize=30]             - Specify size of the grid
- * @param {string=} [gridColor="#EEEEF4"]     - Color of the grid in hex, opacity is 0.15
- * @param {boolean} [zoomControl=false]       - Show zoom controls in toolbar
- * @param {boolean} [brightnessControl=false] - Show brightness control in toolbar
- * @param {boolean} [contrastControl=false]   - Show contrast control in toolbar
- * @param {boolean} [rotateControl=false]     - Show rotate control in toolbar
- * @param {boolean} [crosshair=false]         - Show crosshair cursor
+ * @param {string} name                         - Name of the element
+ * @param {string} value                        - Data field containing a path or URL to the image
+ * @param {boolean} [smoothing]                 - Enable smoothing, by default it uses user settings
+ * @param {string=} [width=100%]                - Image width
+ * @param {string=} [maxWidth=750px]            - Maximum image width
+ * @param {boolean=} [zoom=false]               - Enable zooming an image with the mouse wheel
+ * @param {boolean=} [negativeZoom=false]       - Enable zooming out an image
+ * @param {float=} [zoomBy=1.1]                 - Scale factor
+ * @param {boolean=} [grid=false]               - Whether to show a grid
+ * @param {number=} [gridSize=30]               - Specify size of the grid
+ * @param {string=} [gridColor="#EEEEF4"]       - Color of the grid in hex, opacity is 0.15
+ * @param {boolean} [zoomControl=false]         - Show zoom controls in toolbar
+ * @param {boolean} [brightnessControl=false]   - Show brightness control in toolbar
+ * @param {boolean} [contrastControl=false]     - Show contrast control in toolbar
+ * @param {boolean} [rotateControl=false]       - Show rotate control in toolbar
+ * @param {boolean} [crosshair=false]           - Show crosshair cursor
  * @param {string} [horizontalAlignment="left"] - Where to align image horizontally. Can be one of "left", "center" or "right"
  * @param {string} [verticalAlignment="top"]    - Where to align image vertically. Can be one of "top", "center" or "bottom"
  * @param {string} [defaultZoom="fit"]          - Specify the initial zoom of the image within the viewport while preserving it’s ratio. Can be one of "auto", "original" or "fit"
@@ -297,10 +297,24 @@ const Model = types.model({
 
   // @todo the name is for backward compatibility; change the name later
   get _value() {
-    const value = self.parsedValue;
+    let value = self.parsedValue;
+
+    if (Array.isArray(value)) value = value[self.currentImage];
 
-    if (Array.isArray(value)) return value[self.currentImage];
-    return value;
+    if (!self.imageCrossOrigin) {
+      return value;
+    } else if (isFF(FF_DEV_4081) &&
+               /^https?:.*?s3\.amazonaws\.com\//g.test(value) &&
+               !(new URL(value)).searchParams.has('X-Amz-Signature')) {
+      // Unsigned AWS S3 inconsistently sends back the Origin HTTP header, between
+      // images in an <img> tag and a JavaScript CORS request, breaking cross domain images.
+      // Details: https://bugs.chromium.org/p/chromium/issues/detail?id=409090
+      // Fix is to break the cache for this image only if its cross origin, on
+      // S3, and not a signed AWS URL with X-Amz-Signature in its query params.
+      return value + '?v=1';
+    } else {
+      return value;
+    }
   },
 
   get images() {