External page not rendering in an iframe in a mobile app html component

App Building
,
1

Hi

Im trying to show an external web page in an iframe in an HTML component in a mobile app. The page is not loaded and the following exception in shown in the console:

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
    at t.ScopedLocalStorage.getItem (chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:28330)
    at i.getChainId (chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:46875)
    at new w (chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:33992)
    at new i (chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:407923)
    at t.RequestProvider.provide (chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:406743)
    at chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:490281
    at chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:490903
    at chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:490907
    at chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/requestProvider.js:2:490911

According to this issue, enabling "Storage and cookies" setting under interaction for an iframe component. I tested with a desktop app, and can confirms the problem occurs without enabling this setting and is fixed by enabling this setting.

However, in a mobile app, there is no iframe component. And there is no such setting for the HTML component.

Anyone else have experienced the same thing? And resolved it? Or have any tips or tricks on how to work around it?

2

After investigating further, the exception does not seem to have anything with the iframe to do. I get it, even if there is no iframe in the HTML.

I do suspect it has something to do with rendering. I created a simple "Hello, world" HTML, then a button which changed the content to "Hi" when clicked. This is the code:

html1.html = "Hi";
console.log(html1.html);

The HTML component does not re-render the new text, but the console logs the updated HTML.

So when loading an external page through the iframe, the HTML component does not re-render the new content, I presume.

Does anyone experienced something similar? And know a workaround for it?

3

Hey, if you're still looking into this, thought I'd drop some thoughts in case it helps you or others get closer to resolution:

  1. Setting properties imperatively (html1.html = ‘foo’) doesn’t work in Retool, you’ll need to wire up the HTML component to a State variable if you want to be able to update its HTML content from elsewhere in your app.
  2. You can use localStorage.values to read localStorage values. Since JS configured in your Retool app is executed in a sandbox, there are security limitations meaning that some APIs don't work in that environment.
  3. That localStorage error looks like it’s coming from a browser extension?