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

feat(security): allow calc and gradient functions. (#13943) 

PR Close #13943

Also includes support for # color notation in function arguments (common
in gradient functions).
This commit is contained in:
Martin Probst 2017-01-16 09:42:25 +01:00 committed by Miško Hevery
parent a6f8e9fc90
commit e19bf70b47
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
modules/@angular/platform-browser/src/security/style_sanitizer.ts
View File

@ -30,9 +30,14 @@ import {sanitizeUrl} from './url_sanitizer';
const VALUES = '[-,."\'%_!# a-zA-Z0-9]+';
const TRANSFORMATION_FNS = '(?:matrix|translate|scale|rotate|skew|perspective)(?:X|Y|3d)?';
const COLOR_FNS = '(?:rgb|hsl)a?';
const FN_ARGS = '\\([-0-9.%, a-zA-Z]+\\)';
const SAFE_STYLE_VALUE =
new RegExp(`^(${VALUES}|(?:${TRANSFORMATION_FNS}|${COLOR_FNS})${FN_ARGS})$`, 'g');
const GRADIENTS = '(?:repeating-)?(?:linear|radial)-gradient';
const CSS3_FNS = '(?:calc|attr)';
const FN_ARGS = '\\([-0-9.%, #a-zA-Z]+\\)';
const SAFE_STYLE_VALUE = new RegExp(
`^(${VALUES}|` +
`(?:${TRANSFORMATION_FNS}|${COLOR_FNS}|${GRADIENTS}|${CSS3_FNS})` +
`${FN_ARGS})$`,
'g');
/**
* Matches a `url(...)` value with an arbitrary argument as long as it does

10
modules/@angular/platform-browser/test/security/style_sanitizer_spec.ts
View File

@ -39,6 +39,16 @@ export function main() {
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 )');