Cordova iOS blank iframe

Question

In a Cordova app that I am working on there is an iframe. The problem is that when testing the app (both simulator and on device) the iframe is blank. On Android the iframe works perfectly however.

The iframe is loaded dynamicly in an Angular directive.

Within the directive link function the following code is used to load and append the iframe to the directive's element:

var iframe = angular.element('<iframe class="widget" width="' + widgetWidth + '" height="' + widgetHeight + '"></iframe>');
iframe.attr('src', url);
element.append(iframe);

I have also tried using something in the following lines:

var iframe = document.createElement('iframe');
iframe.src = url;

This results in somthing like the following (using Safari web inspector):

<iframe class="widget" width="384" height="505" src="http://hostname/correct/uri"></iframe>

In my index.html file I have the following set:

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline';">

I also have the following lines in my cordova config.xml:

<access origin="*" subdomains="true" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

There is also no errors or warnings in Safari Web Inspector.

So my question is, is there some trickery to get iFrames to work in Cordova iOS apps that I am missing. Or what is wrong with my current config/code?

I am using angularjs 1.5.3 and have jquery 2.2.1 (loaded before angularjs) in case that helps.

Answer 1

The problem was the allow-navigation tag. So to solve it I only had to put the <allow-navigation href="*" /> tag into the project's config.xml file.

I came to the solution through the output box in xcode while the simulator was running. There was a message containing the url of the iframe in question and something about "internal navigation rejected".

Answer 2

Have you tried setting child-src and/or frame-ancestors in the Content-Security-Policy meta tag? These may need setting to * also or something more restrictive like just the iframe source URL(s) you are using.

There's information about this at content-security-policy.com

Example based on your content security policy:

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; child-src *; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline';">