Refused to load the script because it violates the following Content Security Policy directive

Question

When I tried to deploy my app onto devices with Android system above 5 0 0  Lollipop   I kept getting these kind of error messages   07-03 18 39 21 621  D SystemWebChromeClient 9132   file    android asset www index html  Line 0   Refused to load the script  http   xxxxx  because it violates the following Content Security Policy directive   quot script-src  self   unsafe-eval   unsafe-inline  quot   07-03 18 39 21 621  I chromium 9132    INFO CONSOLE 0    quot Refused to load the script  http   xxx  because it violates the following Content Security Policy directive   quot script-src  self   unsafe-eval   unsafe-inline  quot    However  if I deployed it to mobile device with Android system of 4 4 x  KitKat   the security policy works with the default ones   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  data  gap  https   ssl gstatic com  unsafe-inline   unsafe-eval   style-src  self   unsafe-inline   media-src   quot  gt   Then I thought  maybe  I should change to something like this   lt meta http-equiv  quot Content-Security-Policy quot  content  quot script-src  self   unsafe-eval   unsafe-inline   object-src  self   style-src  self   unsafe-inline   media-src   quot  gt   Basically  both options don t work for for me  How can I solve this issue

User · Answer

Adding the meta tag to ignore this policy was not helping us, because our webserver was injecting the Content-Security-Policy header in the response.

In our case we are using Ngnix as the web server for a Tomcat 9 Java-based application. From the web server, it is directing the browser not to allow inline scripts, so for a temporary testing we have turned off Content-Security-Policy by commenting.

How to turn it off in ngnix

By default, ngnix ssl.conf file will have this adding a header to the response:

#> grep 'Content-Security' -ir /etc/nginx/global/ssl.conf add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'none'; script-src 'self'; img-src 'self'; style-src 'self'; base-uri 'self'; form-action 'self';";
If you just comment this line and restart ngnix, it should not be adding the header to the response.

If you are concerned about security or in production please do not follow this, use these steps as only for testing purpose and moving on.

User · Answer

For anyone looking for a complete explanation  I recommend you to take a look at Content Security Policy  https   www html5rocks com en tutorials security content-security-policy     quot Code from https   mybank com should only have access to https   mybank com   s data  and https   evil example com should certainly never be allowed access  Each origin is kept isolated from the rest of the web quot   XSS attacks are based on the browser s inability to distinguish your app s code from code downloaded from another website  So you must whitelist the content origins that you consider safe to download content from  using the Content-Security-Policy HTTP header  This policy is described using a series of policy directives  each of which describes the policy for a certain resource type or policy area  Your policy should include a default-src policy directive  which is a fallback for other resource types when they don t have policies of their own  So  if you modify your tag to   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  data  gap  https   ssl gstatic com  unsafe-eval   style-src  self   unsafe-inline   media-src     script-src  self  http   onlineerp solution quebec  unsafe-inline   unsafe-eval      quot  gt   You are saying that you are authorizing the execution of JavaScript code  script-src  from the origins  self   http   onlineerp solution quebec   unsafe-inline    unsafe-eval   I guess that the first two are perfectly valid for your use case  I am a bit unsure about the other ones   unsafe-line  and  unsafe-eval  pose a security problem  so you should not be using them unless you have a very specific need for them    quot If eval and its text-to-JavaScript brethren are completely essential to your application  you can enable them by adding  unsafe-eval  as an allowed source in a script-src directive  But  again  please don   t  Banning the ability to execute strings makes it much more difficult for an attacker to execute unauthorized code on your site  quot   Mike West  Google

User · Answer

Full permission string The previous answers did not fix my issue  because they don t include blob  data  gap  keywords at the same time  so here is a string that does   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src   self blob  data  gap   style-src   self  unsafe-inline  blob  data  gap   script-src    self   unsafe-eval   unsafe-inline  blob  data  gap   object-src    self  blob  data  gap   img-src   self  unsafe-inline  blob  data  gap   connect-src self    unsafe-inline  blob  data  gap   frame-src   self blob  data  gap   quot  gt   Warning  This exposes the document to many exploits  Be sure to prevent users from executing code in the console or to be in a closed environment like a Cordova application

User · Answer

The self answer given by MagngooSasa did the trick  but for anyone else trying to understand the answer  here are a few bit more details  When developing Cordova apps with Visual Studio  I tried to import a remote JavaScript file  located here http   Guess What com MyScript js   but I have the error mentioned in the title  Here is the meta tag before  in the index html file of the project   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  data  gap  https   ssl gstatic com  unsafe-eval   style-src  self   unsafe-inline   media-src   quot  gt   Here is the corrected meta tag  to allow importing a remote script   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  data  gap  https   ssl gstatic com  unsafe-eval   style-src  self   unsafe-inline   media-src     script-src  self  http   onlineerp solution quebec  unsafe-inline   unsafe-eval      quot  gt   And no more error

User · Answer

It was solved with  script-src  self  http   xxxx  unsafe-inline   unsafe-eval

User · Answer

Try replacing your meta tag with this below   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src    style-src  self  http      unsafe-inline   script-src  self  http      unsafe-inline   unsafe-eval  quot    gt   Or in addition to what you have  you should add http     to both style-src and script-src as seen above added after  self   If your server is including the Content-Security-Policy header  the header will override the meta

User · Answer

The probable reason why you get this error is likely because you ve added the  build folder to your  gitignore file or generally haven t checked it into Git  So when you Git push Heroku master  the build folder you re referencing don t get pushed to Heroku  And that s why it shows this error  That s the reason it works properly locally  but not when you deployed to Heroku

User · Answer

We used this    lt meta http-equiv  Content-Security-Policy  content  default-src gap   ready file        style-src  self  http     https      unsafe-inline   script-src  self  http     https      unsafe-inline   unsafe-eval   gt

User · Answer

To elaborate some more on this  adding script-src  self  http   somedomain  unsafe-inline   unsafe-eval    to the meta tag like so   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  data  gap  https   ssl gstatic com  unsafe-eval   style-src  self   unsafe-inline   script-src  self  https   somedomain com   unsafe-inline   unsafe-eval    media-src   quot  gt   fixes the error

[javascript] Refused to load the script because it violates the following Content Security Policy directive

Examples related to javascript

Examples related to android

Examples related to cordova

Examples related to content-security-policy