Webview, load local file url and additional files

Vega Open Beta Q&A
1

Hi,

I try to load a local file URL stored on the device into a WebView. The entry point would be called content.html. The first step of accessing and loading the content.html file is working. But I reference another file in the content.html, which cannot be loaded by the WebView.

Here is what I have done so far:

  1. Followed the “Develop with WebView” guide to implement a WebView
  2. I’m able to load and show the app from an external source / web page
  3. I copied our app into the folder “assets/raw/localUiBackup”
  4. Set “allowFileAccess” to true (while it’s not needed as per documentation)
  5. Use the local file via “file:///pkg/assets/raw/localUiBackup/content.html”
  6. Checked if files are present in “build/private/vega/armv7/Debug/assets/raw”. They are present

Log:

 (NOBRIDGE) LOG  onLoadStart url:  file:///pkg/assets/raw/localUiBackup/content.html
 (NOBRIDGE) LOG  onError url:  file:///pkg/assets/raw/localUiBackup/config/build.info.json
 (NOBRIDGE) LOG  onLoad url:  file:///pkg/assets/raw/localUiBackup/content.html

WebView config:

<WebView
      style={styles.webview}
      ref={webRef}
      hasTVPreferredFocus={true}
      allowSystemKeyEvents={true}
      source={{ uri: sourceUri }}
      javaScriptEnabled={true}
      mixedContentMode={"always"}
      allowFileAccess={true}
      domStorageEnabled={true}
      onLoadStart={(event) => {
        console.log("onLoadStart url: ", event.nativeEvent.url);
      }}
      onLoad={(event) => {
        console.log("onLoad url: ", event.nativeEvent.url);
      }}
      onError={(event) => {
        console.log("onError url: ", event.nativeEvent.url);
      }}
    />

Currently I don’t know what the issue could be.

Edit: Missed to say, I’m using @amazon-devices/webview version 3.3.0

3

Hello @Tobias

Please allow me some time to look into this issue and update you.
In the meantime, kindly share the app name / ASIN as well.

Warm regards,
Ivy

4

The app doesn’t exist yet. Therefore there is no registered app in my Amazon console. No app name and ASIN were created at the developer console yet.

5

Hi @Tobias

Please note the team is investigating this issue.

Regards,

SJ

6

Hey @Tobias

Can you please clarify how you are loading “build.info.json” , is it through ajax call or any other specific way?

Warm regards,
Ivy

7

Hey,
we are using XMLHttpRequest to request resources. Also for some local configuration ressources. The issue might be related to CORS. I didn’t get the logging running. Therefore I’m not able to confirm, if the issue is related to CORS issue.
I found an older post from me also, where it was confirmed, that it’s a known issue to be fixed in the future.

Old issue (maybe also current issue):

  • Access to XMLHttpRequest at ‘file:///pkg/assets/config/build.info.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, https, chrome-untrusted.
8

Thanks for sharing @Tobias , we are looking into this.

Warm regards,
Ivy

11

Hi,

Thank you for your question. Loading local files from other local files in WebView (i.e., a local HTML file referencing other local assets like JS, CSS, images) is a known gap in the current Vega WebView implementation.

Current status:

  • Loading a single local file via file:// in WebView works.
  • However, cross-origin access between local files (one file:// URL loading another file:// resource) is restricted due to CORS policies. This means a locally bundled webapp that references multiple local files will fail to load those resources.

Workarounds:

  1. Bundle everything into a single HTML file - inline your CSS and JS directly into the HTML file rather than referencing separate local files.
  2. Serve local files via a local HTTP server - run a lightweight HTTP server within your app (e.g., using a React Native module) and load your content via http://localhost:PORT/ instead of file://. This avoids the CORS restriction entirely.
  3. Use React Native screens for non-web content - if only part of your app requires WebView, keep the local-file-dependent parts in React Native and use WebView only for remote URLs.

Note on DRM: If your use case also involves DRM-protected content playback from local files, that is not supported in WebView (CDM access is restricted from insecure origins including file://). The recommended approach for DRM is to use a React Native player (like Shaka Player) outside the WebView.

This is being tracked internally for a future resolution. We’ll update when there’s more clarity on timeline.

Warm Regards,
Ivy