Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | ng-csp Directive

  • Difficulty Level : Expert
  • Last Updated : 23 Aug, 2019

Like any other stuff on the internet, AngularJS is not immune to attack. However, Angular does provide built-in security from basic security holes. So AngularJS was designed to be compatible with security measures such as HTTPS (SSL/TLS), CSP, etc.

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 and will help to stop the injection of the inline codes to the application. It is required when we are developing apps for operating systems (windows app), or for browsers (such as Google Chrome Extensions, Firefox Extensions, etc).


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

Parameter explanation:

no-unsafe-eval: Neither of the inline styles or the eval styles are allowed, and therefore the value can be kept empty.

no-inline-style: Whether the value is separated by a semicolon (;) or kept empty, but both will behave as an empty value. Out of the 2 values described, the value could be any one of them.

Example: This example shows the usage of ng-csp directive.

<!DOCTYPE html>
<script src=
<body ng-app="" ng-csp>
<div ng-app="">
            <body style = "text-align:center">
            <h2 style = "color:green">GeeksForGeeks</h2>
            <h2 style = "color:purple">AngularJS ng-cloak</h2>
<p>The expression is {{ 10 + 10 }}</p>

When we load the code:

The way the code is executed by the expressions of AngularJS, it is changed when we use the ng-app directive.

The difference cannot be told just by looking at it, but the usage of another way of evaluating the expressions is forced upon. This increases the evaluation time considerably, at around 30% more.

My Personal Notes arrow_drop_up
Recommended Articles
Page :