Content-security-policy bug

[blukis]

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!

[marcus13371337]

Same problem here!

[exxbrain]

Hello, do you have any solution or workaround for this bug?

[blukis]

I have not found a solution or workaround. The behavior above (which looks like a bug to me) is all I know. Is this cordova's bug? Chrome's?

Is this the right place to report this bug?

[timbru31]

Thanks a lot for your issue, however the issue template exists for a reason 😉
It helps us to debug the issue further and to provide a solution much faster. With important information missing, we unfortunately can't help you.

Therefore, please edit this issue accordingly or close and create a new one and make sure to provide all the required information.

Is this reproducible in a new, plain Cordova app? A minimal reproduction repository would really help to debug and later fix this issue. More information on how to create one: https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md

[blukis]

Bug description updated above, accordingly. Reproduction repo created at https://github.com/blukis/bugdemo-cordova-android-issue-560/
Thank you

[exxbrain]

git clone https://github.com/blukis/bugdemo-cordova-android-issue-560.git
cd bugdemo-cordova-android-issue-560
cordova platform add android
cordova android build

Run the project.
You should see the content of http://201x.plurib.us/test/2018/content-security-inner.php
But in a debug console:
about:blank:1 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 *".

[breautek]

According to the documentation at MDN, the asteriks should be wrapped in single quotes, '*'.

So the header should read:
Content-Security-Policy: frame-ancestors '*';

Can someone confirm if the issue persists with them?

[exxbrain]

The same:
about:blank:1 Refused to display 'http://www.ralfinter.ru/csp_test.php' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors '*'"

[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.

[exxbrain]

I checked this in a pure WebView without Cordova. The same experience.
https://github.com/exxbrain/apache-cordova-android-issues-560-webview

[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

[vvarda]

@breautek any workarounds for today besides ionic webview using?

[breautek]

@breautek any workarounds for today besides ionic webview using?

Not that I know of. I believe it works on ionic's webview because on ionic, you don't use the file:// protocol. But not 100% sure if that's the reason it works on ionic.

[vvarda]

@breautek any workarounds for today besides ionic webview using?

Not that I know of. I believe it works on ionic's webview because on ionic, you don't use the file:// protocol. But not 100% sure if that's the reason it works on ionic.

Android works with ionic's view. What about ios? Did it help?

[breautek]

Did not test ios. So not sure.

[waptaxi]

Hi!
Any updates on this issue?
This problem persists and using ionic webview is not an option in my case.
Surely the problem is in opening iframe from the page loaded from "file://" protocol.

[breautek]

Surely the problem is in opening iframe from the page loaded from "file://" protocol.

This is the problem.

Any updates on this issue?

Not really. The only way to workaround this is to use schemes afaik. Ionic supports this which is why using the ionic webview is a potential workaround. Apache Cordova is hesitant of implementing schemes due to this discussion between Ionic and an Android WebView engineer.

This problem may be resolved by #1137 as it's the encouraged alternative to take for schemes but the WebViewAssetLoader requires AndroidX which is a breaking change, so it definitely won't be available any time soon.

[breautek]

Closing as I believe cordova-android@10 will fix this issue when using the WebAssetLoader (enabled by default).

If this issue still persists on cordova-android@10 while using WebAssetLoader schemes, please open a new issue.