javascript - Local jquery.js file causing Content Security Policy (CSP) violation errors - Stack Overflow

admin 管理员组

文章数量: 1086019

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

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

• javascript
• jquery
• cordova
• content-security-policy

Share Improve this question Follow edited May 16, 2016 at 21:08 shamaleyte asked May 16, 2016 at 18:24 shamaleyteshamaleyte 1,91233 gold badges2424 silver badges3939 bronze badges 7

• 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. <script src="https://ajax.googleapis./ajax/libs/jquery/2.2.3/jquery.min.js"></script> 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 Commented May 16, 2016 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 Commented May 16, 2016 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 Commented May 16, 2016 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 Commented May 16, 2016 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 Commented May 16, 2016 at 18:46

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptLocal jqueryjs file causing Content Security Policy (CSP) violation errorsStack Overflow