fix(ngCsp): allow CSP to be configurable

petebacondarwin · petebacondarwin · commit e1fd333ca4ab · 2015-07-15T22:52:21.000+01:00
There are two different features in Angular that can break CSP rules: use of `eval` to execute a string as JavaScript and dynamic injection of CSS style rules into the DOM. This change allows us to configure which of these features should be turned off to allow a more fine grained set of CSP rules to be supported. Closes angular#11933 Closes angular#8459
diff --git a/src/ng/directive/ngCsp.js b/src/ng/directive/ngCsp.js
@@ -53,10 +53,12 @@
  *
  *
  * * 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>`.
+ * a runtime check for unsafe-eval. E.g. `<body>`. This is backwardly compatible with previous versions
+ * of Angular.
  *
  * * A simple `ng-csp` (or `data-ng-csp`) attribute will tell Angular to deactivate both inline
- * styles and unsafe eval. E.g. `<body ng-csp>`.
+ * styles and unsafe eval. E.g. `<body ng-csp>`. This is backwardly compatible with previous versions
+ * of Angular.
  *
  * * Specifying only `no-unsafe-eval` tells Angular that we must not use eval, but that we can inject
  * inline styles. E.g. `<body ng-csp="no-unsafe-eval">`.
@@ -65,8 +67,8 @@
  * run eval - no automcatic check for unsafe eval will occur. E.g. `<body ng-csp="no-inline-style">`
  *
  * * Specifying both `no-unsafe-eval` and `no-inline-style` tells Angular that we must not inject
- * styles nor use eval, which is the same as an empty: ng-csp, except that no runtime check for
- * unsafe eval will occur. E.g.`<body ng-csp="no-inline-style;no-unsafe-eval">`
+ * styles nor use eval, which is the same as an empty: ng-csp.
+ * E.g.`<body ng-csp="no-inline-style;no-unsafe-eval">`
  *
  * @example
  * This example shows how to apply the `ngCsp` directive to the `html` tag.
diff --git a/src/ng/parse.js b/src/ng/parse.js
@@ -1701,13 +1701,14 @@ function $ParseProvider() {
   var cacheDefault = createMap();
   var cacheExpensive = createMap();
 
-  this.$get = ['$filter', '$sniffer', function($filter, $sniffer) {
+  this.$get = ['$filter', function($filter) {
+    var noUnsafeEval = csp().noUnsafeEval;
     var $parseOptions = {
-          csp: $sniffer.csp && $sniffer.csp.noUnsafeEval,
+          csp: noUnsafeEval,
           expensiveChecks: false
         },
         $parseOptionsExpensive = {
-          csp: $sniffer.csp && $sniffer.csp.noUnsafeEval,
+          csp: noUnsafeEval,
           expensiveChecks: true
         };
 
diff --git a/test/AngularSpec.js b/test/AngularSpec.js
@@ -799,11 +799,10 @@ describe('angular', function() {
     var originalFunction;
 
     beforeEach(function() {
-      originalFunction = window.Function;
+      spyOn(window, 'Function');
     });
 
     afterEach(function() {
-      window.Function = originalFunction;
       delete csp.rules;
     });
 
@@ -814,40 +813,49 @@ describe('angular', function() {
 
 
     it('should return true for noUnsafeEval if eval causes a CSP security policy error', function() {
-      window.Function = function() { throw new Error('CSP test'); };
+      window.Function.andCallFake(function() { throw new Error('CSP test'); });
       expect(csp()).toEqual({ noUnsafeEval: true, noInlineStyle: false });
+      expect(window.Function).toHaveBeenCalledWith('');
     });
 
 
     it('should return true for all rules when CSP is enabled manually via empty `ng-csp` attribute', function() {
       var spy = mockCspElement('ng-csp');
       expect(csp()).toEqual({ noUnsafeEval: true, noInlineStyle: true });
       expect(spy).toHaveBeenCalledWith('[ng-csp]');
+      expect(window.Function).not.toHaveBeenCalled();
     });
 
 
     it('should return true when CSP is enabled manually via [data-ng-csp]', function() {
       var spy = mockCspElement('data-ng-csp');
       expect(csp()).toEqual({ noUnsafeEval: true, noInlineStyle: true });
-      expect(document.querySelector).toHaveBeenCalledWith('[data-ng-csp]');
+      expect(spy).toHaveBeenCalledWith('[data-ng-csp]');
+      expect(window.Function).not.toHaveBeenCalled();
     });
 
 
     it('should return true for noUnsafeEval if it is specified in the `ng-csp` attribute value', function() {
       var spy = mockCspElement('ng-csp', 'no-unsafe-eval');
       expect(csp()).toEqual({ noUnsafeEval: true, noInlineStyle: false });
+      expect(spy).toHaveBeenCalledWith('[ng-csp]');
+      expect(window.Function).not.toHaveBeenCalled();
     });
 
 
     it('should return true for noInlineStyle if it is specified in the `ng-csp` attribute value', function() {
       var spy = mockCspElement('ng-csp', 'no-inline-style');
       expect(csp()).toEqual({ noUnsafeEval: false, noInlineStyle: true });
+      expect(spy).toHaveBeenCalledWith('[ng-csp]');
+      expect(window.Function).not.toHaveBeenCalled();
     });
 
 
     it('should return true for all styles if they are all specified in the `ng-csp` attribute value', function() {
       var spy = mockCspElement('ng-csp', 'no-inline-style;no-unsafe-eval');
       expect(csp()).toEqual({ noUnsafeEval: true, noInlineStyle: true });
+      expect(spy).toHaveBeenCalledWith('[ng-csp]');
+      expect(window.Function).not.toHaveBeenCalled();
     });
   });
 

Original file line number	Diff line number	Diff line change
`@@ -53,10 +53,12 @@`
`53`	`53`	`*`
`54`	`54`	`*`
`55`	`55`	`* * No declaration means that Angular will assume that you can do inline styles, but it will do`
`56`		- * a runtime check for unsafe-eval. E.g. `<body>`.
	`56`	+ * a runtime check for unsafe-eval. E.g. `<body>`. This is backwardly compatible with previous versions
	`57`	`+ * of Angular.`
`57`	`58`	`*`
`58`	`59`	* * A simple `ng-csp` (or `data-ng-csp`) attribute will tell Angular to deactivate both inline
`59`		- * styles and unsafe eval. E.g. `<body ng-csp>`.
	`60`	+ * styles and unsafe eval. E.g. `<body ng-csp>`. This is backwardly compatible with previous versions
	`61`	`+ * of Angular.`
`60`	`62`	`*`
`61`	`63`	* * Specifying only `no-unsafe-eval` tells Angular that we must not use eval, but that we can inject
`62`	`64`	* inline styles. E.g. `<body ng-csp="no-unsafe-eval">`.
`@@ -65,8 +67,8 @@`
`65`	`67`	* run eval - no automcatic check for unsafe eval will occur. E.g. `<body ng-csp="no-inline-style">`
`66`	`68`	`*`
`67`	`69`	* * Specifying both `no-unsafe-eval` and `no-inline-style` tells Angular that we must not inject
`68`		`- * styles nor use eval, which is the same as an empty: ng-csp, except that no runtime check for`
`69`		- * unsafe eval will occur. E.g.`<body ng-csp="no-inline-style;no-unsafe-eval">`
	`70`	`+ * styles nor use eval, which is the same as an empty: ng-csp.`
	`71`	+ * E.g.`<body ng-csp="no-inline-style;no-unsafe-eval">`
`70`	`72`	`*`
`71`	`73`	`* @example`
`72`	`74`	* This example shows how to apply the `ngCsp` directive to the `html` tag.