firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add crossOrigin property to <img> tag used for decoding (flutter/engine#54961)

Browse Source 
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
This commit is contained in:
Harry Terkelsen 2024-09-04 17:29:36 -07:00 committed by GitHub
parent 34bc9af6d5
commit acf6660982
3 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
engine/src/flutter/lib/web_ui/lib/src/engine/html_image_element_codec.dart
View File

@ -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`.

1
engine/src/flutter/lib/web_ui/lib/src/engine/safe_browser_api.dart
View File

@ -40,6 +40,7 @@ T getJsProperty<T>(Object object, String name) {
}
const Set<String> _safeJsProperties = <String>{
'crossOrigin',
'decoding',
'__flutter_state',
};

13
engine/src/flutter/lib/web_ui/test/canvaskit/image_golden_test.dart
View File

@ -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', () {