From 55748dbc5591ed3574cbfcdc15145815dd7ef549 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Thu, 14 Nov 2019 17:02:26 -0800 Subject: [PATCH] fix(core): allow css custom variables/properties in the style sanitizer (#33841) This change enables "var(--my-var)" to pass through the style sanitizer. After consulation with our security team, allowing these doesn't create new attack vectors, so the sanitizer doesn't need to strip them. Fixes parts of #23485 related to the sanitizer, other use cases discussed there related to binding have been addressed via other changes to the class and style handling in the runtime. Closes #23485 PR Close #33841 --- packages/core/src/sanitization/style_sanitizer.ts | 2 +- packages/core/test/sanitization/style_sanitizer_spec.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/core/src/sanitization/style_sanitizer.ts b/packages/core/src/sanitization/style_sanitizer.ts index 1e61cc8f2d..a1c0b7e0da 100644 --- a/packages/core/src/sanitization/style_sanitizer.ts +++ b/packages/core/src/sanitization/style_sanitizer.ts @@ -29,7 +29,7 @@ const VALUES = '[-,."\'%_!# a-zA-Z0-9]+'; const TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|Z|3d)?'; const COLOR_FNS = '(?:rgb|hsl)a?'; const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient'; -const CSS3_FNS = '(?:attr|calc)'; +const CSS3_FNS = '(?:attr|calc|var)'; const FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)'; const SAFE_STYLE_VALUE = new RegExp( `^(${VALUES}|` + diff --git a/packages/core/test/sanitization/style_sanitizer_spec.ts b/packages/core/test/sanitization/style_sanitizer_spec.ts index b0c1035bf7..d96251b482 100644 --- a/packages/core/test/sanitization/style_sanitizer_spec.ts +++ b/packages/core/test/sanitization/style_sanitizer_spec.ts @@ -51,6 +51,9 @@ describe('Style sanitizer', () => { it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); }); + it('accepts var', + () => { expectSanitize('var(--my-custom-var)').toEqual('var(--my-custom-var)'); }); + 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 )');