AngularJS ng-csp Directive
The AngularJS ng-csp directive is used to break certain CSP (Content Security Policy) rules. It changes the security policy of AngularJS.
AngularJS containing ng-csp directive set will not run any eval functions, and it will not inject any inline styles. The following rules affect AngularJS:
- unsafe-eval: this rule forbids apps to use eval or Function(string) generated functions (among other things). Angular makes use of this in the $parse service to provide a 30% increase in the speed of evaluating Angular expressions.
- unsafe-inline: this rule forbids apps from inject custom styles into the document. Angular makes use of this to include some CSS rules (e.g. ngCloak and ngHide). To make these directives work when a CSP rule is blocking inline styles, you must link to the angular-csp.css in your HTML manually.
Note: The ng-csp directive does not affect JavaScript, but it changes the way AngularJS works, meaning: you can still write eval functions, and they will be executed as you expect, but AngularJS will not run its own eval functions. It uses a compatability mode which can slow down the evaluation time up to 30%.
Syntax:
Parameter explanation:
no-unsafe-eval: Its value can be empty, means eval or inline styles are not allowed.
no-inline-style: The value can be one of the two values described.The value can be both values, separated by a semicolon, but that will have the same meaning as an empty value.
Let’s take an example to demonstrate ng-csp directive.
See this example: