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