CSP 2.0 (unsafe-inline) and Angular

Question

If I implement CSP 2.0 on my angular app, and forbid unsafe-inline from script-src, would ng-click and other angular events work? I guess CSP will block all these.

Answer 1

AngularJS and Content-Security-Policy are well documented under the ngCsp directive. Here are how the unsafe rules affect Angular:

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

Specifically ngClick uses an AngularJS expression...

<ANY
  ng-click="expression">
...
</ANY>

...and an AngularJS expression does not need eval.

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.