Iframes and Content-Security-Policy

Thread is closed for posting
2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Oct 2015

    Posted 26 Sep 2016 Link to this post

    We have an Cordova iOS/Android app, and we'd like to display some content from our server in an iframe.  The server is also used for a webapp, and current policy is to send the X-Frame-Options SAMEORIGIN with all responses.  This allows us to frame content in our webapp, but does not allow it in the mobile app.

    I have experimented with the Content Security Policy instead of X-Frame-Options.  For example, we can use

    Content Security Policy: frame-ancestors 'self' file:

    This does work on Android, but not on iOS.  However, this opens a new security hole, as any local HTML file can now frame our content.  We can mitigate the risk by setting this header only for resources need by the app, but I'd still like to do better.  Ideally, we would only allow iframes if we know the request is coming from our webapp or from the mobile app.

    So I have a few questions
    1) How do we display an iframe in an iOS app?  I've seen examples online using allow-navigation, but this does not seem to be available in Cordova for iOS 3.8.0.

    2) Can we be any more specific with the file URL?  Is there any consistency in the file URLs used by the mobile app?

    3) Is there a way to know if a request is coming from a 'trusted app'?  I can issue tokens from our server, but I don't know of any way to store those securely in the app.

    4) Are there any other workarounds that I'm not thinking of?

    Thanks for your input
  2. Preslav
    Preslav avatar
    452 posts

    Posted 29 Sep 2016 Link to this post

    Hello John,

    About your questions:

    1. To display an iframe on iOS devices with Cordova for iOS 3.8.0, you don't need <allow-navigation> element. You will need it if you are using Cordova for iOS 4.0.0 and above. To show the iframe you will also need CDVIntentAndNavigationFilter plugin included to your project. More information about this is available in 
    Cannot Load iframe on iOS Devices When Using Cordova 5.0.0 or Later KB article.

    2. I'm not sure that I fully understand this question. Based on the description I assume that you are asking if specifying the URLs in the <allow-navigation> element is allowed. If this is the case, you are allowed to change the URLs from:
    <allow-navigation href="*" />
    <allow-navigation href="https://example.com/" />

    3. We are not aware of a possible way to know if an iframe request is coming from an app. More about iframe limitations could be found in these forum posts:

    Web app with iframe and user - how to deal with session?

    auto login remote site inner in iframe

    4. The best possible alternative is o use the Cordova InAppBrowser plugin. We have a sample application showing this plugin usage. With this plugin, you can open a web page inside your app, without making your app logic accessible by the external scripts.

    I hope this information helps.

    Telerik by Progress

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top