// Copyright 2014 The Closure Library Authors. All Rights Reserved. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS-IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. /** * @fileoverview The SafeStyle type and its builders. * * TODO(xtof): Link to document stating type contract. */ goog.provide('goog.html.SafeStyle'); goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.string'); goog.require('goog.string.Const'); goog.require('goog.string.TypedString'); /** * A string-like object which represents a sequence of CSS declarations * ({@code propertyName1: propertyvalue1; propertyName2: propertyValue2; ...}) * and that carries the security type contract that its value, as a string, * will not cause untrusted script execution (XSS) when evaluated as CSS in a * browser. * * Instances of this type must be created via the factory methods * ({@code goog.html.SafeStyle.create} or * {@code goog.html.SafeStyle.fromConstant}) and not by invoking its * constructor. The constructor intentionally takes no parameters and the type * is immutable; hence only a default instance corresponding to the empty string * can be obtained via constructor invocation. * * A SafeStyle's string representation ({@link #getTypedStringValue()}) can * safely: * * * A SafeStyle may never contain literal angle brackets. Otherwise, it could * be unsafe to place a SafeStyle into a <style> tag (where it can't * be HTML escaped). For example, if the SafeStyle containing * "{@code font: 'foo <style/><script>evil</script>'}" were * interpolated within a <style> tag, this would then break out of the * style context into HTML. * * A SafeStyle may contain literal single or double quotes, and as such the * entire style string must be escaped when used in a style attribute (if * this were not the case, the string could contain a matching quote that * would escape from the style attribute). * * Values of this type must be composable, i.e. for any two values * {@code style1} and {@code style2} of this type, * {@code goog.html.SafeStyle.unwrap(style1) + * goog.html.SafeStyle.unwrap(style2)} must itself be a value that satisfies * the SafeStyle type constraint. This requirement implies that for any value * {@code style} of this type, {@code goog.html.SafeStyle.unwrap(style)} must * not end in a "property value" or "property name" context. For example, * a value of {@code background:url("} or {@code font-} would not satisfy the * SafeStyle contract. This is because concatenating such strings with a * second value that itself does not contain unsafe CSS can result in an * overall string that does. For example, if {@code javascript:evil())"} is * appended to {@code background:url("}, the resulting string may result in * the execution of a malicious script. * * TODO(user): Consider whether we should implement UTF-8 interchange * validity checks and blacklisting of newlines (including Unicode ones) and * other whitespace characters (\t, \f). Document here if so and also update * SafeStyle.fromConstant(). * * The following example values comply with this type's contract: * * In addition, the empty string is safe for use in a CSS attribute. * * The following example values do NOT comply with this type's contract: * * * @see goog.html.SafeStyle#create * @see goog.html.SafeStyle#fromConstant * @see http://www.w3.org/TR/css3-syntax/ * @constructor * @final * @struct * @implements {goog.string.TypedString} */ goog.html.SafeStyle = function() { /** * The contained value of this SafeStyle. The field has a purposely * ugly name to make (non-compiled) code that attempts to directly access this * field stand out. * @private {string} */ this.privateDoNotAccessOrElseSafeStyleWrappedValue_ = ''; /** * A type marker used to implement additional run-time type checking. * @see goog.html.SafeStyle#unwrap * @const * @private */ this.SAFE_STYLE_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ = goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_; }; /** * @override * @const */ goog.html.SafeStyle.prototype.implementsGoogStringTypedString = true; /** * Type marker for the SafeStyle type, used to implement additional * run-time type checking. * @const {!Object} * @private */ goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ = {}; /** * Creates a SafeStyle object from a compile-time constant string. * * {@code style} should be in the format * {@code name: value; [name: value; ...]} and must not have any < or > * characters in it. This is so that SafeStyle's contract is preserved, * allowing the SafeStyle to correctly be interpreted as a sequence of CSS * declarations and without affecting the syntactic structure of any * surrounding CSS and HTML. * * This method performs basic sanity checks on the format of {@code style} * but does not constrain the format of {@code name} and {@code value}, except * for disallowing tag characters. * * @param {!goog.string.Const} style A compile-time-constant string from which * to create a SafeStyle. * @return {!goog.html.SafeStyle} A SafeStyle object initialized to * {@code style}. */ goog.html.SafeStyle.fromConstant = function(style) { var styleString = goog.string.Const.unwrap(style); if (styleString.length === 0) { return goog.html.SafeStyle.EMPTY; } goog.html.SafeStyle.checkStyle_(styleString); goog.asserts.assert( goog.string.endsWith(styleString, ';'), 'Last character of style string is not \';\': ' + styleString); goog.asserts.assert( goog.string.contains(styleString, ':'), 'Style string must contain at least one \':\', to ' + 'specify a "name: value" pair: ' + styleString); return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse( styleString); }; /** * Checks if the style definition is valid. * @param {string} style * @private */ goog.html.SafeStyle.checkStyle_ = function(style) { goog.asserts.assert( !/[<>]/.test(style), 'Forbidden characters in style string: ' + style); }; /** * Returns this SafeStyle's value as a string. * * IMPORTANT: In code where it is security relevant that an object's type is * indeed {@code SafeStyle}, use {@code goog.html.SafeStyle.unwrap} instead of * this method. If in doubt, assume that it's security relevant. In particular, * note that goog.html functions which return a goog.html type do not guarantee * the returned instance is of the right type. For example: * *
 * var fakeSafeHtml = new String('fake');
 * fakeSafeHtml.__proto__ = goog.html.SafeHtml.prototype;
 * var newSafeHtml = goog.html.SafeHtml.htmlEscape(fakeSafeHtml);
 * // newSafeHtml is just an alias for fakeSafeHtml, it's passed through by
 * // goog.html.SafeHtml.htmlEscape() as fakeSafeHtml
 * // instanceof goog.html.SafeHtml.
 * 
