WebView

Configurar a Segurança do Transporte do Aplicativo no iOS e no Mac Catalyst

Da versão 9 em diante, o iOS só permitirá que seu aplicativo se comunique com servidores seguros. Um aplicativo precisa optar por habilitar a comunicação com servidores não seguros.

A seguinte configuração de Info.plist mostra como habilitar um domínio específico para ignorar os requisitos de ATS (Segurança de Transporte da Apple):

	<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>

É uma prática recomendada habilitar apenas domínios específicos para ignorar o ATS, permitindo que você use sites confiáveis enquanto se beneficia de segurança adicional em domínios não confiáveis.

A seguinte configuração de Info.plist mostra como desabilitar o ATS para um aplicativo:

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

Manipular permissões no Android

Ao navegar até uma página que solicita acesso ao hardware de gravação do dispositivo, como a câmera ou o microfone, a permissão precisa ser concedida pelo controle WebView. O controle WebView usa o tipo Android.Webkit.WebChromeClient no Android para reagir às solicitações de permissão. No entanto, a implementação WebChromeClient fornecida pelo .NET MAUI ignora solicitações de permissão. Você precisa criar um tipo que herde de MauiWebChromeClient e aprove as solicitações de permissão.

As solicitações de permissão de uma página da Web para o controle WebView são diferentes das solicitações de permissão do aplicativo .NET MAUI para o usuário. As permissões de aplicativo do .NET MAUI são solicitadas e aprovadas pelo usuário para todo o aplicativo. O controle WebView depende da capacidade dos aplicativos de acessar o hardware. Para ilustrar esse conceito, considere uma página da Web que solicita acesso à câmera do dispositivo. Mesmo que essa solicitação seja aprovada pelo controle WebView, ainda que o aplicativo do .NET MAUI não tenha aprovação do usuário para acessar a câmera, a página da Web não seria capaz de acessar a câmera.

As etapas a seguir demonstram como interceptar solicitações de permissão do controle WebView para usar a câmera. Se você estiver tentando usar o microfone, as etapas serão semelhantes, exceto que você usaria permissões relacionadas ao microfone em vez de permissões relacionadas à câmera.

1. Primeiro, adicione as permissões de aplicativo necessárias ao manifesto do Android. Abra o arquivo Platforms/Android/AndroidManifest.xml e adicione o seguinte no nó manifest:

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

2. Em algum ponto do aplicativo, como quando a página que contém um controle WebView é carregada, solicite permissão do usuário para permitir que o aplicativo acesse a câmera.

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

3. Adicione a seguinte classe à pasta Platforms/Android, alterando o namespace raiz para corresponder ao namespace do projeto:

   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);
       }
   }
   

   No snippet anterior, a classe MyWebChromeClient herda de MauiWebChromeClient e substitui o método OnPermissionRequest para interceptar solicitações de permissão de página da Web. Cada item de permissão é verificado para ver se ele corresponde à constante de cadeia de caracteres PermissionRequest.ResourceVideoCapture, que representa a câmera. Se uma permissão de câmera for correspondida, o código verificará se o aplicativo tem permissão para usar a câmera. Se ele tiver permissão, a solicitação da página da Web será concedida.

4. Use o método SetWebChromeClient no controle WebView do Android para definir o cliente chrome como MyWebChromeClient. Os dois seguintes itens demonstram como você pode definir o cliente chrome:

   • Considerando um controle WebView do .NET MAUI chamado theWebViewControl, você pode definir o cliente chrome diretamente na exibição da plataforma, que é o controle Android:

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

   • Você também pode usar o mapeamento de propriedades do manipulador para forçar todos os controles WebView a usar o cliente chrome. Para obter mais informações, confira Manipuladores.

     O método CustomizeWebViewHandler do snippet a seguir deve ser chamado quando o aplicativo é iniciado, como no método 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
     }
     

Configurar o WebView nativo no iOS e no Mac Catalyst

O controle nativo WebView é um MauiWKWebView no iOS e no Mac Catalyst, que deriva de WKWebView. Uma das sobrecargas do construtor MauiWKWebView permite que um objeto WKWebViewConfiguration seja especificado, o que fornece informações sobre como configurar o objeto WKWebView. As configurações típicas incluem a configuração do agente do usuário, a especificação de cookies a serem disponibilizados para o conteúdo da Web e a injeção de scripts personalizados no conteúdo da Web.

Você pode criar um objeto WKWebViewConfiguration em seu aplicativo e, em seguida, configurar as propriedades dele conforme necessário. Como alternativa, você pode chamar o método estático MauiWKWebView.CreateConfiguration para recuperar o objeto WKWebViewConfiguration do .NET MAUI e modificá-lo. O objeto WKWebViewConfiguration pode ser então especificado como um argumento para a sobrecarga do construtor MauiWKWebView.

Como a configuração do WebView nativo não pode ser alterada no iOS e no Mac Catalyst depois que a exibição da plataforma do manipulador é criada, você deve criar um delegado de alocador de manipulador personalizado para modificá-lo:

#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

Definir preferências de reprodução de mídia no iOS e no Mac Catalyst

A reprodução de mídia embutida do vídeo HTML5, incluindo reprodução automática e picture in picture, é habilitada por padrão para o WebView no iOS e no Mac Catalyst. Para alterar esse padrão ou definir outras preferências de reprodução de mídia, você deve criar um delegado de alocador de manipulador personalizado, pois as preferências de reprodução de mídia não podem ser alteradas depois que a exibição da plataforma do manipulador é criada. O seguinte código mostra um exemplo de como fazer isso:

#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

Para obter mais informações sobre como configurar um WebView no iOS, confira Configurar o WebView nativo no iOS e no Mac Catalyst.

Inspecionar um WebView no Mac Catalyst

Para usar as ferramentas para desenvolvedores do Safari para inspecionar o conteúdo de um WebView no Mac Catalyst, adicione o seguinte código ao seu aplicativo:

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

Esse código personaliza o mapeador de propriedades para o WebViewHandler no Mac Catalyst, para tornar o conteúdo de WebView inspecionável pelas ferramentas para desenvolvedores do Safari. Para obter mais informações sobre manipuladores, confira Manipuladores.

Para usar ferramentas para desenvolvedores do Safari com um aplicativo Mac Catalyst:

1. Abra o Safari em seu Mac.
2. No Safari, marque a caixa de seleção Safari > Configurações > Avançado > Mostrar menu Desenvolver na barra de menus.
3. Execute o seu aplicativo Mac Catalyst do .NET MAUI.
4. No Safari, selecione o menu Desenvolver > {Nome do dispositivo}, em que o espaço reservado {Device name} é o nome do seu dispositivo, como Macbook Pro. Em seguida, selecione a entrada no nome do aplicativo, que também realçará seu aplicativo em execução. Isso fará com que a janela do inspetor da Web apareça.