iFrame makes iOS app crash / splash screen of death

Ionic Framework ionic-v3
1

Maybe someone can help me. I have an ionic2 app and want to use one iframe. It works perfectly with ionic serve --lab. However as soon as I run it in Xcode or with ‘ionic run ios’ on simulator or device it stucks directly on the splash screen. When I remove the ‘src’ attribute it works again. But for sure the content is not available.

The last message of Xcode is:
2016-11-04 13:41:37.864621 appName[1917:655269] Resetting plugins due to page load.

From other topics I have seen that whitelist could be the problem. But my whitelist allows everything for now:

<allow-intent href="*"/>
<allow-navigation href="*"/>
<allow-navigation href="*://*.raywenderlich.com/*" />
<allow-navigation href="http://192.168.0.112:8100"/>

This turns out to be:

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <key>NSExceptionDomains</key>
      <dict>
        <key>raywenderlich.com/*</key>
        <dict>
          <key>NSIncludesSubdomains</key>
          <true/>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
        <key>192.168.0.112</key>
        <dict>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict>

I use this URL just for test cases. However on other URLs it’s exactly the same. I have now used over 8 hours of research and don’t really know how to solve this.

This is how the html looks like:

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle color="secondary">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <main id="iframe-container">
    <iframe src="https://www.raywenderlich.com/" frameborder="0" width="100%" height="100%" name="page_in_a_box" id="iframe-child" #iframeChild></iframe>
  </main>

  <div class="spinner" name="loading_spinner" #loadingSpinner>
    <ion-spinner id="loading-spinner"></ion-spinner>
  </div>

  <main *ngIf="!connected" id="no-connection-error" padding>
    <div id="no-connection-child">
      <h3>Keine Netzwerkverbindung</h3>
      <p>Leider haben Sie keine Netzwerkverbindung, daher kann der Inhalt nicht geladen werden. Stellen Sie sicher, dass eine Verbindung besteht.</p>
      <button ion-button color="primary" (click)="checkNetworkAgain()">Erneut laden</button>
    </div>
  </main>
</ion-content>

EDIT:
On Android it works as expected. I can see the iframe exactly like in the browser.

2

Have you try in Safari on your computer? Maybe the debug information gonna give you some informations if it may crash there too

3

Hey thanks for your answer. I have opened it in Safari now. There are a lot of ‘Blocked a frame with origin “https://www.raywenderlich.com” from accessing a frame with origin “http://localhost:8100”. The frame requesting access has a protocol of “https”, the frame being accessed has a protocol of “http”. Protocols must match.’ statements, but it works as expected. I also see the iframe.

I have also tested using another domain with this. There are even more of these error messages. But it also works.

4

I don’t have experiences using iframe so can’t tell exactly what to do unfortunately.

Maybe, seems it seems that Safari doesn’t like you frame origin, could you check you content policy in your index.html, maybe something to open there?

For example:

<meta http-equiv="Content-Security-Policy" content="default-src data: gap://* file://* https://ssl.gstatic.com *; img-src 'self' * data:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-eval' 'unsafe-inline' *; connect-src 'self' *;">

But as I said never used an iframe, so it’s just a try

1 Like
5

I’m not sure if your solution was correct but it remind me to change the meta-tag. Now it looks likes the documentation says:

<!-- This policy allows everything (eg CSS, AJAX, object, frame, media, etc) except that 
        * CSS only from the same origin and inline styles,
        * scripts only from the same origin and inline styles, and eval()
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

And it works as expected! Thank you very much!

1 Like