Angular has some features that can conflict with certain restrictions that are applied when using CSP (Content Security Policy) rules.
If you intend to implement CSP with these rules then you must tell Angular not to use these features.
This is necessary when developing things like Google Chrome Extensions or Universal Windows Apps.
The following default rules in CSP affect Angular:
The use of
Function(string) and similar functions to dynamically create and execute code from strings is forbidden. Angular makes use of this in the
$parse service to provide a 30% increase in the speed of evaluating Angular expressions. (This CSP rule can be disabled with the CSP keyword
unsafe-eval, but it is generally not recommended as it would weaken the protections offered by CSP.)
The use of inline resources, such as inline
<style> elements, are forbidden. This prevents apps from injecting custom styles directly into the document. Angular makes use of this to include some CSS rules (e.g.
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. (This CSP rule can be disabled with the CSP keyword
unsafe-inline, but it is generally not recommended as it would weaken the protections offered by CSP.)
If you do not provide
ngCsp then Angular tries to autodetect if CSP is blocking dynamic code creation from strings (e.g.,
unsafe-eval not specified in CSP header) and automatically deactivates this feature in the
$parse service. This autodetection, however, triggers a CSP error to be logged in the console:
This error is harmless but annoying. To prevent the error from showing up, put the
ngCsp directive on an element of the HTML document that appears before the
<script> tag that loads the
Note: This directive is only available in the
data-ng-csp attribute form.
You can specify which of the CSP related Angular features should be deactivated by providing a value for the
ng-csp attribute. The options are as follows:
no-inline-style: this stops Angular from injecting CSS styles into the DOM
no-unsafe-eval: this stops Angular from optimizing $parse with unsafe eval of strings
You can use these values in the following combinations:
No declaration means that Angular will assume that you can do inline styles, but it will do a runtime check for unsafe-eval. E.g.
<body>. This is backwardly compatible with previous versions of Angular.
data-ng-csp) attribute will tell Angular to deactivate both inline styles and unsafe eval. E.g.
<body ng-csp>. This is backwardly compatible with previous versions of Angular.
no-unsafe-eval tells Angular that we must not use eval, but that we can inject inline styles. E.g.
no-inline-style tells Angular that we must not inject styles, but that we can run eval - no automatic check for unsafe eval will occur. E.g.
no-inline-style tells Angular that we must not inject styles nor use eval, which is the same as an empty: ng-csp. E.g.
<ANY ng-csp> ... </ANY>
This example shows how to apply the
ngCsp directive to the
<!doctype html> <html ng-app ng-csp> ... ... </html>
© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.