[webview_flutter_web][MIME] Incorrect parsing mime type

[SERDUN]

Hello, I encountered a problem with the display of the page, since the page was not displayed as text/html, but rather as text/plain.

After spending time on reproduction and searching for the problem, I came to the conclusion that the parsing of the header is not quite correct.

In the implementation:

module:  webview_flutter_web
class: web_webview_controller.dart
method:  loadRequest(LoadRequestParams params)

There is a tape for getting a mime

 final String contentType =
       httpReq.getResponseHeader('content-type') ?? 'text/html';

But according to the specification https://www.rfc-editor.org/rfc/rfc2854#section-4 we can also have a charset.

After we get the contentType we pass it as an argument to Uri.dataFromString without any parsing.

  final String contentType =
        httpReq.getResponseHeader('content-type') ?? 'text/html';
        
  _webWebViewParams.iFrame.src = Uri.dataFromString(
       httpReq.responseText ?? '',
       mimeType: contentType,
       encoding: utf8,
     ).toString();

As a result, if I try to render the page https://flutter.dev it will not be displayed correctly because my mime contentType="text/html; charset=utf-8".
contentType should be just "text/html"

As a solution:

    final String contentType = httpReq.getResponseHeader('content-type') ?? 'text/html';
     // ignore: unsafe_html
     _webWebViewParams.iFrame.src = Uri.dataFromString(
       httpReq.responseText ?? '',
       mimeType: contentType.split(';')
       encoding: utf8,
     ).toString();

But probably also need to use charset instead of ignoring it

[darshankawar]

Thanks for the detailed analysis @SERDUN
Can you provide us a minimal code sample that helps to highlight this issue ?

[SERDUN]

Thanks for the detailed analysis @SERDUN Can you provide us a minimal code sample that helps to highlight this issue ?

Hello, If you try to run the webview_flutter_web example, you can already see the problem.

[darshankawar]

Sorry but I don't see the same after running the plugin example. Also, the index.html file looks different from what you posted above.

https://github.com/flutter/plugins/blob/main/packages/webview_flutter/webview_flutter_web/example/web/index.html

[SERDUN]

Sorry but I don't see the same after running the plugin example. Also, the index.html file looks different from what you posted above.

https://github.com/flutter/plugins/blob/main/packages/webview_flutter/webview_flutter_web/example/web/index.html

Hello, after running the plugin example do you see rendered web page from the URL "https://flutter.dev"?

Yes, different because https://github.com/flutter/plugins/blob/main/packages/webview_flutter/webview_flutter_web/example/web/index.html it's the folder for configuring web platform which contains canvas where flutter runs and then in runtime when flutter builds tree elements we use the plugin webview_flutter for the visualization web page which we set.

  final PlatformWebViewController _controller = PlatformWebViewController(
    const PlatformWebViewControllerCreationParams(),
  )..loadRequest(
      LoadRequestParams(
        uri: Uri.parse('https://flutter.dev'),
      ),
    );

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
        actions: <Widget>[
          _SampleMenu(_controller),
        ],
      ),
      body: PlatformWebViewWidget(
        PlatformWebViewWidgetCreationParams(controller: _controller),
      ).build(context),
    );
  }
}

Therefore PlatformWebViewWidget showing html as in my previous screenshot, you can see there toolbar from flutter app. n order to make sure that this is exactly an example from
https://github.com/flutter/plugins/blob/main/packages/webview_flutter/webview_flutter_web

About running example.

If you run example in localhost most likely you will see white screen, becouse browser(chrome) block all request from localhost by CORS policy.

To run the example from localhost I use https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino for testing.

After preparing example, we can launch it.

And as i wrote early i see raw html becouse content type not corect (See logs in console on screenshot)

I modified WebWebViewController for showing logs.

    final String contentType =
        httpReq.getResponseHeader('content-type') ?? 'text/html';

    print("Content type: $contentType");

How fix it.

As example by parsing contentType.
After this we can see correct html (See logs in console on screenshot)

    final String contentType =
        httpReq.getResponseHeader('content-type') ?? 'text/html';

    print("Content type: $contentType");

    final String modifiedContentType = contentType
        .split(';')
        .first;

    print("modifiedContentType: $modifiedContentType");


    // ignore: unsafe_html
    _webWebViewParams.iFrame.src = Uri.dataFromString(
      httpReq.responseText ?? '',
      mimeType: modifiedContentType,
      encoding: utf8,
    ).toString();
  }
}

[darshankawar]

Thanks for the update.

[ditman]

We've found a separate issue regarding "load contents" that might be breaking stuff that we can fix at the same time as this. Here: juicycleff/flutter-unity-view-widget#738 (comment)

The plan is to not do the AJAX request if the method is "get" and there's no additional headers being passed (as in @SERDUN's example), and instead just set the SRC of the iframe and let the browser do whatever it needs to do. There would not be any encoding problems in that case, because the iframe would take care of everything in that case.

[ifjorissen]

@ditman thanks for taking a look, do you know when the flutter folks might land this fix?

[ditman]

@ifjorissen I don't have a specific timeline other than "soon"; I need to take a look at another issue related with the web implementation of the webview: #118573

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.