WebView

iOS と Mac Catalyst でアプリケーション トランスポート セキュリティを構成する

バージョン 9 以降、iOS ではセキュリティで保護されたサーバーとの通信のみがアプリに許可されます。 アプリは、セキュリティで保護されていないサーバーとの通信を有効にすることを選択する必要があります。

次の Info.plist 構成は、特定のドメインを有効にして Apple Transport Security (ATS) 要件をバイパスする方法を示しています。

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSExceptionDomains</key>
		<dict>
			<key>mydomain.com</key>
			<dict>
				<key>NSIncludesSubdomains</key>
				<true/>
				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
				<true/>
				<key>NSTemporaryExceptionMinimumTLSVersion</key>
				<string>TLSv1.1</string>
			</dict>
		</dict>
	</dict>

ATS をバイパスするには、特定のドメインのみを有効にすることをお勧めします。それにより、信頼されていないドメインのセキュリティを強化しながら、信頼済みサイトを使用できます。

次の Info.plist 構成は、アプリの ATS を無効にする方法を示しています。

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

Android でのアクセス許可の処理

カメラやマイクなど、デバイスの録音ハードウェアへのアクセスを要求するページを参照する場合は、WebView コントロールによってアクセス許可が付与されている必要があります。 WebView コントロールでは、Android 上の Android.Webkit.WebChromeClient 型を使用してアクセス許可要求に対応します。 ただし、.NET MAUI によって提供される WebChromeClient 実装では、アクセス許可要求は無視されます。 MauiWebChromeClient から継承してアクセス許可要求を承認する新しい型を作成する必要があります。

Web ページから WebView コントロールへのアクセス許可要求は、.NET MAUI アプリからユーザーへのアクセス許可要求とは異なります。 .NET MAUI アプリのアクセス許可は、アプリ全体に対してユーザーによって要求され、承認されます。 WebView コントロールは、ハードウェアにアクセスするアプリの機能に依存します。 この概念を説明するために、デバイスのカメラへのアクセスを要求する Web ページを検討します。 その要求が WebView コントロールによって承認されているにもかかわらず、.NET MAUI アプリがユーザーによるカメラへのアクセスの承認を得ていなかった場合、Web ページはカメラにアクセスできません。

次の手順では、カメラを使用するために WebView コントロールからのアクセス許可要求をインターセプトする方法を示します。 マイクを使用する場合は、カメラ関連のアクセス許可ではなくマイク関連のアクセス許可を使用すること以外は、手順は似ています。

1. まず、必要なアプリのアクセス許可を Android マニフェストに追加します。 Platforms/Android/AndroidManifest.xml ファイルを開き、manifest ノードに以下を追加します。

   <uses-permission android:name="android.permission.CAMERA" />
   

2. WebView コントロールを含むページが読み込まれる場合など、アプリのある時点で、カメラへのアプリのアクセスを許可するアクセス許可をユーザーに要求します。

   private async Task RequestCameraPermission()
   {
       PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>();
   
       if (status != PermissionStatus.Granted)
           await Permissions.RequestAsync<Permissions.Camera>();
   }
   

3. Platforms/Android フォルダーに次のクラスを追加し、プロジェクトの名前空間に合わせてルート名前空間を変更します。

   using Android.Webkit;
   using Microsoft.Maui.Handlers;
   using Microsoft.Maui.Platform;
   
   namespace MauiAppWebViewHandlers.Platforms.Android;
   
   internal class MyWebChromeClient: MauiWebChromeClient
   {
       public MyWebChromeClient(IWebViewHandler handler) : base(handler)
       {
   
       }
   
       public override void OnPermissionRequest(PermissionRequest request)
       {
           // Process each request
           foreach (var resource in request.GetResources())
           {
               // Check if the web page is requesting permission to the camera
               if (resource.Equals(PermissionRequest.ResourceVideoCapture, StringComparison.OrdinalIgnoreCase))
               {
                   // Get the status of the .NET MAUI app's access to the camera
                   PermissionStatus status = Permissions.CheckStatusAsync<Permissions.Camera>().Result;
   
                   // Deny the web page's request if the app's access to the camera is not "Granted"
                   if (status != PermissionStatus.Granted)
                       request.Deny();
                   else
                       request.Grant(request.GetResources());
   
                   return;
               }
           }
   
           base.OnPermissionRequest(request);
       }
   }
   

   前のスニペットでは、MyWebChromeClient クラスは MauiWebChromeClient から継承し、OnPermissionRequest メソッドをオーバーライドして Web ページのアクセス許可要求をインターセプトします。 各アクセス許可の項目は、カメラを表す PermissionRequest.ResourceVideoCapture 文字列定数と一致するかどうかを確認するためにチェックされます。 カメラのアクセス許可が一致した場合、アプリがカメラを使用するアクセス許可を持っているかどうかをコードが確認します。 アクセス許可がある場合は、Web ページの要求が付与されます。

