[IOS][WEBVIEW] Unable to run an iframe in a webview #22833

Laodhy · 2024-06-04T16:36:57Z

Description

Hello,

The aim of my application is to be able, in offline mode, to open an html archive downloaded earlier in an html wrapper consisting of an iframe, or else in online mode to simply display a URL in the webview (no problem with the the online mode).

So, for offline mode, I have an html file defined in MauiAsset, consisting of an iframe in which I'm going to replace the source with the path to my local file

All this works perfectly on Android, and also on iOS simulator.
On a physical iPhone, however, it's impossible. All I get is a blank screen.

Here the HTML Wrapper asset :

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
          content="width=device-width" />
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
        }

        .center {
            margin: auto;
            width: 50%;
            border: 3px solid green;
            padding: 10px;
            float: right;
        }
    </style>

</head>

<body>
    <script type="text/javascript"> 
         [SOME JAVASCRIPT]
</script>

    <iframe name="mosplayer"
            scrolling="no"
            frameborder="0"
            src="{2}" <!-- I replaced the src by the path of my local file : file://[PATH]-->
            style="width:100%;height:100%;"></iframe>

</body>

</html>

Here's the XAML code :

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodels="clr-namespace:Mos.ScormComponents.MAUI.Controls.ViewModels"
             x:Name="this"
             x:Class="Mos.ScormComponents.MAUI.Controls.ScormWebviewControl">
    <WebView x:Name="myWebView" Navigating="myWebView_Navigating">
    </WebView>
    
</ContentView>

Here's the C# code

private const string BRIDGE_NAME = "jsbridge";

public static readonly BindableProperty SourceUrlProperty = BindableProperty.Create(
      nameof(SourceUrl),
      typeof(string),
      typeof(ScormWebviewControl), defaultValue: null, propertyChanged: OnSourceUrlPropertyChanged);

public string SourceUrl
{
   get => (string)GetValue(SourceUrlProperty);
   set => SetValue(SourceUrlProperty, value);
}

public static readonly BindableProperty TrackingDatasProperty = BindableProperty.Create(
      nameof(TrackingDatas),
      typeof(IList<TrackingData>),
      typeof(ScormWebviewControl), defaultValue: new List<TrackingData>(), propertyChanged: OnTrackingDatasPropertyChanged);

public IReadOnlyCollection<TrackingData> TrackingDatas
{
   get => (IReadOnlyCollection<TrackingData>)GetValue(TrackingDatasProperty);
   set => SetValue(TrackingDatasProperty, value);
}

public static readonly BindableProperty IsTerminatedCommandProperty = BindableProperty.Create(
      nameof(IsTerminatedCommand),
      typeof(ICommand),
      typeof(ScormWebviewControl));

public ICommand IsTerminatedCommand
{
   get => (ICommand)GetValue(IsTerminatedCommandProperty);
   set => SetValue(IsTerminatedCommandProperty, value);
}


  private bool _isLocalFile = false;
  private bool _isFinishing = false;

  internal readonly ScormBusinessLogic scormBusinessLogic;

