React-native-windows: Using ms-appdata scheme with WebView causes Operation aborted exception

[juhasuni]

Development environment

react-native-cli: 2.0.1
react-native: 0.50.3
[email protected]
node: v8.9.1
npm: 5.5.1
yarn: 1.3.2

Target Platform: UWP
Target Platform Version(s): 10.0.10586
Target Device(s): Desktop
Development Operating System: Windows (Version 1709, OS Build 16299.98)

Steps to reproduce

Use a WebView component to navigate to any valid URL using ms-appdata URI scheme. Using this scheme with the latest OS Build (16299.98) causes an exception:

{System.Exception: Operation aborted (Exception from HRESULT: 0x80004004 (E_ABORT))
   at Windows.UI.Xaml.Controls.WebView.NavigateWithHttpRequestMessage(HttpRequestMessage requestMessage)
   at ReactNative.Views.Web.ReactWebViewManager.NavigateToSource(WebView view)
   at ReactNative.Views.Web.ReactWebViewManager.OnAfterUpdateTransaction(WebView view)
   at ReactNative.UIManager.ViewManager`2.UpdateProperties(TFrameworkElement viewToUpdate, ReactStylesDiffMap props)
   at ReactNative.UIManager.ViewManager`2.ReactNative.UIManager.IViewManager.UpdateProperties(DependencyObject viewToUpdate, ReactStylesDiffMap props)
   at ReactNative.UIManager.NativeViewHierarchyManager.CreateView(ThemedReactContext themedContext, Int32 tag, String className, ReactStylesDiffMap initialProperties)
   at ReactNative.UIManager.UIViewOperationQueue.<>c__DisplayClass22_0.<EnqueueCreateView>b__0()
   at ReactNative.UIManager.UIViewOperationQueue.<>c__DisplayClass34_1.<DispatchViewUpdates>b__0()
   at ReactNative.UIManager.UIViewOperationQueue.OnRendering(Object sender, FrameEventArgs e)
   at ReactNative.UIManager.UIViewOperationQueue.OnRenderingSafe(Object sender, FrameEventArgs e)}

Example

<WebView
          source={{ uri:" ms-appdata:///local/test/test.html" }}
          scalesPageToFit={false}
          domStorageEnabled={true}
        />

Workaround

The issue seems to be present with the latest OS Build only (16299.98). According to WebView documentation, when navigating to ms-appdata scheme, WebView::Navigate method should be used instead of WebView::NavigateWithHttpRequestMessage. Documentation says that:

To load uncompressed and unencrypted content from your app’s LocalFolder or TemporaryFolder data stores, use the Navigate method with a Uri that uses the ms-appdata scheme.

Suggested fix

My suggestion is to replace NavigateWithHttpRequestMessage method with Navigate method when the source URI begins with ms-appdata. I've also tested that solution and it works.

if (uri.StartsWith("ms-appdata:"))
{
    view.Navigate(request.RequestUri);
} else
{
    view.NavigateWithHttpRequestMessage(request);
}

[rozele]

Can you try using the ms-appx-web: protocol per the documentation on MSDN?

[juhasuni]

No, we need to be able to use ms-appdata scheme, because the content being displayed in the WebView does not come from the bundle. I'd say that this is a common requirement these days, as many apps are downloading HTML content from the web, storing the files to LocalFolder (or similar on other platforms) and showing the contents to the user.

Sometimes it is enough to just inject the HTML content to the WebView, but for example in our case the HTML content has dependencies to other assets in LocalFolder. WebView refuses to load those assets unless it has been navigated to a HTML file that itself is within the LocalFolder.

So if you navigate WebView to:
.../local/downloaded/index.html

It can access other resources within its subfolders, such as:
.../local/downloaded/assets/image.png

[juhasuni]

We decided to go with a local web server, which is better approach in many cases. It also solves this issue for us. Please consider if this is still an active topic for others.

[conjordan]

Hi @juhasuni,

I would like to know where you inserted your suggested fix?

My suggestion is to replace NavigateWithHttpRequestMessage method with Navigate method when the source URI begins with ms-appdata. I've also tested that solution and it works.

Thank you.

[GezimVeliu]

Hi,

tested the solution provided by Juhasuni. It works.

Path of file is:
.../react-native-windows\ReactWindows\ReactNativeViews\Web\ReactWebViewManager.cs
line 311,

change this part of code:

view.NavigateWithHttpRequestMessage(request);
to

if (uri.StartsWith("ms-appdata:"))
{
       view.Navigate(request.RequestUri);
}
else
{
       view.NavigateWithHttpRequestMessage(request);
}

Thank you Juhasuni!

[msftbot[bot]]

We are not investing in new features or lower priority bug fixes on vCurrent. The bulk of investment is now in vNext as we prepare to make that the default choice. If this issue is still relevant on the vNext implementation please open a vNext issue. If this issue is of significant severity for a vCurrent app and vNext is not an option, re-open with justification.