Cannot Load iframe on iOS Devices When Using Cordova 5.0.0 or Later

Environment

Service Code (AppBuilder)
Mobile development type Hybrid (Cordova app)
Mobile OS iOS
Cordova framework version Cordova 5.0.0 and later

Description

Hybrid application that is deployed on an iOS device does not show the content of an iframe.

Steps to Reproduce

  1. Create or open a Cordova application.
  2. Change the target Cordova version to 5.0.0 or later.
  3. Include an <iframe src=""></iframe> tag to an HTML view.
  4. Deploy the app to an iOS device.

Cause

Cordova 5.0.0 (Cordova for iOS 4.0.1) incorporates the Cordova whitelisting system, which provides a configurable security policy. As Cordova 5.0.0 is marked experimental in AppBuilder, project templates do not include the required configuration to enable whitelisting.

Solution

To enable whitelisting in your iOS application and allow the URL of an iframe to be accessed by the app, complete the following steps:

  1. Open the iOS Config.xml file in your project, as described here.
  2. In that file, add the following code before the closing </widget> tag:

    <feature name="IntentAndNavigationFilter">
        <param name="ios-package" value="CDVIntentAndNavigationFilter"/>
        <param name="onload" value="true"/>
    </feature>
    
  3. Whitelist the URLs of the iframes, by adding the necessary <allow-navigation> elements. For example:

    <allow-navigation href="http://example.com/" />
    

Notes

For testing purposes, you can whitelist all URLs at once.

<allow-navigation href="*" />

Whitelisting all URLs is not recommended for production apps. You should allow only the domains used in your application.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.