bug: Ionic fails to render inside an iframe

[lorenzodallavecchia]

Bug Report

Ionic version:

[x] 4.9.0

Current behavior:

Ionic fails to render when the Angular app is bootstrapped inside an iframe, but with the controlling Angular code kept outside of the frame. Note that the frame has the same origin, so this is likely not a cross-domain issue.

Expected behavior:

I would expect the application to render correctly inside the iframe.

Steps to reproduce:

Use the test repository. The basic reproduction scenario is the following.

1. Visit the test application in the browser. The application does not start (the iframe stays blank) and a DOMException is logged.

Another scenario is that of a browser with no support for the CssStyleSheet constructor.

1. Uncomment the first line in index.ts: import "./hacks";
2. Visit the test application in the browser. Now the rendering appears to work, but on a closer inspection you can see that CSS styles are not applied (e.g. the header shadow is missing).

Related code:

Test repository: https://github.com/lorenzodallavecchia/ionic-bug-iframe

Other information:

First of all, I think this is a bug in Stencil, but I could not create a stand-alone reproduction against that project because I have not fully understood how Ionic Angular "bootstraps" Stencil. Sorry about that.

The general issue is that Stencil is accessing the global document (and, via defaultView, its window), assuming that only a single document exists. I think that it should use the ownerDocument when possible and use that for finding header, body, etc.

For example in addStyle in the Stencil styles.ts I think it should accept style containers that are DOM documents instead of looking up the root document. Of course that would cause problems with the global Map used for saving styles.

A trickier issue is CssStyleSheet and other constructors. Basically the problem is that an object constructed with the constructor in a window will not be recognized as a valid instanceof in other windows. DOM methods will simply refuse to append a CSS stylesheet object that they see as "alien".

I am aware that my use case is probably an very special one. I would also like to know how you feel about this kind of issues and if a PR would be accepted.

Ionic info:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.2.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.15.3
   npm    : 6.10.1
   OS     : Windows 10

[rwaskiewicz]

Hi there 👋

I apologize that it took so long for a member of the Stencil team to respond to this. Unfortunately due to the time gap, the libraries used here are no longer supported. If you're willing & able to, could you please create a new reproduction application for the team to take a look at? If not, I completely understand. I again apologize at the lack of response here, and appreciate the time it took to put something like this together.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[lorenzodallavecchia]

Thanks for the response, @rwaskiewicz .

I updated the sample to use the latest version of all libraries. However, the problem is still present, with the same reproduction steps.

The problem should be evident in sources: Ionic/Stencil is accessing the global document and window variables instead of using the angular DOCUMENT token to grab the correct document to use.

As was the case when first reporting the bug, I don't know how to reproduce it without Ionic. The problem may be in Stencil itself or caused by how Ionic uses it. This is why I initially reported the problem against Ionic instead of Stencil. The problem also depends on using Stencil with Angular (although, in practice, it may affect other frameworks too).

Please tell me if you have any suggestions for creating a better repro. Thanks.