improve CORS handling by mini-browser

[akosyakov]

There are 2 cases to consider:

• opening a URL with http from Theia deployed under https, in this case we should notify a user about CORS issues. Right now they are only logged in the dev tool console and the mini browser is spining forever.
• opening a URL with https scheme, in this case some pages cannot be opened in iframe (see images below). The mini-browser should detect it and propose a user to open such page in a new browser tab.

[kittaakos]

#3169 (comment)

[kittaakos]

• Right now they are only logged in the dev tool console and the mini browser is spining forever

Note, although CORS errors are logged to the Chrome console, they're not visible from the JS code due to security reasons. At least that was my experience; hence there is no special error handling. I hope someone else with more experience finds a solution.

[jankeromnes]

Random note: projects using webpack-dev-server will often hit iframe errors like this:

• Adding --host=0.0.0.0 (or using gp forward port) will open the Preview, but just say Invalid Host Header

• Then adding --disable-host-check (or --allowed-hosts=.example.com) will fix the Browser tab preview, but the iframe Preview will still have a CSP error, because webpack-dev-server specifies frame-ancestors: 'self' (i.e. only "iframe-able" by the same domain)

I don't know why a development web server would be so annoyingly strict about these things, but webpack is very popular these days, so I'm seeing these issues a lot.

[akosyakov]

After implementing webviews, I've learned that many websites are secured from embedding them in other websites with X-Frame-Options headers or CSP meta tags. There is no way to work it around.

We could consider to use the headless chrome instead of embedding others web-sites via iframe. It will run as a separate process (so no issues with security) and serve content to us. It's a way how the browser preview extension for VS Code works. Alternatively we can evaluate whether we can replace our mini-browser with this VS Code extension completely. I'm not sure whether it does everything what we need and we want to give up a control over it. Maybe there is a hybrid solution.

cc @svenefftinge

Related to #6562, i.e. it would be good to use webviews while reimplementing the mini-browser to secure it.