* * @see goog.html.SafeStyle#unwrap * @override */ goog.html.SafeStyle.prototype.getTypedStringValue = function() { return this.privateDoNotAccessOrElseSafeStyleWrappedValue_; }; if (goog.DEBUG) { /** * Returns a debug string-representation of this value. * * To obtain the actual string value wrapped in a SafeStyle, use * {@code goog.html.SafeStyle.unwrap}. * * @see goog.html.SafeStyle#unwrap * @override */ goog.html.SafeStyle.prototype.toString = function() { return 'SafeStyle{' + this.privateDoNotAccessOrElseSafeStyleWrappedValue_ + '}'; }; } /** * Performs a runtime check that the provided object is indeed a * SafeStyle object, and returns its value. * * @param {!goog.html.SafeStyle} safeStyle The object to extract from. * @return {string} The safeStyle object's contained string, unless * the run-time type check fails. In that case, {@code unwrap} returns an * innocuous string, or, if assertions are enabled, throws * {@code goog.asserts.AssertionError}. */ goog.html.SafeStyle.unwrap = function(safeStyle) { // Perform additional Run-time type-checking to ensure that // safeStyle is indeed an instance of the expected type. This // provides some additional protection against security bugs due to // application code that disables type checks. // Specifically, the following checks are performed: // 1. The object is an instance of the expected type. // 2. The object is not an instance of a subclass. // 3. The object carries a type marker for the expected type. "Faking" an // object requires a reference to the type marker, which has names intended // to stand out in code reviews. if (safeStyle instanceof goog.html.SafeStyle && safeStyle.constructor === goog.html.SafeStyle && safeStyle.SAFE_STYLE_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ === goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_) { return safeStyle.privateDoNotAccessOrElseSafeStyleWrappedValue_; } else { goog.asserts.fail('expected object of type SafeStyle, got \'' + safeStyle + '\' of type ' + goog.typeOf(safeStyle)); return 'type_error:SafeStyle'; } }; /** * Package-internal utility method to create SafeStyle instances. * * @param {string} style The string to initialize the SafeStyle object with. * @return {!goog.html.SafeStyle} The initialized SafeStyle object. * @package */ goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse = function( style) { return new goog.html.SafeStyle().initSecurityPrivateDoNotAccessOrElse_(style); }; /** * Called from createSafeStyleSecurityPrivateDoNotAccessOrElse(). This * method exists only so that the compiler can dead code eliminate static * fields (like EMPTY) when they're not accessed. * @param {string} style * @return {!goog.html.SafeStyle} * @private */ goog.html.SafeStyle.prototype.initSecurityPrivateDoNotAccessOrElse_ = function( style) { this.privateDoNotAccessOrElseSafeStyleWrappedValue_ = style; return this; }; /** * A SafeStyle instance corresponding to the empty string. * @const {!goog.html.SafeStyle} */ goog.html.SafeStyle.EMPTY = goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(''); /** * The innocuous string generated by goog.html.SafeUrl.create when passed * an unsafe value. * @const {string} */ goog.html.SafeStyle.INNOCUOUS_STRING = 'zClosurez'; /** * Mapping of property names to their values. * @typedef {!Object} */ goog.html.SafeStyle.PropertyMap; /** * Creates a new SafeStyle object from the properties specified in the map. * @param {goog.html.SafeStyle.PropertyMap} map Mapping of property names to * their values, for example {'margin': '1px'}. Names must consist of * [-_a-zA-Z0-9]. Values might be strings consisting of * [-,.'"%_!# a-zA-Z0-9], where " and ' must be properly balanced. * Other values must be wrapped in goog.string.Const. Null value causes * skipping the property. * @return {!goog.html.SafeStyle} * @throws {Error} If invalid name is provided. * @throws {goog.asserts.AssertionError} If invalid value is provided. With * disabled assertions, invalid value is replaced by * goog.html.SafeStyle.INNOCUOUS_STRING. */ goog.html.SafeStyle.create = function(map) { var style = ''; for (var name in map) { if (!/^[-_a-zA-Z0-9]+$/.test(name)) { throw Error('Name allows only [-_a-zA-Z0-9], got: ' + name); } var value = map[name]; if (value == null) { continue; } if (value instanceof goog.string.Const) { value = goog.string.Const.unwrap(value); // These characters can be used to change context and we don't want that // even with const values. goog.asserts.assert(!/[{;}]/.test(value), 'Value does not allow [{;}].'); } else if (!goog.html.SafeStyle.VALUE_RE_.test(value)) { goog.asserts.fail( 'String value allows only [-,."\'%_!# a-zA-Z0-9], rgb() and ' + 'rgba(), got: ' + value); value = goog.html.SafeStyle.INNOCUOUS_STRING; } else if (!goog.html.SafeStyle.hasBalancedQuotes_(value)) { goog.asserts.fail('String value requires balanced quotes, got: ' + value); value = goog.html.SafeStyle.INNOCUOUS_STRING; } style += name + ':' + value + ';'; } if (!style) { return goog.html.SafeStyle.EMPTY; } goog.html.SafeStyle.checkStyle_(style); return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse( style); }; /** * Checks that quotes (" and ') are properly balanced inside a string. Assumes * that neither escape (\) nor any other character that could result in * breaking out of a string parsing context are allowed; * see http://www.w3.org/TR/css3-syntax/#string-token-diagram. * @param {string} value Untrusted CSS property value. * @return {boolean} True if property value is safe with respect to quote * balancedness. * @private */ goog.html.SafeStyle.hasBalancedQuotes_ = function(value) { var outsideSingle = true; var outsideDouble = true; for (var i = 0; i < value.length; i++) { var c = value.charAt(i); if (c == "'" && outsideDouble) { outsideSingle = !outsideSingle; } else if (c == '"' && outsideSingle) { outsideDouble = !outsideDouble; } } return outsideSingle && outsideDouble; }; // Keep in sync with the error string in create(). /** * Regular expression for safe values. * * Quotes (" and ') are allowed, but a check must be done elsewhere to ensure * they're balanced. * * ',' allows multiple values to be assigned to the same property * (e.g. background-attachment or font-family) and hence could allow * multiple values to get injected, but that should pose no risk of XSS. * * The rgb() and rgba() expression checks only for XSS safety, not for CSS * validity. * @const {!RegExp} * @private */ goog.html.SafeStyle.VALUE_RE_ = /^([-,."'%_!# a-zA-Z0-9]+|(?:rgb|hsl)a?\([0-9.%, ]+\))$/; /** * Creates a new SafeStyle object by concatenating the values. * @param {...(!goog.html.SafeStyle|!Array)} var_args * SafeStyles to concatenate. * @return {!goog.html.SafeStyle} */ goog.html.SafeStyle.concat = function(var_args) { var style = ''; /** * @param {!goog.html.SafeStyle|!Array} argument */ var addArgument = function(argument) { if (goog.isArray(argument)) { goog.array.forEach(argument, addArgument); } else { style += goog.html.SafeStyle.unwrap(argument); } }; goog.array.forEach(arguments, addArgument); if (!style) { return goog.html.SafeStyle.EMPTY; } return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse( style); };