Embedding an Iframe having CSP 2.0 in a mobile app: "frame-ancestors" issue

user_4309746 0
Viewed 1820

Building an hybrid app with the Ionic framework, I need to embed to one of my page an Iframe. My problem is that the page loaded with the iframe does have the following CSP: 

"frame-ancestors http://foo.somedomain.com"

Which works just fine on my browser. However whenever I try this on the application itself the content is not loaded due to:

Refused to display 'http://foo.somedomain.com' in a frame because an ancestor violates the following Content Security Policy directive "frame-ancestors http://*.somedomain.com"

That make sense as the app request doesn't have a domain.

So my question is simply:

How can I identify my app (iOS and Android) in order to go through the frame-ancestors CSP?

I see that I can pass many things to that frame-ancestor: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors but I don't see how to validate that the request is coming from a mobile application.

content-security-policy ionic-framework cordova iframe
2 Answers

On android, you can follow the steps at https://github.com/ionic-team/cordova-plugin-ionic-webview to specify a custom domain and scheme to use. Namely:

<preference name="Hostname" value="app" />

<preference name="Scheme" value="https" />

The issue lies in Ionic's use of a webserver on iOS. Still trying to figure that one out.

user_104133400

If you control the domain's web server, and you can set a cookie for only ionic requests (like when you log in to the site) then you could optionally exclude the CSP for requests coming from ionic by detecting the set cookie:

For Apache:

SetEnvIf Cookie "ionic_cookie=1" is_ionic
Header always set Content-Security-Policy "frame-ancestors http://foo.somedomain.com" env=!is_ionic
user_15243030
Related