Restrictive CSP permanently crashes Cordova apps

mobile Cordova
1

My CSP line in main.html was a standard permissive one:
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: blob: *; media-src 'self' mediastream: blob:; connect-src * blob:" >

I decided to make it more restrictive, with specific allowed domains:
<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; font-src 'self' data: https://maxcdn.bootstrapcdn.com https://kit-free.fontawesome.com https://fonts.gstatic.com; script-src 'self' https://maps.googleapis.com https://kit.fontawesome.com; style-src 'self' https://kit-free.fontawesome.com https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com 'unsafe-inline'; img-src 'self' data: blob: *; media-src 'self' mediastream: blob:; connect-src * blob:; object-src 'none'" >

The restrictive CSP works fine in the browser, but a user quickly informed me that their iPhone version was hung on the splash screen. I checked mine – same thing. I checked iOS simulator – same thing. Android phone – also hung.

Bad on me for not checking phone vs browser behavior, but this is a killer. Something about the restrictive CSP seems to cause hot code push to fail, leaving users hung on the splash screen, but far worse, it apparently updates the HCP status in a way that a subsequent fix (rolling back to the permissive CSP) will not HCP. The only way to fix this problem is to uninstall and reinstall the phone app. Yikes!

Does anyone have some info on what can go in a restrictive CSP that doesn’t clobber HCP? I’ll be checking out options myself, maybe it’s as simple as including the server domain in the CSP. But on a broader note, the fact that there is a way to break HCP so badly that you have to uninstall the phone app is, to me, pretty major. Before I open an issue in Github, I’d love to hear anyone’s advice/experience on this.

Thanks!
Andy

2

Can you please check if it’s unsafe-inline and if you or your packages use dynamic imports?

3

Thanks for following up, but that project is dead and I have no way to look further into it. I do recall that I just went with the more permissive policy to avoid the issue. It also doesn’t seem like anyone else ever reported this issue, so maybe it was just a strangeness in my build environment.

4

Did you sort out your CSP/unsafe eval?

Currently I am not using dynamic imports but if I don’t have unsafe-eval allowed in my csp I end up getting this error:

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'sha256-...

I can’t figure out where exactly the below code is (that is triggering this issue) and whether I can do without it:

}}}}}},{
  "extensions": [
    ".js",
    ".json",
    ".html",
    ".d.ts",
    ".d.ts.map",
    ".ts",
    ".mjs",
    ".jsx",
    ".css",
    ".tsx"
  ],
  eval: function () {
    return eval(arguments[0]);
  }
});

Any ideas/guidance much appreciated!