The ng-CSP directive is used for changing the security policy of the AngularJS and to break many rules of the CSP (Content Security Policy) whenever required. It will also not be running any of the eval functions, although the injection of the inline styling codes is allowed to the application, by setting the value as no-unsafe-eval to the ng-csp directive. The eval functions are allowed, however, AngularJS will be stopped from injecting any inline styles, by specifying the no-inline-style value to the ng-csp directive. It is required when we are developing apps for operating systems (windows app), or for browsers (such as Google Chrome Extensions, Firefox Extensions, etc).
The Javascript will not be affected by the ng-csp directive, however, the working of the AngularJS may change, ie., the eval() function will still be in use as expected, but the actual eval() function of AngularJS will not run, as it utilizes the compatibility mode for which the overall evaluation time may decrease up to 30%.
Syntax:
<element ng-csp="no-inline-style | no-unsafe-eval"> </element>
Parameter values:
- no-unsafe-eval: Neither of the inline styles nor the eval styles is allowed, and therefore the value can be kept empty.
- no-inline-style: Whether the value is separated by a semicolon (;) or kept empty, both will behave as an empty value. Out of the 2 values described, the value could be any one of them.
Example: This example describes the usage of the ng-csp directive in AngularJS.
<!DOCTYPE html> <html>
<head>
<script src=
</script>
</head>
<body ng-app="" style="text-align:center" ng-csp>
<div >
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3 style="color:purple">
AngularJS ng-csp Directive
</h3>
</div>
<p>The expression is {{ 10 + 10 }}</p>
</body>
</html>
|
Output: