| // 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(user): 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 #getSafeStyleString()}) can |
| * safely: |
| * <ul> |
| * <li>Be interpolated as the entire content of a *quoted* HTML style |
| * attribute, or before already existing properties. The SafeStyle string |
| * *must be HTML-attribute-escaped* (where " and ' are escaped) before |
| * interpolation. |
| * <li>Be interpolated as the entire content of a {}-wrapped block within a |
| * stylesheet, or before already existing properties. The SafeStyle string |
| * should not be escaped before interpolation. SafeStyle's contract also |
| * guarantees that the string will not be able to introduce new properties |
| * or elide existing ones. |
| * <li>Be assigned to the style property of a DOM node. The SafeStyle string |
| * should not be escaped before being assigned to the property. |
| * </ul> |
| * |
| * 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: |
| * <ul> |
| * <li><pre>width: 1em;</pre> |
| * <li><pre>height:1em;</pre> |
| * <li><pre>width: 1em;height: 1em;</pre> |
| * <li><pre>background:url('http://url');</pre> |
| * </ul> |
| * 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: |
| * <ul> |
| * <li><pre>background: red</pre> (missing a trailing semi-colon) |
| * <li><pre>background:</pre> (missing a value and a trailing semi-colon) |
| * <li><pre>1em</pre> (missing an attribute name, which provides context for |
| * the value) |
| * </ul> |
| * |
| * @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 |
| * @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: |
| * |
| * <pre> |
| * 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. |
| * </pre> |
| * |
| * @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 + '\''); |
| 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<string, goog.string.Const|string>} |
| */ |
| 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], 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. |
| * @const {!RegExp} |
| * @private |
| */ |
| goog.html.SafeStyle.VALUE_RE_ = /^[-,."'%_!# a-zA-Z0-9]+$/; |
| |
| |
| /** |
| * Creates a new SafeStyle object by concatenating the values. |
| * @param {...(!goog.html.SafeStyle|!Array<!goog.html.SafeStyle>)} var_args |
| * SafeStyles to concatenate. |
| * @return {!goog.html.SafeStyle} |
| */ |
| goog.html.SafeStyle.concat = function(var_args) { |
| var style = ''; |
| |
| /** |
| * @param {!goog.html.SafeStyle|!Array<!goog.html.SafeStyle>} 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); |
| }; |