Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot load additional resources for HTML page loaded from local on-demand resource

See original GitHub issue

Bug description:

I’m attempting to load a local website which has been downloaded as an on-demand resource bundle. On the native side I load the bundle, then pass the path of the index file back to React Native, which is then used by a RN Webview to load it. The index file loads successfully, but additional resources loaded by that page are being blocked with this error being thrown in the Javascript console: Failed to load resource: The operation couldn’t be completed. Operation not permitted

The current WebView tag looks like this: <WebView javaScriptEnabled={true} webkit={false} source={{ uri: indexURI }} style={{ flex: 1 }} allowFileAccess={true} originWhitelist={['*']} />

The index file I am loading is extremely simple, just the required HTML and body tags and an image tag with ‘./test.png’ as the source

Am I missing a property in the WebView that would allow these assets to be loaded?

Expected behavior: HTML files should be loaded along with all of the resources that it attempts to load

Environment:

OS: iOS
OS version: 12.4.4
react-native version: 0.59.9
react-native-webview version: 8.0.5

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:24 (4 by maintainers)

Top GitHub Comments

10reactions

marconettcommented, Mar 10, 2020

Loading local content with source={ uri: <uri> } does work. It was fixed in #771. You need to set allowingReadAccessToURL={'file://'+<path_to_resource_folder>}.

What’s still a problem, is loading local content if you import a html string into a webview via source={ html: <html_string>, baseUrl: <path_to_resource_folder> }. In this case, setting allowingReadAccessToURL has no effect, as the underlying WKWebView doesn’t support that paramater paired with loading HTML from a string. This problem does not show up on a simulator, or if <path_to_resource_folder> points to the apps bundle folder.

This seems to be a deeper issue with WKWebView itself (https://bugs.webkit.org/show_bug.cgi?id=154916) and I am not sure how this library is supposed to fix this.

But working around the problem can be achieved in a couple of ways:

Loading local content from as local webserver (as @gdmerm described)
Writing the html string to a temp file (for example: fs.writeFile(<path_to_temp_file>, <html>, 'utf8');) and then using source={ uri: <path_to_temp_file> } and allowingReadAccessToURL={<path_to_resource_folder>} (tested this, it works).
Rewriting all local content references to a custom url scheme and writing a iOS native custom url handler (https://bugs.webkit.org/show_bug.cgi?id=154916#c28)
Parsing the HTML in JS and replacing all references to local content with inline alternatives

1reaction

marconettcommented, Mar 25, 2020

you’re still using the local webserver, i can’t help you with that.

otherwise, you already seem to have your html as a file. all you should need to do is get rid of the local webserver and set allowingReadAccessToURL={<path_to_folder_containing_html_file>}.