public ScormWebviewControl()
  {
      InitializeComponent();
      scormBusinessLogic = new();

  }

  protected override void OnHandlerChanged()
  {
      base.OnHandlerChanged();

#if ANDROID
      Android.Webkit.WebView androidWebview = myWebView.Handler.PlatformView as Android.Webkit.WebView;
      androidWebview.Settings.JavaScriptEnabled = true;
      androidWebview.Settings.AllowFileAccess = true;
      androidWebview.Settings.AllowFileAccessFromFileURLs = true;
      androidWebview.Settings.AllowUniversalAccessFromFileURLs = true;
      androidWebview.ClearCache(true);

#elif MACCATALYST || IOS
      if (myWebView.Handler.PlatformView is WebKit.WKWebView wkWebView)
      {
          wkWebView.Configuration.Preferences.SetValueForKey(Foundation.NSObject.FromObject(true), (Foundation.NSString)"allowFileAccessFromFileURLs");
          wkWebView.Configuration.DefaultWebpagePreferences.AllowsContentJavaScript = true;
          wkWebView.Configuration.Preferences.JavaScriptEnabled = true;
          wkWebView.Configuration.Preferences.JavaScriptCanOpenWindowsAutomatically = true;
      }

#endif


  }

  bool _isTrackingDatasSet = false;
  bool _isSourceSet = false;
  private static async void OnSourceUrlPropertyChanged(BindableObject bindable, object oldValue, object newValue)
  {
      var strValue = newValue?.ToString() ?? string.Empty;

      var control = bindable as ScormWebviewControl;
      control._isSourceSet = strValue != string.Empty;

      if (control._isSourceSet && control._isTrackingDatasSet)
          await control.SetSourceAsync();

  }

  private static async void OnTrackingDatasPropertyChanged(BindableObject bindable, object oldValue, object newValue)
  {
      var control = bindable as ScormWebviewControl;
      control._isTrackingDatasSet = newValue != null;

      if (control._isSourceSet && control._isTrackingDatasSet)
          await control.SetSourceAsync();
  }

  private async Task SetSourceAsync()
  {
      _isLocalFile = IsLocalPath(SourceUrl); //Determine if we should 

      if (_isLocalFile)
      {
          await GetOfflineSourceAsync(SourceUrl);
      }
      else
      {
          myWebView.Source = SourceUrl;
      }
  }

  private async Task GetOfflineSourceAsync(string folderPath)
  {
      if (!Directory.Exists(folderPath))
          throw new DirectoryNotFoundException();

      myWebView.Source = new HtmlWebViewSource()
      {
          BaseUrl = folderPath,
          Html = await scormBusinessLogic.GetHtmlContentAsync(folderPath, TrackingDatas) // Get the html formatted content
      };


  }

My iPhone console displays this error message:
WebPageProxy::didFailProvisionalLoadForFrame: frameID=25, isMainFrame=0, domain=<private>, code=-1100, isMainFrame=0

So I decided to test only the iFrame's operation by having it display any web page, and I got exactly the same error
Even with :

    <iframe name="mosplayer"
            scrolling="no"
            frameborder="0"
            src="http://www.google.com"
            style="width:100%;height:100%;"></iframe>

And if I set the source of my webview directly on www.google.com, it works.

Here my info.plist file :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>UIDeviceFamily</key>
	<array>
		<integer>1</integer>
		<integer>2</integer>
	</array>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>arm64</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>XSAppIconAssets</key>
	<string>Assets.xcassets/appicon.appiconset</string>
	<key>UILaunchStoryboardName</key>
	<string>MauiSplash</string>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>google.com</key>
			<dict>
					<key>NSExceptionAllowsInsecureHTTPLoads</key>
					<true/>
					<key>NSExceptionRequiresForwardSecrecy</key>
					<false/>
			</dict>
		</dict>
	</dict>
</dict>
</plist>

