cargdev/angular
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): remove style sanitization code for [style]/[style.prop] bindings (#36965)

Browse Source 
In 420b9be1c1 all style-based sanitization code was
disabled because modern browsers no longer allow for javascript expressions within
CSS. This patch is a follow-up patch which removes all traces of style sanitization
code (both instructions and runtime logic) for the `[style]` and `[style.prop]` bindings.

PR Close #36965
This commit is contained in:
Matias Niemelä
2020-05-06 16:14:37 -07:00
committed by Misko Hevery
parent 141fcb95a4
commit 45f4a47286
17 changed files with 54 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/core/src/sanitization/sanitization.ts
View File

@ -15,7 +15,6 @@ import {allowSanitizationBypassAndThrow, BypassType, unwrapSafeValue} from './by
import {_sanitizeHtml as _sanitizeHtml} from './html_sanitizer';
import {Sanitizer} from './sanitizer';
import {SecurityContext} from './security';
import {StyleSanitizeFn, StyleSanitizeMode} from './style_sanitizer';
import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
@ -176,47 +175,6 @@ export function ɵɵsanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop:
return getUrlSanitizer(tag, prop)(unsafeUrl);
}
/**
* The default style sanitizer will handle sanitization for style properties.
*
* Style sanitization is no longer apart of Angular because modern browsers no
* longer support javascript expressions. Therefore, the reason why this API
* exists is exclusively for unwrapping any style value expressions that were
* marked as `SafeValue` values.
*
* This API will be removed in a future release of Angular.
*
* @publicApi
*/
export const ɵɵdefaultStyleSanitizer =
(function(prop: string, value: string|null, mode?: StyleSanitizeMode): string|boolean|null {
if (value === undefined && mode === undefined) {
// This is a workaround for the fact that `StyleSanitizeFn` should not exist once PR#34480
// lands. For now the `StyleSanitizeFn` and should act like `(value: any) => string` as a
// work around.
return ɵɵsanitizeStyle(prop);
}
mode = mode || StyleSanitizeMode.ValidateAndSanitize;
let doSanitizeValue = true;
if (mode & StyleSanitizeMode.ValidateProperty) {
doSanitizeValue = stylePropNeedsSanitization(prop);
}
if (mode & StyleSanitizeMode.SanitizeOnly) {
return doSanitizeValue ? ɵɵsanitizeStyle(value) : unwrapSafeValue(value);
} else {
return doSanitizeValue;
}
} as StyleSanitizeFn);
export function stylePropNeedsSanitization(prop: string): boolean {
return prop === 'background-image' || prop === 'backgroundImage' || prop === 'background' ||
prop === 'border-image' || prop === 'borderImage' || prop === 'border-image-source' ||
prop === 'borderImageSource' || prop === 'filter' || prop === 'list-style' ||
prop === 'listStyle' || prop === 'list-style-image' || prop === 'listStyleImage' ||
prop === 'clip-path' || prop === 'clipPath';
}
export function validateAgainstEventProperties(name: string) {
if (name.toLowerCase().startsWith('on')) {
const msg = `Binding to event property '${name}' is disallowed for security reasons, ` +

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

@ -1,58 +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 {SafeValue} from './bypass';
/*
* ========== WARNING ==========
*
* Style sanitization in Angular (for `[style.prop]` and `[style]` bindings)
* is no longer required and has been removed. The reason why this feature
* has been removed is because style-based sanitization is no longer
* required with modern browsers.
*
* The contents of this file are still in flux. Various APIs and symbols will
* be removed in a future version of Angular. Please hold off from modifying this
* file for the time being.
*
* =============================
*/
/**
* A series of flags to instruct a style sanitizer to either validate
* or sanitize a value.
*
* Because sanitization is dependent on the style property (i.e. style
* sanitization for `width` is much different than for `background-image`)
* the sanitization function (e.g. `StyleSanitizerFn`) needs to check a
* property value first before it actually sanitizes any values.
*
* This enum exist to allow a style sanitization function to either only
* do validation (check the property to see whether a value will be
* sanitized or not) or to sanitize the value (or both).
*
* @publicApi
*/
export const enum StyleSanitizeMode {
/** Just check to see if the property is required to be sanitized or not */
ValidateProperty = 0b01,
/** Skip checking the property; just sanitize the value */
SanitizeOnly = 0b10,
/** Check the property and (if true) then sanitize the value */
ValidateAndSanitize = 0b11,
}
/**
* Used to intercept and sanitize style values before they are written to the renderer.
*
* This function is designed to be called in two modes. When a value is not provided
* then the function will return a boolean whether a property will be sanitized later.
* If a value is provided then the sanitized version of that will be returned.
*/
export interface StyleSanitizeFn {
(prop: string, value: string|SafeValue|null, mode?: StyleSanitizeMode): any;
}