Cordoba iOS empty iframe

Question

The Cordova application I'm working on has an iframe. The problem is that when testing the application (both the simulator and the device), the iframe is empty. On Android, iframe works fine.

An IFrame is dynamically loaded in the Angular directive.

Inside the directory link function, the following code is used to load and add an iframe to the directive element:

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

I also tried using something in the following lines:

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

This leads to something like the following (using the 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 config.xml cord:

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

Safari Web Inspector is also missing errors or warnings.

So my question is: are there any tricks to get iFrames to work in Cordova iOS apps that I miss. Or what is wrong with my current configuration / code?

I am using angularjs 1.5.3 and has jquery 2.2.1 (loaded to angular) if that helps.

Answer 1

The problem was that the allow-navigation tag. Therefore, in order to solve this problem, I had to put the <allow-navigation href="*" /> in the config.xml file of the project.

I came up with a solution through the output window in xcode while the simulator was working. There was a message containing the iframe URL in question, and something about "internal navigation rejected."

Answer 2

Have you tried installing src and / or frame-ancestors children in the Content-Security-Policy meta tag? They may need to install * as well, or something more restrictive as soon as the iframe source URLs you use.

Information on this at content-security-policy.com

Example based on 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';">