1

I have the following js file locally;

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

Running my Cordova Phonegap app in Ripple throws the following error;

jquery.mobile-1.4.5.min.js:3 Refused to load the image 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' because it violates the following Content Security Policy directive: "default-src * 'unsafe-eval' 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

I have the following metadata in the html though;

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

How can I prevent (CSP) violation errors from being thrown? Any fix?

Edit : Adding the ajax.googleapis url into meta helped to remove most of the CSP errors ;

 <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' https://ajax.googleapis.com/ 'unsafe-inline'">

But I do still have some like the following;

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAI3gABIAAAABRWQAAQABAAAAAAAAAAAAAAAAAAAAA…IwnaGGIYHBlUELLMKwH6htK8MUhmKGIAYjqCImVEUgs1mBOtm1gRYpuNZmSrgAALqcEVgAAAA=' because it violates the following Content Security Policy directive: "default-src * 'unsafe-eval' https://ajax.googleapis.com/ 'unsafe-inline'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

The source of the error is : http://localhost:3000/#&ui-state=dialog

But I believe it is not a big deal since I presume that it is Ripple Emulator causing that error.

shamaleyte
  • 1,882
  • 3
  • 21
  • 38
  • 2
    A. I would suggest upgrading your jQuery lib asap. Latest (stable) release is `2.2.3`, and you're stuck on `1.11.1` Only difference in up'ing to `2.2.3` is that you lose support for IE 6, 7, 8. And B. You really should be calling libs - like jQuery - from their appropriated CDN's, eg. `` and not hosting them locally. There is actually a greater performance impact on hosting them locally than referencing their CDN due to the strong likelihood that most of your users will already have the lib cached. – mferly May 16 '16 at 18:33
  • Marcus, thanks for the advice. I will do that, but one question to make sure that I understand you correctly. Referencing their CDN will not affect the way the app works offline or online , right? – shamaleyte May 16 '16 at 18:34
  • If you're looking for your app to be available "*offline*" (E.g. no internet connection), then referencing the library via the CDN (without any internal caching mechanisms [ie. local storage, etc]) would seemingly not work. Under that pretence it would make sense to store the lib locally for offline use. – mferly May 16 '16 at 18:37
  • Ok, it is supposed to work offline as well. Is there any solid way to store the lib locally for offline use? Some talk about Base64 encode ? – shamaleyte May 16 '16 at 18:41
  • Just like how you currently have it would suffice. If all of your assets are stored locally, your app is then only dependant on the end-user having a browser that can interpret JavaScript (and HTML, etc). Which I don't see being a problem lol. If you want to get fancy, there is lots of HTML5 fanciness out there, but to expedite the dev process, you can simply reference the assets locally (as you currently are; best-case), or inlining the lib (and associated assets) directly into your document (secondary to the former if document-caching is not implemented properly). – mferly May 16 '16 at 18:46
  • Ok thanks for the tip Marcus, any suggestions for the problem? – shamaleyte May 16 '16 at 21:05
  • Your *edit* to the post was going to be my suggestion. Whitelist the appropriate domains, just as you did. – mferly May 16 '16 at 21:22

1 Answers1

7

Add to content security directives: img-src 'self' data:;

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

This is according to the grammar in CSP spec

link to answer and more info

Community
  • 1
  • 1
user732456
  • 2,638
  • 2
  • 35
  • 49