Iframe does not load in ionic app

Hi All,

I have recently setup a new mac and have started developing my app for ios.

Its a new mac and i have installed below applications and started the dev. Everything seems to work except for the fact that i have an iframe on my index.html page and it does not seem to load any content. I am not sure if this is related to cross site scripting issue. But the same app is working fine when i run it locally and check. I have tried with different domain names and none seem to open in the iframe.

cordova -v
5.3.3

ionic -v
1.7.0

xcode -v
7.0.1

not sure how to check the ios sdk version (i am new to mac)

Any help would be great.

Thanks,
Aadil

If you don’t mind can you please provide your code what you try?

ah… the body content of my index.html

<ion-header-bar class="bar-dark">
            <div data-ng-controller="AppCtrl">
            <Button id="homebutton" class="button" data-ng-click="run2()">
                <i class="icon ion-home"></i>
            </Button>
            <h1 class="title">
                <img src="img/logo-white.png" alt="zyme" width="66" height="22" style="margin-top:13px;left:0px;">
            </h1> 
            <Button id="navbutton" class="button" data-ng-click="nav1()">
                <i class="icon ion-gear-b"></i>
            </Button>
            </div>
    </ion-header-bar>
        <iframe 
                 name="iframe_a"  
                 id="iframea"  
                 src="http://abcxyz.com" 
                 frameborder="0" 
                 style=" overflow:hidden;
                         overflow-x:hidden;
                         overflow-y:hidden;
                         height:100%;
                         width:100%;
                         position:absolute;
                         top:14px;left:0px;right:0px;bottom:0px;
                         -ms-touch-action: none;" 
                         height="100%" width="100%"
        ></iframe>

also…

i find this in the console log of xcode…

can someone help on how i can fix the whitelist issue…

2015-10-14 22:47:17.692 myapp[13564:278691] ERROR whitelist rejection: url=‘https://code.jquery.com/jquery-1.11.3.min.js
2015-10-14 22:47:17.886 myapp[13564:278603] ERROR whitelist rejection: url=‘http://abcxyz.com/

Sorry for late response.
Please write iframe inside the ionic content:

<ion-content class="has-header">
<iframe 
             name="iframe_a"  
             id="iframea"  
             src="http://abcxyz.com" 
             frameborder="0" 
             style=" overflow:hidden;
                     overflow-x:hidden;
                     overflow-y:hidden;
                     height:100%;
                     width:100%;
                     position:absolute;
                     top:14px;left:0px;right:0px;bottom:0px;
                     -ms-touch-action: none;" 
                     height="100%" width="100%"
    ></iframe>
</ion-content>

thanks for the response…

but still its throwing the same error in the console…

thanks,
Aadil

What version of ionic you use?
And check please your config.xml file and check is there exist this line?

<access origin="*"/>

You can get help from here also I think : Whitelist for iOS

my ionic version v1.7.0
i have tried the suggestions in that post as well… but to no luck.

here is meta tag and the white list tags.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://abcxyz.com">

   <access origin="*"/>
   <allow-navigation href="*://*.abcxyz.com/*" />
   <allow-navigation href="*://*.abcxyz.com" />
   <allow-navigation href="*://*.jquery.com/*" />
    
    <!-- Allow links to web pages to open in a browser -->
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />

-aadil

i am editing the config.xml which is in the root of my app…