Different behavior with and without `--wasm`

[Marc-Andrieu]

Hello,

Some context first.
I'm trying to enable compilation to WebAssembly for the web version of a Flutter app so that it loads faster.
So, as stated it Migrate to package:web, I essentially replaced dart:html with package:web, which is used only once in the app: to open a small login window, and the Dart code listens to events and closes the small window as soon as our back-end responded successfully.
The app compiles, it loads faster.

The strange thing:

• When using flutter run ... without a --wasm flag, the behavior is the same as before (i.e.: it works)
• When using flutter run ... with a --wasm flag, the window opened with window.open(...) has a weird closing behavior:
  • the .closed boolean becomes true half a second after opening the small window
  • the .close() method doesn't do anything at all (and it is being called for sure)

It may be related to the renderer as I run the app locally in a Chrome; thus:

• before using package:web, only canvaskit was used (wasm compilation obviously failed),
• according to Web renderers, without --wasm the default mode can only use canvaskit,
• and with --wasm (the only one of the 3 cases where the window doesn't close), it uses skwasm since Chrome supports it.

Feel free to redirect this issue to somewhere else (perhaps that's a dart:js_interop issue, or a skwasm issue), Migrate to package:web recommended filing an issue here.

[Marc-Andrieu]

Perhaps some code would be nice, here is the interesting part:

Details

...
import 'package:web/web.dart' as web;
...

    try {
      if (kIsWeb) {
        web.Window? popupWin;
        popupWin = web.window.open(
          authUrl,
          "Hyperion",
          "width=800, height=900, scrollbars=yes",
        );

        final completer = Completer();
        void checkWindowClosed() {
          print("A: ${popupWin?.closed}");
          if (popupWin != null && popupWin!.closed == true) {
            completer.complete();
          } else {
            Future.delayed(
              const Duration(milliseconds: 100),
              checkWindowClosed,
            );
          }
        }

        checkWindowClosed();
        completer.future.then((_) {
          state.maybeWhen(
            loading: () {
              state = AsyncValue.data({tokenKey: "", refreshTokenKey: ""});
            },
            orElse: () {},
          );
        });

        void login(String data) async {
          final receivedUri = Uri.parse(data);
          final token = receivedUri.queryParameters["code"];
          if (popupWin != null) {
            print("B: ${popupWin?.closed}");
            popupWin!.close();
            popupWin = null;
          }
          try {
            if (token != null && token.isNotEmpty) {
              final resp = await openIdRepository.getToken(
                token,
                clientId,
                redirectURL.toString(),
                codeVerifier,
                "authorization_code",
              );
              final accessToken = resp[tokenKey]!;
              final refreshToken = resp[refreshTokenKey]!;
              await _secureStorage.write(key: tokenName, value: refreshToken);
              state = AsyncValue.data({
                tokenKey: accessToken,
                refreshTokenKey: refreshToken,
              });
            } else {
              throw Exception('Wrong credentials');
            }
          } on TimeoutException catch (_) {
            throw Exception('No response from server');
          } catch (e) {
            rethrow;
          }
        }

        web.window.onMessage.listen((event) {
          if (event.data.toString().contains('code=')) {
            login(event.data.toString());
          }
        });
      } else {
        ...

In the case it doesn't work, the logs in the browser console are these:

A: false
A: false
A: false
A: true

So .close() was never called (no B log), and the .closed boolean magically went to false even though the small window to write credentials is still here.

[ykmnkmi]

If event.data is string use (event.data as JSString).toDart.contains('code='). Look at this changelog entry, maybe related.

Edit: The linked changelog is relevant.

[Marc-Andrieu]

It doesn't change anything (adding the dart:js_interop import) to have

          if ((event.data as JSString).toDart.contains('code=')) {
            login((event.data as JSString).toDart);

[Marc-Andrieu]

Note: I'm using the version 1.1.1 (the last released one), and I'm assuming a difference in the behavior of the browser APIs of dart:html and package:web is a bug.

[kevmoo]

@srujzs ?

[Marc-Andrieu]

Possibly related fact: in the popup window, the global JS window.opener is null only if the app is built/run with --wasm, which, in my setup, is equivalent to using skwasm... (so it's not possible to use JS window.opener.postMessage)
If it's built/run without --wasm i.e. in the classical canvaskit, the app works fine.
When rendering with skwasm, if I manually send the event in the parent window (that spawned the "popup") using the browser console, I can also get logged in the app (without modification to the code & commit aforementioned).

I'm really starting to believe it's a skwasm issue. Is there smth that can be done / I can do about it?
It is the same thing as above with the .closed becoming true after half a second: it's like skwasm can't keep track of the browser windows it spawns.

[ykmnkmi]

@Marc-Andrieu about my hint: if the event data is a string, cast it first to JSString and use toDart:

final data = (event.data as JSString).toDart;
if (data.contains('code=')) {
  login(data);
}

This enables better optimizations than calling toString() on untyped values. JSString cast here can be omitted by high level optimization.

About issue, from MDN:

If the Cross-Origin-Opener-Policy HTTP header is being used, and the document policies are such that the document is opened in a new browsing context group, references to the opened window are severed and the returned object will indicate that the opened window is closed (closed is true).

[Marc-Andrieu]

@ykmnkmi Thank you very much, especially for the final MDN quote, it has been an astonishingly fruitful hint for me.
The page you link about the COOP header led me to the window.crossOriginIsolated boolean: it's false if my app is rendered with canvaskit (no matter if it was built/run with package:web or dart:html) and true when rendering with skwasm.

Also, the “Cross-Origin-Opener-Policy” rang a bell: I read this word previously in Support and WebAssembly. And indeed I managed to have my app work completely: still using package:web (I didn't anything in the Dart code), built in wasm and served with Nginx where, crucially, I edited the config to add the two header (and missing mime types).

So it turns out there's no issue related to package:web, nothing wrong on your side, you may close this as completed.
The real issue is that the embedded server that flutter run ... --wasm runs for local development does not serve the files with these two headers and thus the Chrome debug window has window.crossOriginIsolated set to true, unlike without --wasm.