Enabling Mixed Content in Blazor Apps on Android: A Step-by-Step Guide

In modern web development, serving content over HTTPS is a best practice to ensure security and privacy. However, there are scenarios where you might need to load resources over HTTP, especially when dealing with legacy systems or third-party content. In this blog post, we will explore how to enable mixed content in a Blazor app running on an Android emulator, allowing you to display both HTTP and HTTPS images.

Problem Statement

When you attempt to load an HTTP image in a Blazor app on Android, you may encounter a "failed image load" error due to the default security settings that block mixed content. This is a common issue when trying to integrate resources from both HTTP and HTTPS sources.

Solution Overview

To resolve this issue, we need to make two key changes:

1. Configure the WebView to allow mixed content.
2. Update the Android manifest to permit cleartext (non-HTTPS) traffic.

Step 1: Modify the BlazorWebView Configuration

First, we need to register an event handler for the BlazorWebViewInitialized event in the MainPage.xaml file. This will allow us to configure the WebView settings when it is initialized.

Update MainPage.xaml

Add the BlazorWebViewInitialized attribute to the <BlazorWebView> tag:

<BlazorWebView HostPage="wwwroot/index.html" BlazorWebViewInitialized="Bwv_BlazorWebViewInitialized">
</BlazorWebView>

Implement the Event Handler in MainPage.xaml.cs

Next, we will implement the Bwv_BlazorWebViewInitialized method in the code-behind file to set the mixed content mode:

private void Bwv_BlazorWebViewInitialized(object sender, Microsoft.AspNetCore.Components.WebView.BlazorWebViewInitializedEventArgs e)
{
#if ANDROID
    e.WebView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
#endif
}

This code snippet ensures that the WebView allows mixed content, which is essential for loading HTTP resources alongside HTTPS ones.

Step 2: Update the Android Manifest

The next step is to modify the Android manifest file to allow cleartext traffic. This is done by setting the android:usesCleartextTraffic attribute to true.

Update AndroidManifest.xml

Locate the <application> tag in Platforms\Android\AndroidManifest.xml and add the android:usesCleartextTraffic attribute:

<application android:allowBackup="true" 
             android:icon="@mipmap/appicon" 
             android:roundIcon="@mipmap/appicon_round" 
             android:supportsRtl="true" 
             android:usesCleartextTraffic="true">
</application>

This change permits the app to load HTTP resources, addressing the mixed content issue.

Step 3: Test the Implementation

Now that we have made the necessary changes, it’s time to test the implementation. In one of your .razor files (e.g., Counter.razor), add the following <img> tags:

<img width="100" height="100" src="http://some-url.com/image" />
<img width="100" height="100" src="https://some-url.com/image" />

When you run the app in the Android emulator, both images should load successfully, demonstrating that the mixed content configuration is working as intended.

Conclusion

By following the steps outlined in this blog post, you can enable mixed content in your Blazor app running on Android. This allows you to load resources from both HTTP and HTTPS sources, which can be particularly useful in scenarios where you need to integrate legacy content. Always remember to consider the security implications of allowing mixed content and use it judiciously.

Feel free to reach out if you have any questions or if you encounter any issues while implementing this solution!