Latest web development tutorials
 

AngularJS ng-csp Directive


Example

Change the way AngularJS behaves regarding "eval" and inline styles:

<body ng-app="" ng-csp>
...
Try it Yourself »

Definition and Usage

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.

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

<element ng-csp="no-unsafe-eval | no-inline-style"></element>

Parameter Values

Value Description
no-unsafe-eval
no-inline-style
The value can be empty, meaning neither eval or inline styles are allowed.
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.