Skip to content
Permalink
Browse files

fix(core): allow css custom variables/properties in the style sanitiz…

…er (#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
  • Loading branch information
IgorMinar authored and alxhub committed Nov 15, 2019
1 parent 4e0eb36 commit 61cc7a3437e8d220874067b8cde2dd45ad8f8e5f
@@ -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}|` +
@@ -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 )');

0 comments on commit 61cc7a3

Please sign in to comment.
You can’t perform that action at this time.