CODEWITHSUNDEEP
javascriptcordovaionic-framework
Coder
Coder

Reputation: 3120

Content Security Policy not working for Ionic serve

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 (Ionic version is 1.6.1) 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"

Does anyone knows how to fix this?

Upvotes: 3

Views: 4185

Answers (1)

Rohit416
Rohit416

Reputation: 3486

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.

Upvotes: 5

Related Questions