Resource exhaustion / Denial of Service (DoS) via browser image decoding

// PoC: DoS via HTMLImageElement.decode() in environments without the new throttling (pre-fix). // Steps: // 1) Open a Flutter web page built from a version prior to this patch (where ImageDecodingManager throttling is not active). // 2) In the browser console, run the following script to flood the browser with image decodes. // 3) Observe memory usage rise, UI jank, or browser slowdown/crash on resource-constrained environments (e.g., iOS Safari). (() => { const N = 120; // number of concurrent decode attempts to stress test const src = 'https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg'; // large image const imgs = []; for (let i = 0; i < N; i++) { const img = document.createElement('img'); img.style.display = 'none'; img.crossOrigin = 'anonymous'; img.decoding = 'async'; img.src = src; // Trigger the browser decode path if (typeof img.decode === 'function') { img.decode().catch(() => {}); } document.body.appendChild(img); imgs.push(img); } console.log('Spawned ' + N + ' decode() attempts without throttling.'); })();

diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine.dart b/engine/src/flutter/lib/web_ui/lib/src/engine.dart index 7b5f7299458fa..ca2b3f8f2c1b9 100644 --- a/engine/src/flutter/lib/web_ui/lib/src/engine.dart +++ b/engine/src/flutter/lib/web_ui/lib/src/engine.dart @@ -62,6 +62,7 @@ export 'engine/frame_service.dart'; export 'engine/frame_timing_recorder.dart'; export 'engine/html_image_element_codec.dart'; export 'engine/image_decoder.dart'; +export 'engine/image_decoding_manager.dart'; export 'engine/image_downscaler.dart'; export 'engine/image_format_detector.dart'; export 'engine/initialization.dart'; diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart index cf26270e9c336..db0a71d8e7a1f 100644 --- a/engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart +++ b/engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart @@ -692,8 +692,7 @@ class ImageElementImageSource extends ImageSource { @override void _doClose() { - // There's no way to immediately close the <img> element. Just let the - // browser garbage collect it. + imageElement.src = ''; } @override 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 8c63b04b3918e..57d7e5fb495d3 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 @@ -8,6 +8,40 @@ import 'package:ui/src/engine.dart'; import 'package:ui/ui.dart' as ui; import 'package:ui/ui_web/src/ui_web.dart' as ui_web; +/// The lifecycle status of an [HtmlImageElementCodec]. +enum _HtmlCodecStatus { + /// The codec has been created but has not yet started loading. + initial, + + /// The codec is waiting for the browser to load the image metadata (width/height). + loadingMetadata, + + /// The codec has loaded metadata and is now waiting for an available slot in + /// the [ImageDecodingManager] to begin the heavy decoding process. + waitingForSlot, + + /// The codec has been granted a slot and is currently executing the + /// [HTMLImageElement.decode] operation. + decoding, + + /// The image has been successfully loaded and decoded. + success, + + /// An error occurred during the loading or decoding process. + failed, + + /// The codec has been disposed and should no longer be used. + disposed, +} + +/// Exception thrown when a codec is disposed while it is still decoding. +class _HtmlCodecDisposedException implements Exception { + const _HtmlCodecDisposedException(); + + @override + String toString() => 'HtmlCodec was disposed.'; +} + abstract class HtmlImageElementCodec implements ui.Codec { HtmlImageElementCodec(this.src, {this.chunkCallback, this.debugSource}); @@ -28,44 +62,151 @@ abstract class HtmlImageElementCodec implements ui.Codec { /// been loaded and decoded. Future<void>? decodeFuture; - Future<void> decode() async { - if (decodeFuture != null) { - return decodeFuture; + ImageDecodingRequest? _decodingRequest; + _HtmlCodecStatus _status = _HtmlCodecStatus.initial; + Completer<void>? _loadCompleter; + + /// Whether a [ui.Image] has been created and returned by [getNextFrame]. + /// + /// This is used during [dispose] to determine if it is safe to clear the + /// `src` attribute of [imgElement]. If the image has been handed out, the + /// [ui.Image] might still be using the element for rendering, and clearing + /// the `src` could disrupt the browser's internal image state. + bool _imageHandedOut = false; + + Future<void> decode() { + decodeFuture ??= _performDecode(); + return decodeFuture!; + } + + void _checkDisposed() { + if (_status == _HtmlCodecStatus.disposed) { + throw const _HtmlCodecDisposedException(); + } + } + + Future<void> _performDecode() async { + try { + _checkDisposed(); + await _waitForMetadata(); + await _executeThrottledDecode(); + + _status = _HtmlCodecStatus.success; + chunkCallback?.call(100, 100); + } on _HtmlCodecDisposedException { + _status = _HtmlCodecStatus.disposed; + } on ImageDecodingCancelledException { + _status = _HtmlCodecStatus.disposed; + } catch (e) { + _status = _HtmlCodecStatus.failed; + if (!_imageHandedOut) { + imgElement?.src = ''; + } + rethrow; + } finally { + _cleanupDecodingSlot(); } - final completer = Completer<void>(); - decodeFuture = completer.future; + } + + Future<void> _waitForMetadata() async { + _status = _HtmlCodecStatus.loadingMetadata; // Currently there is no way to watch decode progress, so // we add 0/100 , 100/100 progress callbacks to enable loading progress // builders to create UI. chunkCallback?.call(0, 100); + imgElement = createDomHTMLImageElement(); + + // The 'anonymous' cross-origin setting is required for CanvasKit-based + // rendering. Without it, the browser would "taint" the image when it's + // drawn to a canvas, preventing us from reading the pixels back or + // converting it into a texture. imgElement!.crossOrigin = 'anonymous'; - imgElement! - ..decoding = 'async' - ..src = src; - - // Ignoring the returned future on purpose because we're communicating - // through the `completer`. - unawaited( - imgElement! - .decode() - .then((dynamic _) { - chunkCallback?.call(100, 100); - completer.complete(); - }) - .catchError((dynamic e) { - completer.completeError(e.toString()); - }), - ); - return completer.future; + + // We set decoding to 'async' to hint to the browser that it should perform + // image decompression off the main thread. This helps prevent jank + // during the loading process. + imgElement!.decoding = 'async'; + + _loadCompleter = Completer<void>(); + + // We use a local listener to ensure we can properly remove it in the + // finally block. This prevents potential memory leaks or multiple + // resolutions of the completer. + final DomEventListener loadListener = createDomEventListener((DomEvent event) { + _loadCompleter?.complete(); + }); + final DomEventListener errorListener = createDomEventListener((DomEvent event) { + _loadCompleter?.completeError(ImageCodecException('Failed to load image: $src')); + }); + + imgElement!.addEventListener('load', loadListener); + imgElement!.addEventListener('error', errorListener); + + // Setting the src attribute triggers the browser's image loading process. + imgElement!.src = src; + + try { + await _loadCompleter!.future; + } finally { + // It's critical to remove the listeners to avoid leaks, as the + // HTMLImageElement might persist if it's cached by the browser or + // referenced elsewhere. + imgElement!.removeEventListener('load', loadListener); + imgElement!.removeEventListener('error', errorListener); + _loadCompleter = null; + } + _checkDisposed(); + } + + Future<void> _executeThrottledDecode() async { + _status = _HtmlCodecStatus.waitingForSlot; + final int width = imgElement!.naturalWidth.toInt(); + final int height = imgElement!.naturalHeight.toInt(); + + _decodingRequest = ImageDecodingManager.instance.requestDecodingSlot(width, height); + await _decodingRequest!.future; + _checkDisposed(); + + _status = _HtmlCodecStatus.decoding; + // We use a timeout to prevent the decoder from hanging indefinitely and + // blocking the queue. + try { + await imgElement!.decode().timeout(const Duration(seconds: 30)); + } on TimeoutException { + throw ImageCodecException('Timed out decoding image: $src'); + } catch (e) { + throw ImageCodecException('Failed to decode image: $src. Error: $e'); + } + _checkDisposed(); + } + + void _cleanupDecodingSlot() { + if (_decodingRequest != null) { + ImageDecodingManager.instance.releaseDecodingSlot(_decodingRequest!); + _decodingRequest = null; + } } @override Future<ui.FrameInfo> getNextFrame() async { await decode(); + if (_status == _HtmlCodecStatus.disposed) { + throw StateError('Codec has been disposed'); + } int naturalWidth = imgElement!.naturalWidth.toInt(); int naturalHeight = imgElement!.naturalHeight.toInt(); + // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=700533. + // + // In some versions of Firefox, certain image formats (like SVG or + // very large JPEGs) may report a natural size of 0x0 even after the + // 'load' event has fired if the browser hasn't fully computed the + // intrinsic dimensions. + // + // Since Flutter requires a non-zero size to create a [ui.Image], we fall + // back to a default size (300x300) to allow the image to be processed + // and rendered, albeit potentially at a scaled size. if (naturalWidth == 0 && naturalHeight == 0 && ui_web.browser.browserEngine == ui_web.BrowserEngine.firefox) { @@ -78,6 +219,7 @@ abstract class HtmlImageElementCodec implements ui.Codec { naturalWidth, naturalHeight, ); + _imageHandedOut = true; return SingleFrameInfo(image); } @@ -89,7 +231,24 @@ abstract class HtmlImageElementCodec implements ui.Codec { ); @override - void dispose() {} + void dispose() { + if (_status == _HtmlCodecStatus.disposed) { + return; + } + final _HtmlCodecStatus oldStatus = _status; + _status = _HtmlCodecStatus.disposed; + + if (oldStatus == _HtmlCodecStatus.loadingMetadata) { + _loadCompleter?.completeError(const _HtmlCodecDisposedException()); + } else if (oldStatus == _HtmlCodecStatus.waitingForSlot) { + if (_decodingRequest != null) { + ImageDecodingManager.instance.cancel(_decodingRequest!); + } + } + if (!_imageHandedOut) { + imgElement?.src = ''; + } + } } abstract class HtmlBlobCodec extends HtmlImageElementCodec { @@ -100,6 +259,7 @@ abstract class HtmlBlobCodec extends HtmlImageElementCodec { @override void dispose() { + super.dispose(); domWindow.URL.revokeObjectURL(src); } } diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/image_decoding_manager.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/image_decoding_manager.dart new file mode 100644 index 0000000000000..e2deb11f1946c --- /dev/null +++ b/engine/src/flutter/lib/web_ui/lib/src/engine/image_decoding_manager.dart @@ -0,0 +1,133 @@ +// Copyright 2013 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:async'; +import 'dart:collection'; + +import 'package:meta/meta.dart'; + +/// Manages the concurrency and memory impact of `HTMLImageElement.decode()`. +/// +/// This manager ensures that we don't overwhelm the browser's image subsystem +/// by limiting the number of simultaneous decodes and the cumulative memory +/// footprint of in-flight decodes. +class ImageDecodingManager { + ImageDecodingManager._(); + + /// The shared instance of [ImageDecodingManager]. + static final ImageDecodingManager instance = ImageDecodingManager._(); + + static const int _maxConcurrentDecodes = 8; + static const int _maxConcurrentBytes = 128 * 1024 * 1024; // 128MB + + int _activeDecodesCount = 0; + int _activeDecodesBytes = 0; + + final ListQueue<ImageDecodingRequest> _pendingRequests = ListQueue<ImageDecodingRequest>(); + + /// Requests a slot for decoding an image with the given [width] and [height]. + /// + /// Returns an [ImageDecodingRequest] that will complete when a slot is + /// available. + ImageDecodingRequest requestDecodingSlot(int width, int height) { + final int estimatedBytes = width * height * 4; + final completer = Completer<void>(); + final request = ImageDecodingRequest._(estimatedBytes, completer); + _pendingRequests.add(request); + _runNext(); + return request; + } + + /// Releases a decoding slot previously obtained via [requestDecodingSlot]. + void releaseDecodingSlot(ImageDecodingRequest request) { + if (!request._granted) { + _pendingRequests.remove(request); + return; + } + request._granted = false; + _activeDecodesCount--; + _activeDecodesBytes -= request._estimatedBytes; + _runNext(); + } + + /// Cancels a pending decoding request. + void cancel(ImageDecodingRequest request) { + if (_pendingRequests.remove(request)) { + request._completer.completeError(const ImageDecodingCancelledException()); + } + } + + @visibleForTesting + int get debugActiveDecodesCount => _activeDecodesCount; + + @visibleForTesting + int get debugActiveDecodesBytes => _activeDecodesBytes; + + @visibleForTesting + void debugReset() { + _activeDecodesCount = 0; + _activeDecodesBytes = 0; + _pendingRequests.clear(); + } + + void _runNext() { + // We attempt to process as many pending requests as possible given our + // current resource availability. + while (_pendingRequests.isNotEmpty) { + final ImageDecodingRequest request = _pendingRequests.first; + + // We use a "Greedy First" rule to determine if the next request in the + // FIFO queue can proceed. + var canProceed = false; + + // If there are no other decodes currently in flight, we ALWAYS allow the + // first item in the queue to proceed. This is critical to prevent + // deadlocks where a single extremely large image (e.g., > 128MB) would + // otherwise be permanently blocked by the memory limit. + if (_activeDecodesCount == 0) { + canProceed = true; + } else if (_activeDecodesCount < _maxConcurrentDecodes && + _activeDecodesBytes + request._estimatedBytes <= _maxConcurrentBytes) { + // If we have active decodes, we only proceed if we are under BOTH the + // concurrency limit and the cumulative memory footprint limit. + canProceed = true; + } + + if (canProceed) { + // The request has been granted a slot. We remove it from the queue, + // update our accounting of active resources, and notify the requester. + _pendingRequests.removeFirst(); + request._granted = true; + _activeDecodesCount++; + _activeDecodesBytes += request._estimatedBytes; + request._completer.complete(); + } else { + // Since we are enforcing a strict FIFO order, if the first item in the + // queue cannot proceed due to resource limits, we must stop and wait + // for an active decode to complete and release its slot. + break; + } + } + } +} + +/// A request for a decoding slot from [ImageDecodingManag ... [truncated]