From acf6660982dff1f924f3438f05a41bcdba649105 Mon Sep 17 00:00:00 2001
From: Harry Terkelsen <1961493+harryterkelsen@users.noreply.github.com>
Date: Wed, 4 Sep 2024 17:29:36 -0700
Subject: [PATCH] Add `crossOrigin` property to <img> tag used for decoding
 (flutter/engine#54961)

Adds the `crossOrigin` property to the `<img>` tag used for decoding. This allows us to use cross-origin images in CanvasKit as if it were loaded from the same origin, as long as the CORS headers are properly set on the server hosting the image.

In the case where the image doesn't have proper CORS headers, this change causes an error to occur while attempting to decode, rather than later on in Skia when the image is converted into a texture. Hitting the cross-origin error later causes Skia to behave in undefined ways.

Progress towards https://github.com/flutter/flutter/issues/149843

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
---
 .../lib/src/engine/html_image_element_codec.dart    |  1 +
 .../lib/web_ui/lib/src/engine/safe_browser_api.dart |  1 +
 .../web_ui/test/canvaskit/image_golden_test.dart    | 13 +++++++++++++
 3 files changed, 15 insertions(+)

diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/html_image_element_codec.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/html_image_element_codec.dart
index 2bd6ccabc5..4323330a1b 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/html_image_element_codec.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/html_image_element_codec.dart
@@ -45,6 +45,7 @@ abstract class HtmlImageElementCodec implements ui.Codec {
     imgElement = createDomHTMLImageElement();
     imgElement!.src = src;
     setJsProperty<String>(imgElement!, 'decoding', 'async');
+    setJsProperty<String>(imgElement!, 'crossOrigin', 'anonymous');
 
     // Ignoring the returned future on purpose because we're communicating
     // through the `completer`.
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/safe_browser_api.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/safe_browser_api.dart
index 59d9f7a07e..a62b2e034c 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/safe_browser_api.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/safe_browser_api.dart
@@ -40,6 +40,7 @@ T getJsProperty<T>(Object object, String name) {
 }
 
 const Set<String> _safeJsProperties = <String>{
+  'crossOrigin',
   'decoding',
   '__flutter_state',
 };
diff --git a/engine/src/flutter/lib/web_ui/test/canvaskit/image_golden_test.dart b/engine/src/flutter/lib/web_ui/test/canvaskit/image_golden_test.dart
index b5c5c6085b..e0681ce6e1 100644
--- a/engine/src/flutter/lib/web_ui/test/canvaskit/image_golden_test.dart
+++ b/engine/src/flutter/lib/web_ui/test/canvaskit/image_golden_test.dart
@@ -253,6 +253,19 @@ Future<void> testMain() async {
       }
     });
 
+    test('crossOrigin requests cause an error', () async {
+      final String otherOrigin =
+          domWindow.location.origin.replaceAll('localhost', '127.0.0.1');
+      bool gotError = false;
+      try {
+        final ui.Codec _ = await renderer.instantiateImageCodecFromUrl(
+            Uri.parse('$otherOrigin/test_images/1x1.png'));
+      } catch (e) {
+        gotError = true;
+      }
+      expect(gotError, isTrue, reason: 'Should have got CORS error');
+    });
+
     _testCkAnimatedImage();
 
     test('isAvif', () {