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

[michaelheider]

🐛 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

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

Sample

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

# 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]

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]

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

[michaelheider]

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]

Reopen without the Docker overhead as #986.