I am trying to create a chrome plugin with AngularJS 1.5 dependencies.
In that, I am getting this error.
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:".
I am not able to understand the problem behind this.
The same app is working fine for me on a web app. Why am I getting this error?
Angular 1.5 uses some features that can conflict with certain restrictions that are applied when using CSP (Content Security Policy) rules.
At the header level, mention this.
Also, have a look at
Angular ngCSP
.
The ng-csp directive is used to change the security policy of AngularJS.
With the ng-csp directive set, AngularJS will not run any eval functions, and it will not inject any inline styles.
Setting the value of the ng-csp directive to no-unsafe-eval, will stop AngularJS from running any eval functions, but allow injecting inline styles.
Setting the value of the ng-csp directive to no-inline-style, will stop AngularJS from injecting any inline styles, but allow eval functions.
Using the ng-csp directive is necessary when developing apps for Google Chrome Extensions or Windows Apps.
Example:
<!doctype html>
<html ng-app ng-csp>
...
...
</html>
Related
I get the following error in the Chrome's web console on my deployed React app:
Refused to frame 'https://www.youtube.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
However, I have specified frame-src in my index.html like in the following snippet:
<meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com/">
The source for the error is a YouTube embed, and with the meta tag in place the embed works fine on localhost. What could cause this error only to appear on a deployed React app?
Fixed it by adding Content-Security-Policy header on the server. So it wasn't an issue with the front-end code after all.
I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:
<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">
After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):
"web_accessible_resources": [
"assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
I'm rendering the image w/ angular in the popup.html page:
<img ng-src="{{ tile.imgSrc | htmlSafe }}" />
(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.
I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.
The error I can't seem to escape is:
screenshot of ffox console error
I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).
Any tips out there?
The issue here is that Angular sanitizes ng-src URLs for images and links.
Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.
This is a known behavior in extensions:
Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp
As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.
Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and Firefox:
var myModule = angular.module('myApp', [...], function($compileProvider) {
...
$compileProvider.imgSrcSanitizationWhitelist(
/^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
);
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
);
});
It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.
Angular loads some fonts when starting.
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
When I start nodewebkit and I'm offline, it seems that try to load the fonts slows down the app...can I hold this font offline without loading?
Or angular alwasy watch online for this fonts?
Thanks!
This is not angular's concern. In HTML5 You can use an appcache for that.
as noted in http://www.w3schools.com/
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
create a file beside your index.html named resource.appcache
add the link to the following files you want to cache inside resource.appcache
CACHE MANIFEST
# v1.0.0
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
then in your html, link it like
<!DOCTYPE HTML>
<html manifest="resource.appcache">
...
</html>
I am trying to make the Goole Map with Angular JS example run in my local but not able to.
What is the problem?
N.B.~ Since I am not able to put the links in the body (because it is complaining that if the link is of Plunker /JSfiddle, I have to put some code and indent it....I don't know how to do that in the body. So I am placing that in comment.
I guess "local" means your local filesystem(not a local webserver).
The issue is angular.js , it's included via:
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
as you see the protocol is missing, on your local filesystem the URL will be translated to
file://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js
(where the script probably not exists)
yo must prepend the protocol to the URL:
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
The lates AngularJS (1.3 beta 19) uses eval. This is prohibited in chrome extionsion.
How to fix the issue without allowing evals?
Error message:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is
not an allowed source of script in the following Content Security
Policy directive: "script-src 'self' chrome-extension-resource:".
Stack trace:
angular.js:1011
csp angular.js:1011
(anonymous function) angular.js:23556
UPDATE: See documentation of ng-csp https://docs.angularjs.org/api/ng/directive/ngCsp
OUTDATED: It looks like AngularJS fails to detect CSP in chrome extension. Use explicit ng-csp. Link to the AngularJS issue: https://github.com/angular/angular.js/issues/8777
To quote documentation that Dmitry linked:
Angular tries to autodetect if CSP is active and automatically turn on
the CSP-safe mode. This autodetection however triggers a CSP error to
be logged in the console:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is
not an allowed source of script in the following Content Security
Policy directive: "default-src 'self'". Note that 'script-src' was not
explicitly set, so 'default-src' is used as a fallback.
This error is harmless but annoying. To prevent the error from showing
up, put the ngCsp directive on the root element of the application
or on the angular.js script tag, whichever appears first in the html
document.
Solution found: enforcing CSP mode by adding ng-csp on an element of document.
See documentation of ng-csp https://docs.angularjs.org/api/ng/directive/ngCsp