A Proper-Looking Solution to Flutter WebView Unable to Access HTTP Pages

The Exploration Process

Starting from Android 9 (I think?), Google by default no longer lets developers access insecure HTTP content. If you really need to use HTTP, you must configure cleartextTrafficPermitted in networkSecurityConfig. Google's intention behind this design is good—we all know HTTPS is more secure—but sometimes you don't get to choose whether the backend API is HTTP or HTTPS, for example when using a third-party service that doesn't provide HTTPS, or in the case of this article: accessing pages without HTTPS in an embedded WebView~

In a normal Android app, embedding a WebView and configuring cleartextTrafficPermitted is enough to access HTTP content. But Flutter's official WebView component is a bit of a trap—after you configure cleartextTrafficPermitted in the Android project inside your Flutter project, it doesn't work...

Every time it hits an HTTP page, it throws this error. Super annoying.

I looked into this problem for a long time and couldn't find a good solution. I saw that someone had filed issues with the Flutter team, but they still hadn't been resolved, so I had to force a solution myself...

My idea: when encountering an HTTP URL, convert it to HTTPS and access that instead. But this only works for sites that have both HTTP and HTTPS; if a site only has HTTP, you're out of luck~

The Forced Implementation

The implementation code is very simple. First, use the WebView's onWebViewCreated event to get a WebViewController instance, then in the onPageFinished page-load-complete event, check whether the current page URL starts with http; if so, replace it with HTTPS and reload~

Because loading an HTTP page results in a white screen on iOS and an error message on Android, to improve the user experience we can add a loading dialog in the onPageStarted event.

The result looks like this:

The relevant code is as follows:

WebView(
  initialUrl: _url,
  allowsInlineMediaPlayback: true,
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) => _webViewController = controller,
  onProgress: (value) => print('page progress: $value'),
  onPageStarted: (url) {
    print('onPageStarted: $url');
    if (url.contains('http://')) {
      _httpFlag = true;
      showLoading(context);
    }
  },
  onPageFinished: (value) {
    print('onPageFinished: $value');
    if (value.contains('http://')) {
      setState(() {
        _url = value.replaceAll('http://', 'https://');
      });
      _webViewController.loadUrl(_url);
    }
    if (value.contains('https://') && _httpFlag) {
      _httpFlag = false;
      Navigator.of(context).pop();
    }
  },
),

A pretty dumb solution. As you can see from the demo, the improvement to user experience is actually quite limited. It's treating the symptom, not the root cause. To really solve this, we still have to rely on the official team~

The Real Solution

After all that talk, the real solution still depends on Flutter officially filling the hole. The good news is that in the latest Flutter 2, the Flutter team has successfully filled it. Now we only need to configure usesCleartextTraffic and network_security_config in AndroidManifest.xml!

The specific steps: create the file /android/app/src/main/res/xml/network_security_config.xml in your Flutter project, and fill in the config:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
    </base-config>
</network-security-config>

Then modify /android/app/src/main/AndroidManifest.xml, and add the following two attributes to the application node:

android:usesCleartextTraffic="true"
android:networkSecurityConfig="@xml/network_security_config"

After that, your project structure should look something like this

Then run flutter clean in the console, run again, and you'll see that the WebView in the app can open HTTP sites normally. Nice~

References

• How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter: https://stackoverflow.com/questions/55592392/how-to-fix-neterr-cleartext-not-permitted-in-flutter
• Using WebView in Flutter: https://zhuanlan.zhihu.com/p/77083307

Come Chat

Programming Lab focuses on exploring popular new internet technologies and team agile development practices. Reply with linux, flutter, c#, netcore, android, kotlin, java, python, and so on in the backend of the WeChat official account "Programming Lab" to get related technical articles and materials. If you have any questions, you can also leave a message in the official account backend~

• Cnblogs: https://www.cnblogs.com/deali/
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy