Ionic - Content Security Policy not working

In my index.html I have a meta tag

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

when I run ionic serve i get following error

Refused to load the script 'http://localhost:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:8100"

Ionic version is 1.6.1

Anyone knows how to fix this?

I noticed, you have set script-src to self which means the scripts will load from your domain only with same origin (host name).

Your port number changed when you run it on web server because it chooses randomly selected port to run the application. I do not have any knowledge about Ionic server but for CSP, i can conclude that.

In your case, localhost:35729 and localhost:8100 are obviously not the same so the policy header blocks the loading of the script.

To fix this, it is better to use the host name for your app. In addition, CSP works better if you send it through HTTP response header rather than in meta tag. Please let me know if you have any doubt.