4. Chrome クライアントを MyWebChromeClient に設定するには、Android の WebView コントロールの SetWebChromeClient メソッドを使用します。 次の 2 つの項目は、Chrome クライアントを設定する方法を示しています。

   • theWebViewControl という .NET MAUI WebView コントロールを指定すると、Android コントロールであるプラットフォーム ビューで Chrome クライアントを直接設定できます。

     ((IWebViewHandler)theWebViewControl.Handler).PlatformView.SetWebChromeClient(new MyWebChromeClient((IWebViewHandler)theWebViewControl.Handler));
     

   • また、ハンドラー プロパティ マッピングを使用して、すべての WebView コントロールに Chrome クライアントの使用を強制することもできます。 詳細については、「イベント ハンドラー」を参照してください。

     次のスニペットの CustomizeWebViewHandler メソッドは、MauiProgram.CreateMauiApp メソッド内など、アプリの起動時に呼び出す必要があります。

     private static void CustomizeWebViewHandler()
     {
     #if ANDROID26_0_OR_GREATER
         Microsoft.Maui.Handlers.WebViewHandler.Mapper.ModifyMapping(
             nameof(Android.Webkit.WebView.WebChromeClient),
             (handler, view, args) => handler.PlatformView.SetWebChromeClient(new MyWebChromeClient(handler)));
     #endif
     }
     

iOS および Mac Catalyst でネイティブ WebView を構成する

ネイティブ WebView コントロールは、WKWebView から派生した iOS と Mac Catalyst の MauiWKWebView です。 MauiWKWebView コンストラクターのオーバーロードの 1 つを使用すると WKWebViewConfiguration オブジェクトを指定できます。これにより、WKWebView オブジェクトの構成方法に関する情報が提供されます。 一般的な構成には、ユーザー エージェントの設定、Web コンテンツで Cookie を使用できるようにする指定、Web コンテンツへのカスタム スクリプトの挿入などがあります。

アプリに WKWebViewConfiguration オブジェクトを作成し、そのプロパティを必要に応じて構成できます。 または、静的 MauiWKWebView.CreateConfiguration メソッドを呼び出して .NET MAUI の WKWebViewConfiguration オブジェクトを取得し、それを変更することもできます。 その後、WKWebViewConfiguration オブジェクトを MauiWKWebView コンストラクター オーバーロードの引数として指定できます。

ハンドラーのプラットフォーム ビューが作成されると、iOS や Mac Catalyst ではネイティブ WebView の構成を変更できないため、カスタム ハンドラー ファクトリ デリゲートを作成して変更する必要があります。

#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...

#if IOS || MACCATALYST
    Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
    {
        WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();
        config.ApplicationNameForUserAgent = "MyProduct/1.0.0";
        return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
    };
#endif

iOS および Mac Catalyst でメディアの再生設定を設定する

iOS と Mac Catalyst の WebView では、自動再生やピクチャ イン ピクチャを含む HTML5 ビデオのインライン メディア再生が既定で有効になっています。 この既定値を変更したり、他のメディア再生設定を設定したりするには、ハンドラーのプラットフォーム ビューを作成した後でメディア再生の基本設定を変更できないため、カスタム ハンドラー ファクトリ デリゲートを作成する必要があります。 次のコードは、これを行う例を示しています。

#if IOS || MACCATALYST
using WebKit;
using CoreGraphics;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Handlers;
#endif
...

#if IOS || MACCATALYST
    Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
    {
        WKWebViewConfiguration config = MauiWKWebView.CreateConfiguration();

        // True to play HTML5 videos inliine, false to use the native full-screen controller.
        config.AllowsInlineMediaPlayback = false;

        // True to play videos over AirPlay, otherwise false.
        config.AllowsAirPlayForMediaPlayback = false;

        // True to let HTML5 videos play Picture in Picture.
        config.AllowsPictureInPictureMediaPlayback = false;

        // Media types that require a user gesture to begin playing.
        config.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.All;

        return new MauiWKWebView(CGRect.Empty, (WebViewHandler)handler, config);
    };
#endif

iOS での WebView の構成の詳細については、「 iOS および Mac Catalyst でネイティブ WebView を構成する」をご覧ください。

Mac Catalyst で WebView を検査する

Safari 開発者ツールを使用して Mac Catalyst 上の WebView のコンテンツを検査するには、アプリに次のコードを追加します。

#if MACCATALYST
        Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
        {
            if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 6))
                handler.PlatformView.Inspectable = true;
        });
#endif

このコードでは、Mac Catalyst 上の WebViewHandler のプロパティ マッパーをカスタマイズして、WebView コンテンツを Safari 開発者ツールで検査できるようにします。 ハンドラーの詳細については、「ハンドラー」をご覧ください。

Mac Catalyst アプリで Safari 開発者ツールを使用するには、次の手順で行います。

1. Mac で Safari を開きます。
2. Safari で、[Safari] > [環境設定] > [詳細] > [メニュー バーに開発メニューを表示] チェックボックスを選択します。
3. .NET MAUI Mac Catalyst アプリを実行します。
4. Safari で、[開発] > [{デバイス名}] メニューを選択します。ここで、{Device name} プレースホルダーは Macbook Pro などのデバイス名です。 次に、アプリ名の下にあるエントリを選択します。これにより、実行中のアプリも強調表示されます。 その結果、[Web インスペクタ] ウィンドウが表示されます。