improve CORS handling by mini-browser

eclipse-theia / theia

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

http://theia-ide.org

Eclipse Public License 2.0

19.95k stars 2.5k forks source link

improve CORS handling by mini-browser #3589

Open akosyakov opened 5 years ago

akosyakov commented 5 years ago

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 commented 5 years ago

https://github.com/theia-ide/theia/issues/3169#issuecomment-430221194

kittaakos commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 https://github.com/eclipse-theia/theia/issues/6562, i.e. it would be good to use webviews while reimplementing the mini-browser to secure it.