How to define Content-Security-Policy in Cordova properly?

Question

I am struggling for some days already with defining my Content-Security-Policy for my Cordova App.

My first question is: Do I have to add CSP in Cordova? It seems like Cordova adds meta tag for CSP by default and add Whitelist plugin, requiring to define your CSP for every page.

If I have to define:

How to properly define directives for my need:

I am adding some js files, css files, and have inline js code, as well as styles. I have added this CSP for my page. And it is complaining about style-src .

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'nonce-Random'; connect-src 'self'; img-src *; style-src *; media-src *"> 

I want to know how to properly add CSP for script-src, style-src, media-src, img-src. I have read the W3C Draft. But could not figure out.

And do I have to do something in Cordova side too?

Best,

Answer 1

In the content attribute of the Content Security Police tag, you define the urls allowed for each source type:

For example, in script-src you add the urls allowed to load scripts sources, and values like 'unsafe-inline' that means you can't use inline javascript code on your app.

With the * value, you are allowing your app to load source from any url.

The self value means your app can load local sources like

<script src='../js/script.js'></script>

The syntax is like

script-src 'self' http://test.com/* http://hello.com/* 'unsafe-inline'; style-src 'self' http://hellocom/*

Answer 2

Short Answer: No, You do not have to add CSP in Cordova. My particular issue turned out to be apparant lack of support for subdomain wildcards in access origin attributes in config.xml. Use subdomains="true" instead (see below).

Update: You should add CSP tags to your html... see note at the bottom...

Details: I've been messing with this issue as well and finally found the solution when I looked at the source code for the whitelist plugin itself.

I noticed that the plugin checked the config.xml file for a line containing

<access origin="*" />

and in that case added a whitelist entry thus ( java code):

if ("*".equals(origin)) {
    allowedRequests.addWhiteListEntry("http://*/*", false);
    allowedRequests.addWhiteListEntry("https://*/*", false);
} else {
    allowedRequests.addWhiteListEntry(origin, (subdomains != null) && (subdomains.compareToIgnoreCase("true") == 0));
}

indicating that it creates CSP rules based on what it finds in the config.xml.

I added the <access origin="" /> to my config.xml and things started working!

I then noticed in the above java snippet that in cases where the origin was something other than "*" the source code for the plugin would simply copy the given origin AND that it would also take heed of the "subdomains" attribute.

I looked at my previously working access definitions in config.xml:

<access origin="http://my.domain.com/*" />

I changed all of these to make use of the subdomain attribute instead of the wildcard:

<access origin="http://my.domain.com" subdomains="true" />

I then removed the <access origin="*" /> line from before and everything continued to work.

I also went back into my html file and removed the <meta http-equiv="Content-Security-Policy" ... > tags I had been experimenting with and things continued to work.. ie. they aren't needed... the plugin does it all. I should note that the aforementioned CSP tags in my HTML did have some effects but I could not get them to work for my XMLHttpl requests. My platform is Android. Cordova -v = 5.0.0 ( I had upgraded from a v 3.x.x )

You may want to look through the rest of the plugin source as it may have changed or hints on how to deal with other issues e.g. <allow-navigation href="*" /> in config.xml that results in CSPs as above ( i.e. "http://*/*" and "https://*/*" ) as well as "data:*".

Just Noticed:

I get a warning from the whitelist plugin when the cordova app is run:

No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin

Which I take to mean that the plugin opens everything up and you should be using CSP in your html files to be a responsible and secure coder - will do! ;)

I note that in the second part of your question you seem to be trying to set CSP wide open... so my answer thus far should suffice to get things going. As far as the proper application of CSP tags I'm in the same boat as you... and will be looking at online resources to figure it out. I imagine Google and Apple may require proper CSP tags at some point in the future.

Answer 3

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: http://localhost:3000 https://*.iaptic.com 'unsafe-eval' 'unsafe-inline' gap://* app:
        *; style-src 'self' 'unsafe-inline'; media-src *; img-src * 'self' data: blob:">

works like a charm, in combination with https://github.com/AraHovakimyan/cordova-plugin-wkwebviewxhrfix for loading assets on localhost/via file:// (the only working plugin for this as of today, https://stackoverflow.com/a/77742602/11127383)

Additionally, such a setup works also for purchases on both Android and iOS as of today using https://github.com/j3k0/cordova-plugin-purchase.