Iframe does not load in ionic app

ionic-v1
1

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

2

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

3

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>
4

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/’

5

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>
6

thanks for the response…

but still its throwing the same error in the console…

thanks,
Aadil

7

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

<access origin="*"/>
8

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

9

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

10

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