Continuously updated…

preface

In the daily development process, it is the second time that I have encountered the problem of not displaying pictures on huawei mobile phones when browsing pictures on the WebView built in APP. There is no such problem on WAP terminal. I still remember that when I first encountered this problem, I discussed the bug of not displaying pictures with the mobile developers, and finally pointed to the WebView loading problem after eliminating the style, image factors and JS interference. Then the mobile developers pointed out that the WebView mode caused the problem after consulting the WebView document. As a professional screw manufacturer, it is necessary to sum up the problems and let everyone step on the pit

The pattern of the WebView

  • Android@version < v5.0, the default mode is MIXED_CONTENT_ALWAYS_ALLOW, that is, always allow the WebView to load Https and Http at the same time;
  • Android@version >= v5.0, default MIXED_CONTENT_NEVER_ALLOW mode, that is, WebView is always not allowed to load Https and Http at the same time.

Security is always an issue for developers, who are supposed to guard every detail and every piece of data. Starting from Android 5.0, WebView defaults to MIXED_CONTENT_NEVER_ALLOW mode, which no longer supports loading Https and Http mode at the same time. To ensure network data security, HTTPS is recommended by default. If the model needs to be modified, you can modify the configuration by yourself. However, in some models such as Huawei P30, it is not a foolproof solution for WebView to use mixed HTTP and HTTPS, and it should be better to keep only HTTP or HTTPS in the specification.

MIXED_CONTENT_NEVER_ALLOW

This mode requires the WebView to load resources using HTTPS. WebView does not allow a secure site (HTTPS) to load non-secure site content (HTTP), for example, an image of an HTTPS web page content is an HTTP link. It is highly recommended that apps use this mode as it is more secure.

MIXED_CONTENT_ALWAYS_ALLOW

It is unsafe to allow HTTP resources to be loaded in an HTTPS environment. In this mode, WebView can load unsecured site content (Http) in a secure site (Https). This is the least secure operation mode of WebView. Do not use this mode if possible.

MIXED_CONTENT_COMPATIBILITY_MODE

Allows HTTPS environment compatible blocking to load HTTP resources, which is secure. In this mode, the WebView tries to be compatible with the latest Web browser styles when it comes to hybrid content. Some insecure content (Http) can be loaded onto a secure site (Https), while other types of content will be blocked. Whether these types of content are allowed to load or blocked may change from version to version and is not clearly defined. This mode is mainly used when you cannot control the rendering of content in your App, but you want to run it in a safe environment.

Actual combat scene

Images loaded in the WebView environment of huawei P30 App are not displayed

  • The test environment
    • Running terminal: WebView environment built in APP
    • Phone model: Huawei P30
    • OS: Android 9.0

There are several attempts to solve this problem:

  • Use mixed mode without modifying originally loaded resourcesMIXED_CONTENT_COMPATIBILITY_MODEAttempting to load a resource
/* App enables WebView hybrid mode to try to solve the problem of not displaying pictures */
webSetting.setBlockNetworkImage(false); // Do not block network images
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  // Allow mixing (HTTP, HTTPS)
  //webSetting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
  webSetting.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}
Copy the code

After setting up the mix mode, I had a wave of tests. I thought I got it all right. At last, cheng Xiaojin said that some pictures were not enough, so they could not be displayed (; д) .

Ah no, it’s because some pictures don’t show up without a security certificate. ヾ(O · ω ·) Blue

Suddenly look back, found in this HTTPS security environment is a lot of problems ah, some models load HTTP resources without security certificate or do not let display. There is a safety certificate to protect peace! Hybrid mode is not a panacea!

Back to the problem, when a certificate error occurs when a WebView loads a web page, the onReceivedSslError method of the WebViewClient class is called. In this method, you can click on the source code to see that there are two main methods that SslErrorHandler can call:

  • Cancel () : Stops loading the problem page
  • Proceed () : Ignore the SSL certificate error and continue to load the page

If certificate security is not considered, you can ignore the error as follows:

WebView.setWebViewClient(new WebViewClient() {
  @Override
  public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
  handler.proceed();// Accept certificates for all websites}});Copy the code

Then for images that are not displayed, you can only have the background manually change the link to the corresponding HTTPS or something.

MIXED_CONTENT_ALWAYS_ALLOW mode parameters are not found in the X5 kernel WebView, so you need to manually determine whether X5 is used and set the value:

MIXED_CONTENT_NEVER_ALLOW = 0;
MIXED_CONTENT_ALWAYS_ALLOW = 1;
MIXED_CONTENT_COMPATIBILITY_MODE = 2;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  // Mix mode
  webSetting.setMixedContentMode(2);
}
Copy the code

So far, I’m cautious about hybrid mode and don’t recommend it unless you have to.

As a specification, either all HTTP resources are used or all HTTPS resources are used.

  • Finally, HTTPS is recommended for all resources
  • For lazy me (~ ▽ ~), I prefer this format to write://www.xxx.com/

Reference documentation

  • MDN-Mixed content

  • Google developer WebSettings Docs

  • P30 pictures from Huawei do not show talk about WebView resource loading mode