HTTPS 証明書なしで Web ページを読み込むときに、Android および iOS デバイスで Flutter プロジェクトの WebView が表示できない問題の解決策

1. 問題の説明

Flutter プロジェクトは、Google の公式 Webview ライブラリ webview_flutter を使用します。自己署名証明書、無効な証明書、証明書なしなどの HTTPS Web アドレスを読み込むと、Android または PC ブラウザで証明書が無効であることを示すプロンプトが表示され、空白になります。 Web ページの自己署名証明書をロードするには、iOS 上の WebView コントロールの HTTPS 証明書検証をバイパスする必要があります。

2. 環境

Android Studio バージョン: 2022.1.1 パッチ 2

フラッターバージョン: 3.7.12

Dart SDK バージョン: 2.19.6 

依存ライブラリ webview_flutter バージョン: 4.2.0

Xcodeバージョン：14.3

3. Flutter での iOS デバイスでの HTTPS 証明書検証の解決策

1. webview_flutter リポジトリの依存関係を追加します

pubspec.yaml ファイルで dev_dependency を見つけて、依存ライブラリを追加する行を変更し、実行コマンド [flutter pub get] を追加して、ライブラリをダウンロードします。

dev_dependencies:

  webview_flutter: ^4.2.0

ダウンロードが完了すると、プロジェクト構造の外部ライブラリで、webview_flutter が合計 3 つのプロジェクト、つまり webview_flutter-4.2.0、webview_flutter_android-3.7.0、および webview_flutter_wkwebview-3.4.3 をダウンロードしたことがわかります。そのうち webview_flutter_wkwebview-3.4 .3 は iOS デバイスです。プロジェクト上の Webview コンポーネント。後で変更する必要があるソース コードはこのプロジェクトです。

2. ソースコードを変更する

Flutter プロジェクトのディレクトリ構造で外部ライブラリを見つけ、Flutter Plugins を順番に展開します—>webview_flutter_wkwebview-3.4.3—>ios.Classes

次に、ios.Classes ディレクトリで FWFNavigationDelegateHostApi.m ファイルを見つけてファイルを開き、@implementation FWFNavigationDelegate コードの後の新しい行に次のメソッドを追加します。

@implementation FWFNavigationDelegate

//复制添加这个方法
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential * _Nullable))completionHandler{
    
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        SecTrustRef serverTrust = challenge.protectionSpace.serverTrust;
        // 在这里进行自定义的身份验证逻辑
        NSURLCredential *credential = [NSURLCredential credentialForTrust:serverTrust];
        completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    } else {
        completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }

    
}

その後、保存して再度実行します。

注: この変更方法はローカルの webview_flutter ライブラリのソース コードのみを変更するため、他の人のプロジェクトに適用する場合は、webview_flutter_wkwebview-3.4.3 ライブラリを GitHub または Gitee ウェアハウスにエクスポートしてアップロードしてから、渡す必要があります。 pubspec.yaml ファイル 元の webview_flutter ライブラリのソース コードをカバーする依存ライブラリを追加することによってのみ、他の人のプロジェクトに正しく適用できます。エクスポート方法: ライブラリをクリックして右クリックし、[Open in——>Finder] を見つけて開きます。

3. オリジナルのライブラリをカバーする

具体的なプロセスは次のとおりです。

pubspec.yaml ファイルで、dependency_overrides: ノードを見つけて、その下に次のコンテンツをラップします。

dependency_overrides:
  #注意这里不要顶格，格式务必确认正确，url地址为你自己修改过的源码库地址，
  webview_flutter_wkwebview:
    git:
      url: https://gitee.com/user/webview_flutter_wkwebview-3.4.3.git

次に、プロジェクトのルート ディレクトリで [flutter pub get] コマンドを実行します。ソース コードが配置されているウェアハウスのユーザー名とパスワードを入力するように求められます。ダウンロードが完了すると、ソース コード ライブラリの名前が表示されます。独自の倉庫名に変更されました。

4. Xcode ネイティブ エンジニアリングが iOS デバイス上の HTTPS 証明書検証ソリューションを解決します

1. WKWebview ライブラリをインポートする

Xcode プロジェクトで、一般インターフェイスを見つけ、その下のインターフェイスで [フレームワーク、ライブラリ、および埋め込みコンテンツ] を見つけ、右側のプラス記号 ➕ ボタンをクリックし、ポップアップ検索インターフェイスで WebKit を検索して選択します検索された WebKit.framework ライブラリを選択し、下の [追加] ボタンをクリックすると、WKWebview 依存ライブラリが追加されます。

 2. コードを追加する

#import "ViewController.h"
#import <WebKit/WebKit.h>

//1、这里添加WKNavigationDelegate接口，为了实现WKWebView的证书校验方法
@interface ViewController () <WKNavigationDelegate>
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //添加webview组件
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    CGRect frame = CGRectMake(0, 170, 400, 800);
    WKWebView *webView = [[WKWebView alloc] initWithFrame:frame configuration:configuration];
    [self.view addSubview:webView];


    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    //开始加载网页地址
    [webView loadRequest:request];
    
    //2、将当前类与WKNavigationDelegate接口监听进行绑定
    webView.navigationDelegate = self;
   
}

//3、重写didReceiveAuthenticationChallenge方法
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential * _Nullable))completionHandler{
    //在该方法当中添加如下代码，
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        SecTrustRef serverTrust = challenge.protectionSpace.serverTrust;
        NSURLCredential *credential = [NSURLCredential credentialForTrust:serverTrust];
        completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    } else {
        completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }

}

@end

コードは 3 つのステップに分かれており、追加すると、HTTPS Web ページの証明書検証の問題を回避できます。

5. Android デバイスでの HTTPS 証明書検証ソリューション

1. network_security_config.xml ファイルを作成します

Android StudioのFlutterプロジェクト配下のAndroidプロジェクトを開き、プロジェクトのメインモジュールであるappディレクトリにあるapp->src->main->resディレクトリの順に開き、その中に作成します。 directory.file xml を作成し、xml ディレクトリに network_security_config.xml ファイルを作成します。ファイルの内容は次のとおりです。

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

2. network_security_config.xml ファイルを参照します。

AndroidManifest.xml ファイルで、アプリケーション ノードを見つけて、android:networkSecurityConfig 属性を追加します。

<application
        android:networkSecurityConfig="@xml/network_security_config"
>

上記は、Android デバイスで HTTPS 証明書の検証をバイパスするためのソリューションです。