And how I get the html formatted content :

 internal class ScormBusinessLogic
 {
     private const string LOCAL_HTML_FILE = "Assets/HtmlWrapper.html";
     private const string IMS_MANIFEST_FILE_NAME = "imsmanifest.xml";

     private readonly ScormBeanFactory scormBeanFactory;
     private readonly ScoJsParamsFactory scoJsParamsFactory;
     public ScormBusinessLogic() {
         scormBeanFactory = new();
         scoJsParamsFactory = new();
     }

     public async Task<string> GetHtmlContentAsync(string folderScormPath, IReadOnlyCollection<TrackingData> trackingDatas)
     {

         var imsManifestFilepath = Path.Combine(folderScormPath, IMS_MANIFEST_FILE_NAME);  //Irrelevant for the issue
         var dataDictionnary = XmlUtils.DeserializeXmlToDictionnary(imsManifestFilepath);  //Irrelevant for the issue

         string htmlContent = await FileUtils.ReadAssetFile(LOCAL_HTML_FILE); //Read the MauiAssetFile

         var bean = scormBeanFactory.CreateModel(dataDictionnary, folderScormPath); //Irrelevant for the issue
         var jsparams = scoJsParamsFactory.CreateModel(bean, trackingDatas ?? new List<TrackingData>());  //Irrelevant for the issue

         var htmlContentFormatted = htmlContent.Replace("{0}", bean.ScoId)
             .Replace("'{1}'", jsparams.ToJavascriptObject())
             .Replace("{2}", $"file://{bean.IndexFile}"); //bean.IndexFile = the path on the device of the downloaded file


         Console.WriteLine(htmlContentFormatted);
         return htmlContentFormatted;
     }

I'm completely lost and I don't really understand what's going on, I have no other idea but to come and post here.

Steps to Reproduce

1 - Create a new MAUI App
2- Create a MauiAsset which consist of an html file with an iframe
3-Set the iframe src to www.google.com
4-Create a WebView in your XAML Page which load the MauiAsset as source
5- Run your iOS application

Link to public reproduction project repository

No response

Version with bug

8.0.21 SR4.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15 and more

Did you find any workaround?

No

Relevant log output

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2024-06-04T16:37:27Z

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Webview on iOS and Android does not allow local HTML to load additional resources (#20613), similarity score: 0.78

Closed similar issues:

maui blazor ios iframe (#12012), similarity score: 0.78
Maui iOS failing to load local resources in using WebView Source (#10674), similarity score: 0.77
iFrame Automatically Opens Source in New Window at Initialization (iOS Blazor WebView) (#5784), similarity score: 0.75
[iOs] MAUI Blazor Hybrid '//' urls not treated as secure (#19297), similarity score: 0.74

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

Laodhy · 2024-06-13T07:03:56Z

Could someone help me or give me some direction? I'm really stuck.

Zhanglirong-Winnie · 2024-06-19T06:40:25Z

Verified this issue with Visual Studio 17.11.0 Preview 2.0 (8.0.21). Can repro on iOS platform.

Laodhy added the t/bug Something isn't working label Jun 4, 2024

jsuarezruiz added platform/iOS 🍎 area-controls-webview WebView labels Jun 7, 2024

Zhanglirong-Winnie added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jun 19, 2024

samhouts removed s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jul 3, 2024

github-actions bot mentioned this issue Jul 4, 2024

[MacCatalyst] IFrame to external URL opens in external browser, despite mitigation strategies [Blazor Hybrid] #23429

Open

samhouts added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jul 10, 2024

github-actions bot mentioned this issue Jul 24, 2024

MAUI 8.0 webview not loading youtube video in iOS #23792

Closed

jsuarezruiz added this to the Backlog milestone Oct 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[IOS][WEBVIEW] Unable to run an iframe in a webview #22833

[IOS][WEBVIEW] Unable to run an iframe in a webview #22833

Laodhy commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jun 4, 2024

Laodhy commented Jun 13, 2024

Zhanglirong-Winnie commented Jun 19, 2024

[IOS][WEBVIEW] Unable to run an iframe in a webview #22833

[IOS][WEBVIEW] Unable to run an iframe in a webview #22833

Comments

Laodhy commented Jun 4, 2024 • edited Loading

Description

Steps to Reproduce

Link to public reproduction project repository

Version with bug

Is this a regression from previous behavior?

Last version that worked well

Affected platforms

Affected platform versions

Did you find any workaround?

Relevant log output

github-actions bot commented Jun 4, 2024

Open similar issues:

Closed similar issues:

Laodhy commented Jun 13, 2024

Zhanglirong-Winnie commented Jun 19, 2024

Laodhy commented Jun 4, 2024 •

edited

Loading