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

style(core): improve readability of style_sanizer(_spec).ts (#33841) 

PR Close #33841
This commit is contained in:
Igor Minar 2019-11-14 16:49:13 -08:00 committed by Alex Rickabaugh
parent 5af3bd4728
commit 6a5475f65b
2 changed files with 56 additions and 54 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 TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|Z|3d)?';
const COLOR_FNS = '(?:rgb|hsl)a?'; const COLOR_FNS = '(?:rgb|hsl)a?';
const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient'; 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 FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)';
const SAFE_STYLE_VALUE = new RegExp( const SAFE_STYLE_VALUE = new RegExp(
`^(${VALUES}|` + `^(${VALUES}|` +

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

@ -6,16 +6,14 @@
* found in the LICENSE file at https://angular.io/license * 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'; import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer';
{
t.describe('Style sanitizer', () => { describe('Style sanitizer', () => {
let logMsgs: string[]; let logMsgs: string[];
let originalLog: (msg: any) => any; let originalLog: (msg: any) => any;
t.beforeEach(() => { beforeEach(() => {
logMsgs = []; logMsgs = [];
originalLog = console.warn; // Monkey patch DOM.log. originalLog = console.warn; // Monkey patch DOM.log.
console.warn = (msg: any) => logMsgs.push(msg); console.warn = (msg: any) => logMsgs.push(msg);
@ -23,39 +21,44 @@ import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer';
afterEach(() => { console.warn = originalLog; }); afterEach(() => { console.warn = originalLog; });
function expectSanitize(v: string) { return t.expect(_sanitizeStyle(v)); } function expectSanitize(v: string) { return expect(_sanitizeStyle(v)); }
t.it('sanitizes values', () => { it('sanitizes values', () => {
expectSanitize('').toEqual(''); expectSanitize('').toEqual('');
expectSanitize('abc').toEqual('abc'); expectSanitize('abc').toEqual('abc');
expectSanitize('50px').toEqual('50px'); expectSanitize('50px').toEqual('50px');
expectSanitize('rgb(255, 0, 0)').toEqual('rgb(255, 0, 0)'); expectSanitize('rgb(255, 0, 0)').toEqual('rgb(255, 0, 0)');
expectSanitize('expression(haha)').toEqual('unsafe'); expectSanitize('expression(haha)').toEqual('unsafe');
}); });
t.it('rejects unblanaced quotes', () => { expectSanitize('"value" "').toEqual('unsafe'); });
t.it('accepts transform functions', () => { it('rejects unblanaced quotes', () => { expectSanitize('"value" "').toEqual('unsafe'); });
it('accepts transform functions', () => {
expectSanitize('rotate(90deg)').toEqual('rotate(90deg)'); expectSanitize('rotate(90deg)').toEqual('rotate(90deg)');
expectSanitize('rotate(javascript:evil())').toEqual('unsafe'); expectSanitize('rotate(javascript:evil())').toEqual('unsafe');
expectSanitize('translateX(12px, -5px)').toEqual('translateX(12px, -5px)'); expectSanitize('translateX(12px, -5px)').toEqual('translateX(12px, -5px)');
expectSanitize('scale3d(1, 1, 2)').toEqual('scale3d(1, 1, 2)'); expectSanitize('scale3d(1, 1, 2)').toEqual('scale3d(1, 1, 2)');
}); });
t.it('accepts gradients', () => {
it('accepts gradients', () => {
expectSanitize('linear-gradient(to bottom, #fg34a1, #bada55)') expectSanitize('linear-gradient(to bottom, #fg34a1, #bada55)')
.toEqual('linear-gradient(to bottom, #fg34a1, #bada55)'); .toEqual('linear-gradient(to bottom, #fg34a1, #bada55)');
expectSanitize('repeating-radial-gradient(ellipse cover, black, red, black, red)') expectSanitize('repeating-radial-gradient(ellipse cover, black, red, black, red)')
.toEqual('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', () => { it('accepts attr', () => { expectSanitize('attr(value string)').toEqual('attr(value string)'); });
expectSanitize('attr(value string)').toEqual('attr(value string)');
}); it('accepts calc', () => { expectSanitize('calc(90%-123px)').toEqual('calc(90%-123px)'); });
t.it('sanitizes URLs', () => {
it('sanitizes 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( foo/bar.png\n )').toEqual('url( foo/bar.png\n )');
expectSanitize('url(javascript:evil())').toEqual('unsafe'); expectSanitize('url(javascript:evil())').toEqual('unsafe');
expectSanitize('url(strangeprotocol:evil)').toEqual('unsafe'); expectSanitize('url(strangeprotocol:evil)').toEqual('unsafe');
}); });
t.it('accepts quoted URLs', () => {
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')`).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( 'foo/bar.png'\n )`).toEqual(`url( 'foo/bar.png'\n )`);
@ -63,4 +66,3 @@ import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer';
expectSanitize('url( " javascript:evil() " )').toEqual('unsafe'); expectSanitize('url( " javascript:evil() " )').toEqual('unsafe');
}); });
}); });
}