Content-security-policy bug

Bug Report

Child iframe in remotely-hosted iframe within cordova app doesn’t load, despite appropriate Content-Security-Policy http header in child iframe. Bug reproduction repository here: https://github.com/blukis/bugdemo-cordova-android-issue-560/

Problem

Child iframe in remotely-hosted iframe within cordova app doesn’t load, despite Content-Security-Policy http header in child iframe.

What is expected to happen?

Inner-iframe (iframe border colored blue) is expected to load.

What does actually happen?

Inner-iframe (iframe border colored blue) doesn’t load, and appears blank.

Information

Chrome debug console reports…

Refused to display ‘http://201x.plurib.us/test/2018/content-security-inner.php’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors *”

Command or Code

Build the app (I’m using PhoneGap build, because cordova-proper is beyond my expertise). Bug manifests on initial state of the app when it’s run.

Environment, Platform, Device

Android

Version information

Phonegap build, using cli-9.0.0

Checklist

• I searched for existing GitHub issues
• [?] I updated all Cordova tooling to most recent version
• I included all the necessary information above

--------

Original post…

I believe I found an issue with content-security-policy in cordova environment…

I have an app that includes this page in an iframe: “http://201x.plurib.us/test/2018/content-security-outer.html”, which in turn includes this page in another iframe “http://201x.plurib.us/test/2018/content-security-inner.php”. (Note: these are very short pages created to debug this issue. The original page causing the issue was a shopify checkout page, found in the comments of “…outer.html”.)

“…inner.php” includes this http header: Content-Security-Policy: frame-ancestors *

“…outer.html” (and its inner iframe) loads OK in Chrome on Android, but when included the url in a cordova app, “…inner.php” iframe does not load. (Note: app has “cordova-plugin-whitelist” plugin and <access origin="*" />).

When I enable android debugging and check the remote device console in Chrome, I see this error in the Chrome console:

Refused to display ‘http://201x.plurib.us/test/2018/content-security-inner.php’ in a frame because an ancestor violates the following Content Security Policy directive: “frame-ancestors *”.

Maybe I’m missing something, but I’m not sure how anything could fail to pass “frame-ancestors *”. Is it a cordova issue? Thanks!

[exxbrain]

Another case is submitting a form to an iframe:

	<form action="http://www.ralfinter.ru/csp_test.php" target="iframe" method="post" >
		<input type="submit"/>
	</form>
	<iframe name="iframe" width="400" height="400"><iframe>

“Origin” header is “null”. The result is the same error.

[breautek]

I’ve looked into this a bit deeper, and creating my own test server to use as the CSP policy must come from http headers for frame-ancestors.

I’ve ran tests both on Cordova & Desktop.

Desktop appears to run fine, including when the page is loaded through the file:// protocol (ie just opening a html page from the filesystem). Mobile appears to disallow this. The protocol must not be file:// in my tests. Which means the page needs to be loaded from a place other than the file system. This is a problem with the default webview provided by Cordova as files are… loaded from the filesystem directly.

A proof case is to have the following inside your config.xml

...
<content src="http://remote.example.com/outer.html" />

Here, the app content outer.html will be loaded from the webserver, and location.origin will have a http:// origin path. The CSP policy will behave properly in this case. Do note that this config IS NOT recommended if you use cordova APIs and plugins due to app store policies regarding executing native APIs remotely. This is just for proof that frame-ancestors CSP works under a http origin vs file origin.

I don’t know if this is an issue Cordova will fix, but basically using frame-ancestors CSP rules will not work with the default android webview.

Any Workarounds?

I have tested the Ionic Webview with this, I know this webview provides some kind of proxy support so that files are not “loaded” from the filesystem and is instead loaded through the http/s protocol (or whatever Scheme you choose… And frame-ancestors CSP policy does appear to work properly using the ionic webview due to their scheme implementation.

Note that I am not very familiar with the Ionic webview and any questions specifically about the webview I probably cannot answer, but I do know that even though it’s made by Ionic, you don’t need to use the ionic framework to use the webview.

I’ve provided a screenshot of the reproduction repo using the ionic webview.

And my changes can be found here