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

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/.

"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"

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:

<meta http-equiv="Content-Security-Policy" content="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';** ">

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:

"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." (Mike West, Google)

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

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

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

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    gt  grep  Content-Security  -ir  etc nginx global ssl conf add header Content-Security-Policy  quot default-src  none   frame-ancestors  none   script-src  self   img-src  self   style-src  self   base-uri  self   form-action  self   quot    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

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

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

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

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

[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