关于Flutter的webview无法访问私有SSL证书链接的问题

发布时间 2023-09-09 16:11:52作者: CrossPython

问题原因

项目部署服务器的Https为私有SSL证书,目前确认不会提供共有SSL证书,导致WebView访问网页空白问题
官方设计WebView插件时,为了考虑安全性在访问https链接时,必须要求SSL证书有效,不支持自定义SSL错误的处理

解决方式

有三种处理方式:

  1. 使用flutter_inappwebview插件代替,它能做很多事件,包括管理SSL错误和SSL客户端证书请求的事件
  2. 使用flutter_webview_plugin插件,最新版本支持SSL证书的错误处理
  3. 本地修改flutter插件原生代码,兼容ssl证书错误的处理,代码如下
目录:android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebViewClient.java

@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
  handler.proceed();
}

修改后的代码:

import android.net.http.SslError;
import android.webkit.SslErrorHandler;

private WebViewClient internalCreateWebViewClient() {
    return new WebViewClient() {
      @TargetApi(Build.VERSION_CODES.N)
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        return FlutterWebViewClient.this.shouldOverrideUrlLoading(view, request);
      }

      @Override
      public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();
        }

      @Override
      public void onPageFinished(WebView view, String url) {
        FlutterWebViewClient.this.onPageFinished(view, url);
      }
    };
  }

  

决策

考虑到前2个为非官方插件,且各自有300+issue未解决,最近半年没有update,存在较大使用风险。而阅读官方源码发现,Flutter插件通过调用原生webview代码来实现,因此我们只需要在Android的FlutterWebViewClient代码中新增SSL证书兼容的处理即可,只需调整插件的引入地址,不用调整任何代码。最终决定采用本地修改插件的方式来实现

实现

checkout官方源码,根据上述代码修复SSL兼容问题后,托管到github平台,修改原插件的引入地址改为:https://github.com/Fitem/webview_flutter.git,解决问题


  # webView使用本地插件,忽略ssl证书
  webview_flutter:
    git:
      url: https://github.com/Fitem/webview_flutter.git

  

总结

遇到问题多阅读源码、查询相关资料,解析问题本质。了解熟知市面上常用处理方式,针对多种方案进行分析,列出各方案优缺点,根据实际情况综合考虑决策,给出最优方案

参考文章

  1. SSL error prevents website login in flutter
  2. Is a SSL certificate still needed in a Flutter webview?
  3. https://www.jianshu.com/p/d3eceba20477