问题原因
项目部署服务器的Https为私有SSL证书,目前确认不会提供共有SSL证书,导致WebView访问网页空白问题
官方设计WebView插件时,为了考虑安全性在访问https链接时,必须要求SSL证书有效,不支持自定义SSL错误的处理
解决方式
有三种处理方式:
- 使用flutter_inappwebview插件代替,它能做很多事件,包括管理SSL错误和SSL客户端证书请求的事件
- 使用flutter_webview_plugin插件,最新版本支持SSL证书的错误处理
- 本地修改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
总结
遇到问题多阅读源码、查询相关资料,解析问题本质。了解熟知市面上常用处理方式,针对多种方案进行分析,列出各方案优缺点,根据实际情况综合考虑决策,给出最优方案
参考文章