feat(security): allow calc and gradient functions. (#13943)

PR Close #13943 Also includes support for # color notation in function arguments (common in gradient functions).
angular · Jan 17, 2017 · e19bf70 · e19bf70
1 parent a6f8e9f
commit e19bf70
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/modules/@angular/platform-browser/src/security/style_sanitizer.ts b/modules/@angular/platform-browser/src/security/style_sanitizer.ts
@@ -30,9 +30,14 @@ import {sanitizeUrl} from './url_sanitizer';
 const VALUES = '[-,."\'%_!# a-zA-Z0-9]+';
 const TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|3d)?';
 const COLOR_FNS = '(?:rgb|hsl)a?';
-const FN_ARGS = '\\([-0-9.%, a-zA-Z]+\\)';
-const SAFE_STYLE_VALUE =
-    new RegExp(`^(${VALUES}|(?:${TRANSFORMATION_FNS}|${COLOR_FNS})${FN_ARGS})$`, 'g');
+const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient';
+const CSS3_FNS = '(?:calc|attr)';
+const FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)';
+const SAFE_STYLE_VALUE = new RegExp(
+    `^(${VALUES}|` +
+        `(?:${TRANSFORMATION_FNS}|${COLOR_FNS}|${GRADIENTS}|${CSS3_FNS})` +
+        `${FN_ARGS})$`,
+    'g');
 
 /**
  * Matches a `url(...)` value with an arbitrary argument as long as it does

diff --git a/modules/@angular/platform-browser/test/security/style_sanitizer_spec.ts b/modules/@angular/platform-browser/test/security/style_sanitizer_spec.ts
@@ -39,6 +39,16 @@ export function main() {
       expectSanitize('translateX(12px, -5px)').toEqual('translateX(12px, -5px)');
       expectSanitize('scale3d(1, 1, 2)').toEqual('scale3d(1, 1, 2)');
     });
+    t.it('accepts gradients', () => {
+      expectSanitize('linear-gradient(to bottom, #fg34a1, #bada55)')
+          .toEqual('linear-gradient(to bottom, #fg34a1, #bada55)');
+      expectSanitize('repeating-radial-gradient(ellipse cover, black, red, black, red)')
+          .toEqual('repeating-radial-gradient(ellipse cover, black, red, black, red)');
+    });
+    t.it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); });
+    t.it('accepts attr', () => {
+      expectSanitize('attr(value string)').toEqual('attr(value string)');
+    });
     t.it('sanitizes URLs', () => {
       expectSanitize('url(foo/bar.png)').toEqual('url(foo/bar.png)');
       expectSanitize('url( foo/bar.png\n )').toEqual('url( foo/bar.png\n )');