App Crashes with SecurityError if served from Docker and accessed via web

michaelheider commented 1 month ago

🐛 Bug Report

The below minimal sample looks fine. It does work when serving with flutter run or a local Python web server. But when served from a Docker container, the app crashes and the browser console spams errors.

Expected behavior

Image displayed. No crash.

Reproduction steps

Serve the minimal sample app from a docker container. a. build: docker build . -t bug b. run: docker run -p 8080:8080 bug
Access with a web browser at localhost:8080.
App crashes. Browser console spams errors.

Sample

`main.dart`

```dart import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/widgets.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return CachedNetworkImage( imageUrl: 'https://fastly.picsum.photos/id/505/40/40.jpg?hmac=egB4BZLkmlPCkk32_xTVvQg2I8QZH2w369evjD3Q1Pk', ); } } ```

`Dockerfile`

```Dockerfile # Stage 1: build FROM debian:12-slim AS build # install build dependencies RUN apt-get -y update && \ apt-get -y install --no-install-recommends ca-certificates curl git \ lib32stdc++6 libgconf-2-4 libglu1-mesa libstdc++6 python3 unzip xz-utils zip && \ apt-get -y clean && \ rm -rf /var/lib/apt/lists/* # install Flutter ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}" RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter && \ flutter doctor -v && \ flutter channel master && \ flutter upgrade && \ flutter config --enable-web && \ flutter precache --web # build app WORKDIR /app/ COPY . . RUN flutter build web --release EXPOSE 8080 CMD ["python3", "-m", "http.server", "8080", "--directory", "./build/web/"] ```

Logs

First, a whole bunch of these:

main.dart.js:3193 Uncaught Error: SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

Then, a whole bunch of these:

main.dart.js:3193 Uncaught Error: RuntimeError: memory access out of bounds
    at canvaskit.wasm:0xd89f
    at canvaskit.wasm:0x83f5
    at canvaskit.wasm:0x44a9e5
    at canvaskit.wasm:0x723cd
    at Tb.<anonymous> (canvaskit.js:116:52)
    at Tb.<anonymous> (canvaskit.js:156:256)
    at new PictureRecorder (canvaskit.js:105:189)
    at cS.iG (main.dart.js:11501:13)
    at xJ.$0 (main.dart.js:11178:7)
    at Object.Oa (main.dart.js:1109:17)

The complete stack traces are very long and unreadable. See an export here: browser-console.log

Depending on the surrounding app, the errors are also different, but go into a similar direction.

Uncaught : Null check operator used on a null value in here browser-console_2.log.

I have also seen something along the lines of (reciting from memory) Function Argument Missmatch Error, but cannot reproduce that case at the moment.

Configuration

Version: 3.4.1

Platform: web

ThomasDevApps commented 1 month ago

Recently I have also encountered this error :

SecurityError: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.

michaelheider commented 1 month ago

May (or may not) be related to #981?

michaelheider commented 2 weeks ago

The error is in the setup. The Dockerfile uses the master channel, while the dev machine uses stable.

The bug does happen also on the beta channel (locally and within docker, as expected).

michaelheider commented 2 weeks ago

Reopen without the Docker overhead as #986.

Baseflow / flutter_cached_network_image