honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Igor Minar 2019-11-14 17:02:26 -08:00 committed by Alex Rickabaugh
parent 6a5475f65b
commit 55748dbc55
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/sanitization/style_sanitizer.ts
View File

@ -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}|` +

3
packages/core/test/sanitization/style_sanitizer_spec.ts
View File

@ -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 )');