From 6a5475f65b03c3028408122a98a43469daffcac8 Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Thu, 14 Nov 2019 16:49:13 -0800 Subject: [PATCH] style(core): improve readability of style_sanizer(_spec).ts (#33841) PR Close #33841 --- .../core/src/sanitization/style_sanitizer.ts | 2 +- .../test/sanitization/style_sanitizer_spec.ts | 108 +++++++++--------- 2 files changed, 56 insertions(+), 54 deletions(-) diff --git a/packages/core/src/sanitization/style_sanitizer.ts b/packages/core/src/sanitization/style_sanitizer.ts index 835381929b..1e61cc8f2d 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 = '(?:calc|attr)'; +const CSS3_FNS = '(?:attr|calc)'; 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 5adafceb8e..b0c1035bf7 100644 --- a/packages/core/test/sanitization/style_sanitizer_spec.ts +++ b/packages/core/test/sanitization/style_sanitizer_spec.ts @@ -6,61 +6,63 @@ * found in the LICENSE file at https://angular.io/license */ -import * as t from '@angular/core/testing/src/testing_internal'; - import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer'; -{ - t.describe('Style sanitizer', () => { - let logMsgs: string[]; - let originalLog: (msg: any) => any; - t.beforeEach(() => { - logMsgs = []; - originalLog = console.warn; // Monkey patch DOM.log. - console.warn = (msg: any) => logMsgs.push(msg); - }); +describe('Style sanitizer', () => { + let logMsgs: string[]; + let originalLog: (msg: any) => any; - afterEach(() => { console.warn = originalLog; }); - - function expectSanitize(v: string) { return t.expect(_sanitizeStyle(v)); } - - t.it('sanitizes values', () => { - expectSanitize('').toEqual(''); - expectSanitize('abc').toEqual('abc'); - expectSanitize('50px').toEqual('50px'); - expectSanitize('rgb(255, 0, 0)').toEqual('rgb(255, 0, 0)'); - expectSanitize('expression(haha)').toEqual('unsafe'); - }); - t.it('rejects unblanaced quotes', () => { expectSanitize('"value" "').toEqual('unsafe'); }); - t.it('accepts transform functions', () => { - expectSanitize('rotate(90deg)').toEqual('rotate(90deg)'); - expectSanitize('rotate(javascript:evil())').toEqual('unsafe'); - 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 )'); - expectSanitize('url(javascript:evil())').toEqual('unsafe'); - expectSanitize('url(strangeprotocol:evil)').toEqual('unsafe'); - }); - t.it('accepts quoted URLs', () => { - expectSanitize('url("foo/bar.png")').toEqual('url("foo/bar.png")'); - expectSanitize(`url('foo/bar.png')`).toEqual(`url('foo/bar.png')`); - expectSanitize(`url( 'foo/bar.png'\n )`).toEqual(`url( 'foo/bar.png'\n )`); - expectSanitize('url("javascript:evil()")').toEqual('unsafe'); - expectSanitize('url( " javascript:evil() " )').toEqual('unsafe'); - }); + beforeEach(() => { + logMsgs = []; + originalLog = console.warn; // Monkey patch DOM.log. + console.warn = (msg: any) => logMsgs.push(msg); }); -} + + afterEach(() => { console.warn = originalLog; }); + + function expectSanitize(v: string) { return expect(_sanitizeStyle(v)); } + + it('sanitizes values', () => { + expectSanitize('').toEqual(''); + expectSanitize('abc').toEqual('abc'); + expectSanitize('50px').toEqual('50px'); + expectSanitize('rgb(255, 0, 0)').toEqual('rgb(255, 0, 0)'); + expectSanitize('expression(haha)').toEqual('unsafe'); + }); + + it('rejects unblanaced quotes', () => { expectSanitize('"value" "').toEqual('unsafe'); }); + + it('accepts transform functions', () => { + expectSanitize('rotate(90deg)').toEqual('rotate(90deg)'); + expectSanitize('rotate(javascript:evil())').toEqual('unsafe'); + expectSanitize('translateX(12px, -5px)').toEqual('translateX(12px, -5px)'); + expectSanitize('scale3d(1, 1, 2)').toEqual('scale3d(1, 1, 2)'); + }); + + 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)'); + }); + + it('accepts attr', () => { expectSanitize('attr(value string)').toEqual('attr(value string)'); }); + + it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); }); + + 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 )'); + expectSanitize('url(javascript:evil())').toEqual('unsafe'); + expectSanitize('url(strangeprotocol:evil)').toEqual('unsafe'); + }); + + it('accepts quoted URLs', () => { + expectSanitize('url("foo/bar.png")').toEqual('url("foo/bar.png")'); + expectSanitize(`url('foo/bar.png')`).toEqual(`url('foo/bar.png')`); + expectSanitize(`url( 'foo/bar.png'\n )`).toEqual(`url( 'foo/bar.png'\n )`); + expectSanitize('url("javascript:evil()")').toEqual('unsafe'); + expectSanitize('url( " javascript:evil() " )').toEqual('unsafe'); + }); +});