[mini-browser] html show empty

[BigGan]

after I install theia 1.21.0, tested html file and found the mini-browser was empty. Just like this:

How can I solve the problem? or something wrong?

Thx :)

[vince-fugnitto]

@BigGan thank you for the discussion, do you have any additional details to reproduce the issue? Can you confirm if the problem exists when trying master?

I was unable to reproduce:

[BigGan]

Thanks for replying. My information as follow:

• System: Debian 10
• node: v12.20.2
• npm: 6.14.11
• yarn: 1.8.0
• command:

sudo apt update && sudo apt install build-essential && sudo apt-get install -y pkg-config
sudo apt-get install libx11-dev libxkbfile-dev
sudo apt-get install libsecret-1-dev

wget https://github.com/eclipse-theia/theia/archive/refs/tags/v1.21.0.zip \
    && unzip v1.21.0.zip \
    && cd v1.21.0 \
    && yarn \
    && yarn download:plugins \
    && yarn browser build \
    && yarn browser start --hostname 0.0.0.0

[BigGan]

@BigGan thank you for the discussion, do you have any additional details to reproduce the issue? Can you confirm if the problem exists when trying master?

I was unable to reproduce:

can you share your command?

I want to learn how you install the theia? and find where I make a mistake.

[vince-fugnitto]

@BigGan the steps are the same as yours, we are both testing using the example-browser application included in the repo. When I have a .html file opened that outputs some content (like the <h1> tag), clicking the open preview to the side toolbar item will render the content. In your example, how are you rendering the content?

I want to learn how you install the theia?

Can you clarify what you mean here? The browser example you ran is simply an example from the sources of the framework itself (what we use to test and develop features). For downstream applications, they would install build their own products from the framework:

• https://theia-ide.org/docs/composing_applications/

[BigGan]

@BigGan the steps are the same as yours, we are both testing using the example-browser application included in the repo. When I have a .html file opened that outputs some content (like the <h1> tag), clicking the open preview to the side toolbar item will render the content. In your example, how are you rendering the content?

I want to learn how you install the theia?

Can you clarify what you mean here? The browser example you ran is simply an example from the sources of the framework itself (what we use to test and develop features). For downstream applications, they would install build their own products from the framework:

• https://theia-ide.org/docs/composing_applications/

I found something strange：

When I use the 'localhost' address, it can preview:

But use the '127.0.0.1', it is blank:

I don't know why :(

[paul-marechal]

It seems like you are accessing your Theia application through an IP address rather than a domain host.

Whenever we open iframes to render custom content (previews, webviews) we prepend the current hostname with a random sub-domain in order to trigger cross origin protections and isolate the content from the main Theia application context.

Example: localhost:3000 becomes {uuid}.mini-browser.localhost:3000.

This breaks down with IPs because an IP is not a domain name, so it cannot work with sub-domains.

I don't see how to make it work with IPs.

[BigGan]

I try the version 1.5.0, I found the IP address can work:

But now, now it doesn't work for the version 1.21.0.

[paul-marechal]

1.5.0 didn't use subdomains to host previews, but this caused security issues.

About your www.test.com host: You need to setup your DNS to resolve *.www.test.com to the same IP as www.test.com for previews to work. You can also change the name of the host used for previews through environment variables, see https://github.com/eclipse-theia/theia/tree/master/packages/mini-browser#environment-variables.

[BigGan]

Thank you very much. You are right! It works.

[subratkatiyar]

I was also having similar issue, here's a workaround:

1. Set web-view endpoint to hostname. This changes the {uuid}.mini-browser.localhost:3000 to http://{internal_ip:port}/webview
   set THEIA_WEBVIEW_EXTERNAL_ENDPOINT={{hostname}}
   Just copy paste this command. No edits required.
2. Start Theia with --ignore-certificate-errors.
   yarn browser start --hostname 0.0.0.0 --port 3000 --ignore-certificate-errors
3. In chrome open this url and add your ip:port and restart chrome.
   chrome://flags/#unsafely-treat-insecure-origin-as-secure

[JimCSuen]

on windows 11, i used $env:THEIA_WEBVIEW_EXTERNAL_ENDPOINT="{{hostname}}", which is enough to fix the problem