refactor: disable sanitization for [style] and [style.prop] bindings (#35621)

This patch is the first of many commits to disable sanitization for
[stlye.prop] and [style] bindings in Angular.

Historically, style-based sanitization has only been required for old
IE browsers (IE6 and IE7). Since Angular does not support these old
browsers at all, there is no reason for the framework to support
style-based sanitization.

PR Close #35621
This commit is contained in:
Matias Niemelä
2020-02-21 14:11:00 -08:00
committed by Alex Rickabaugh
parent 3c6c00d1d4
commit 420b9be1c1
13 changed files with 132 additions and 258 deletions

View File

@ -64,8 +64,8 @@ describe('sanitization', () => {
it('should sanitize style', () => {
expect(ɵɵsanitizeStyle('red')).toEqual('red');
expect(ɵɵsanitizeStyle(new Wrap('red'))).toEqual('red');
expect(ɵɵsanitizeStyle('url("http://server")')).toEqual('unsafe');
expect(ɵɵsanitizeStyle(new Wrap('url("http://server")'))).toEqual('unsafe');
expect(ɵɵsanitizeStyle('url("http://server")')).toEqual('url("http://server")');
expect(ɵɵsanitizeStyle(new Wrap('url("http://server")'))).toEqual('url("http://server")');
expect(() => ɵɵsanitizeStyle(bypassSanitizationTrustHtml('url("http://server")')))
.toThrowError(/Required a safe Style, got a HTML/);
expect(ɵɵsanitizeStyle(bypassSanitizationTrustStyle('url("http://server")')))

View File

@ -1,82 +0,0 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {_sanitizeStyle} from '../../src/sanitization/style_sanitizer';
describe('Style sanitizer', () => {
let logMsgs: string[];
let originalLog: (msg: any) => any;
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('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 )');
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');
});
});