1
// Copyright 2014 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15
/**
16
 * @fileoverview The SafeStyle type and its builders.
17
 *
18
 * TODO(xtof): Link to document stating type contract.
19
 */
20

21
goog.provide('goog.html.SafeStyle');
22

23
goog.require('goog.array');
24
goog.require('goog.asserts');
25
goog.require('goog.string');
26
goog.require('goog.string.Const');
27
goog.require('goog.string.TypedString');
28

29

30

31
/**
32
 * A string-like object which represents a sequence of CSS declarations
33
 * ({@code propertyName1: propertyvalue1; propertyName2: propertyValue2; ...})
34
 * and that carries the security type contract that its value, as a string,
35
 * will not cause untrusted script execution (XSS) when evaluated as CSS in a
36
 * browser.
37
 *
38
 * Instances of this type must be created via the factory methods
39
 * ({@code goog.html.SafeStyle.create} or
40
 * {@code goog.html.SafeStyle.fromConstant}) and not by invoking its
41
 * constructor. The constructor intentionally takes no parameters and the type
42
 * is immutable; hence only a default instance corresponding to the empty string
43
 * can be obtained via constructor invocation.
44
 *
45
 * A SafeStyle's string representation ({@link #getTypedStringValue()}) can
46
 * safely:
47
 * <ul>
48
 *   <li>Be interpolated as the entire content of a *quoted* HTML style
49
 *       attribute, or before already existing properties. The SafeStyle string
50
 *       *must be HTML-attribute-escaped* (where " and ' are escaped) before
51
 *       interpolation.
52
 *   <li>Be interpolated as the entire content of a {}-wrapped block within a
53
 *       stylesheet, or before already existing properties. The SafeStyle string
54
 *       should not be escaped before interpolation. SafeStyle's contract also
55
 *       guarantees that the string will not be able to introduce new properties
56
 *       or elide existing ones.
57
 *   <li>Be assigned to the style property of a DOM node. The SafeStyle string
58
 *       should not be escaped before being assigned to the property.
59
 * </ul>
60
 *
61
 * A SafeStyle may never contain literal angle brackets. Otherwise, it could
62
 * be unsafe to place a SafeStyle into a &lt;style&gt; tag (where it can't
63
 * be HTML escaped). For example, if the SafeStyle containing
64
 * "{@code font: 'foo &lt;style/&gt;&lt;script&gt;evil&lt;/script&gt;'}" were
65
 * interpolated within a &lt;style&gt; tag, this would then break out of the
66
 * style context into HTML.
67
 *
68
 * A SafeStyle may contain literal single or double quotes, and as such the
69
 * entire style string must be escaped when used in a style attribute (if
70
 * this were not the case, the string could contain a matching quote that
71
 * would escape from the style attribute).
72
 *
73
 * Values of this type must be composable, i.e. for any two values
74
 * {@code style1} and {@code style2} of this type,
75
 * {@code goog.html.SafeStyle.unwrap(style1) +
76
 * goog.html.SafeStyle.unwrap(style2)} must itself be a value that satisfies
77
 * the SafeStyle type constraint. This requirement implies that for any value
78
 * {@code style} of this type, {@code goog.html.SafeStyle.unwrap(style)} must
79
 * not end in a "property value" or "property name" context. For example,
80
 * a value of {@code background:url("} or {@code font-} would not satisfy the
81
 * SafeStyle contract. This is because concatenating such strings with a
82
 * second value that itself does not contain unsafe CSS can result in an
83
 * overall string that does. For example, if {@code javascript:evil())"} is
84
 * appended to {@code background:url("}, the resulting string may result in
85
 * the execution of a malicious script.
86
 *
87
 * TODO(mlourenco): Consider whether we should implement UTF-8 interchange
88
 * validity checks and blacklisting of newlines (including Unicode ones) and
89
 * other whitespace characters (\t, \f). Document here if so and also update
90
 * SafeStyle.fromConstant().
91
 *
92
 * The following example values comply with this type's contract:
93
 * <ul>
94
 *   <li><pre>width: 1em;</pre>
95
 *   <li><pre>height:1em;</pre>
96
 *   <li><pre>width: 1em;height: 1em;</pre>
97
 *   <li><pre>background:url('http://url');</pre>
98
 * </ul>
99
 * In addition, the empty string is safe for use in a CSS attribute.
100
 *
101
 * The following example values do NOT comply with this type's contract:
102
 * <ul>
103
 *   <li><pre>background: red</pre> (missing a trailing semi-colon)
104
 *   <li><pre>background:</pre> (missing a value and a trailing semi-colon)
105
 *   <li><pre>1em</pre> (missing an attribute name, which provides context for
106
 *       the value)
107
 * </ul>
108
 *
109
 * @see goog.html.SafeStyle#create
110
 * @see goog.html.SafeStyle#fromConstant
111
 * @see http://www.w3.org/TR/css3-syntax/
112
 * @constructor
113
 * @final
114
 * @struct
115
 * @implements {goog.string.TypedString}
116
 */
117
goog.html.SafeStyle = function() {
118
  /**
119
   * The contained value of this SafeStyle.  The field has a purposely
120
   * ugly name to make (non-compiled) code that attempts to directly access this
121
   * field stand out.
122
   * @private {string}
123
   */
124
  this.privateDoNotAccessOrElseSafeStyleWrappedValue_ = '';
125

126
  /**
127
   * A type marker used to implement additional run-time type checking.
128
   * @see goog.html.SafeStyle#unwrap
129
   * @const {!Object}
130
   * @private
131
   */
132
  this.SAFE_STYLE_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ =
133
      goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_;
134
};
135

136

137
/**
138
 * @override
139
 * @const
140
 */
141
goog.html.SafeStyle.prototype.implementsGoogStringTypedString = true;
142

143

144
/**
145
 * Type marker for the SafeStyle type, used to implement additional
146
 * run-time type checking.
147
 * @const {!Object}
148
 * @private
149
 */
150
goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ = {};
151

152

153
/**
154
 * Creates a SafeStyle object from a compile-time constant string.
155
 *
156
 * {@code style} should be in the format
157
 * {@code name: value; [name: value; ...]} and must not have any < or >
158
 * characters in it. This is so that SafeStyle's contract is preserved,
159
 * allowing the SafeStyle to correctly be interpreted as a sequence of CSS
160
 * declarations and without affecting the syntactic structure of any
161
 * surrounding CSS and HTML.
162
 *
163
 * This method performs basic sanity checks on the format of {@code style}
164
 * but does not constrain the format of {@code name} and {@code value}, except
165
 * for disallowing tag characters.
166
 *
167
 * @param {!goog.string.Const} style A compile-time-constant string from which
168
 *     to create a SafeStyle.
169
 * @return {!goog.html.SafeStyle} A SafeStyle object initialized to
170
 *     {@code style}.
171
 */
172
goog.html.SafeStyle.fromConstant = function(style) {
173
  var styleString = goog.string.Const.unwrap(style);
174
  if (styleString.length === 0) {
175
    return goog.html.SafeStyle.EMPTY;
176
  }
177
  goog.html.SafeStyle.checkStyle_(styleString);
178
  goog.asserts.assert(
179
      goog.string.endsWith(styleString, ';'),
180
      'Last character of style string is not \';\': ' + styleString);
181
  goog.asserts.assert(
182
      goog.string.contains(styleString, ':'),
183
      'Style string must contain at least one \':\', to ' +
184
          'specify a "name: value" pair: ' + styleString);
185
  return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(
186
      styleString);
187
};
188

189

190
/**
191
 * Checks if the style definition is valid.
192
 * @param {string} style
193
 * @private
194
 */
195
goog.html.SafeStyle.checkStyle_ = function(style) {
196
  goog.asserts.assert(
197
      !/[<>]/.test(style), 'Forbidden characters in style string: ' + style);
198
};
199

200

201
/**
202
 * Returns this SafeStyle's value as a string.
203
 *
204
 * IMPORTANT: In code where it is security relevant that an object's type is
205
 * indeed {@code SafeStyle}, use {@code goog.html.SafeStyle.unwrap} instead of
206
 * this method. If in doubt, assume that it's security relevant. In particular,
207
 * note that goog.html functions which return a goog.html type do not guarantee
208
 * the returned instance is of the right type. For example:
209
 *
210
 * <pre>
211
 * var fakeSafeHtml = new String('fake');
212
 * fakeSafeHtml.__proto__ = goog.html.SafeHtml.prototype;
213
 * var newSafeHtml = goog.html.SafeHtml.htmlEscape(fakeSafeHtml);
214
 * // newSafeHtml is just an alias for fakeSafeHtml, it's passed through by
215
 * // goog.html.SafeHtml.htmlEscape() as fakeSafeHtml
216
 * // instanceof goog.html.SafeHtml.
217
 * </pre>
218
 *
219
 * @see goog.html.SafeStyle#unwrap
220
 * @override
221
 */
222
goog.html.SafeStyle.prototype.getTypedStringValue = function() {
223
  return this.privateDoNotAccessOrElseSafeStyleWrappedValue_;
224
};
225

226

227
if (goog.DEBUG) {
228
  /**
229
   * Returns a debug string-representation of this value.
230
   *
231
   * To obtain the actual string value wrapped in a SafeStyle, use
232
   * {@code goog.html.SafeStyle.unwrap}.
233
   *
234
   * @see goog.html.SafeStyle#unwrap
235
   * @override
236
   */
237
  goog.html.SafeStyle.prototype.toString = function() {
238
    return 'SafeStyle{' + this.privateDoNotAccessOrElseSafeStyleWrappedValue_ +
239
        '}';
240
  };
241
}
242

243

244
/**
245
 * Performs a runtime check that the provided object is indeed a
246
 * SafeStyle object, and returns its value.
247
 *
248
 * @param {!goog.html.SafeStyle} safeStyle The object to extract from.
249
 * @return {string} The safeStyle object's contained string, unless
250
 *     the run-time type check fails. In that case, {@code unwrap} returns an
251
 *     innocuous string, or, if assertions are enabled, throws
252
 *     {@code goog.asserts.AssertionError}.
253
 */
254
goog.html.SafeStyle.unwrap = function(safeStyle) {
255
  // Perform additional Run-time type-checking to ensure that
256
  // safeStyle is indeed an instance of the expected type.  This
257
  // provides some additional protection against security bugs due to
258
  // application code that disables type checks.
259
  // Specifically, the following checks are performed:
260
  // 1. The object is an instance of the expected type.
261
  // 2. The object is not an instance of a subclass.
262
  // 3. The object carries a type marker for the expected type. "Faking" an
263
  // object requires a reference to the type marker, which has names intended
264
  // to stand out in code reviews.
265
  if (safeStyle instanceof goog.html.SafeStyle &&
266
      safeStyle.constructor === goog.html.SafeStyle &&
267
      safeStyle.SAFE_STYLE_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_ ===
268
          goog.html.SafeStyle.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_) {
269
    return safeStyle.privateDoNotAccessOrElseSafeStyleWrappedValue_;
270
  } else {
271
    goog.asserts.fail('expected object of type SafeStyle, got \'' +
272
        safeStyle + '\' of type ' + goog.typeOf(safeStyle));
273
    return 'type_error:SafeStyle';
274
  }
275
};
276

277

278
/**
279
 * Package-internal utility method to create SafeStyle instances.
280
 *
281
 * @param {string} style The string to initialize the SafeStyle object with.
282
 * @return {!goog.html.SafeStyle} The initialized SafeStyle object.
283
 * @package
284
 */
285
goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse = function(
286
    style) {
287
  return new goog.html.SafeStyle().initSecurityPrivateDoNotAccessOrElse_(style);
288
};
289

290

291
/**
292
 * Called from createSafeStyleSecurityPrivateDoNotAccessOrElse(). This
293
 * method exists only so that the compiler can dead code eliminate static
294
 * fields (like EMPTY) when they're not accessed.
295
 * @param {string} style
296
 * @return {!goog.html.SafeStyle}
297
 * @private
298
 */
299
goog.html.SafeStyle.prototype.initSecurityPrivateDoNotAccessOrElse_ = function(
300
    style) {
301
  this.privateDoNotAccessOrElseSafeStyleWrappedValue_ = style;
302
  return this;
303
};
304

305

306
/**
307
 * A SafeStyle instance corresponding to the empty string.
308
 * @const {!goog.html.SafeStyle}
309
 */
310
goog.html.SafeStyle.EMPTY =
311
    goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse('');
312

313

314
/**
315
 * The innocuous string generated by goog.html.SafeUrl.create when passed
316
 * an unsafe value.
317
 * @const {string}
318
 */
319
goog.html.SafeStyle.INNOCUOUS_STRING = 'zClosurez';
320

321

322
/**
323
 * Mapping of property names to their values.
324
 * @typedef {!Object<string, goog.string.Const|string>}
325
 */
326
goog.html.SafeStyle.PropertyMap;
327

328

329
/**
330
 * Creates a new SafeStyle object from the properties specified in the map.
331
 * @param {goog.html.SafeStyle.PropertyMap} map Mapping of property names to
332
 *     their values, for example {'margin': '1px'}. Names must consist of
333
 *     [-_a-zA-Z0-9]. Values might be strings consisting of
334
 *     [-,.'"%_!# a-zA-Z0-9], where " and ' must be properly balanced.
335
 *     Other values must be wrapped in goog.string.Const. Null value causes
336
 *     skipping the property.
337
 * @return {!goog.html.SafeStyle}
338
 * @throws {Error} If invalid name is provided.
339
 * @throws {goog.asserts.AssertionError} If invalid value is provided. With
340
 *     disabled assertions, invalid value is replaced by
341
 *     goog.html.SafeStyle.INNOCUOUS_STRING.
342
 */
343
goog.html.SafeStyle.create = function(map) {
344
  var style = '';
345
  for (var name in map) {
346
    if (!/^[-_a-zA-Z0-9]+$/.test(name)) {
347
      throw Error('Name allows only [-_a-zA-Z0-9], got: ' + name);
348
    }
349
    var value = map[name];
350
    if (value == null) {
351
      continue;
352
    }
353
    if (value instanceof goog.string.Const) {
354
      value = goog.string.Const.unwrap(value);
355
      // These characters can be used to change context and we don't want that
356
      // even with const values.
357
      goog.asserts.assert(!/[{;}]/.test(value), 'Value does not allow [{;}].');
358
    } else if (!goog.html.SafeStyle.VALUE_RE_.test(value)) {
359
      goog.asserts.fail(
360
          'String value allows only [-,."\'%_!# a-zA-Z0-9], rgb() and ' +
361
          'rgba(), got: ' + value);
362
      value = goog.html.SafeStyle.INNOCUOUS_STRING;
363
    } else if (!goog.html.SafeStyle.hasBalancedQuotes_(value)) {
364
      goog.asserts.fail('String value requires balanced quotes, got: ' + value);
365
      value = goog.html.SafeStyle.INNOCUOUS_STRING;
366
    }
367
    style += name + ':' + value + ';';
368
  }
369
  if (!style) {
370
    return goog.html.SafeStyle.EMPTY;
371
  }
372
  goog.html.SafeStyle.checkStyle_(style);
373
  return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(
374
      style);
375
};
376

377

378
/**
379
 * Checks that quotes (" and ') are properly balanced inside a string. Assumes
380
 * that neither escape (\) nor any other character that could result in
381
 * breaking out of a string parsing context are allowed;
382
 * see http://www.w3.org/TR/css3-syntax/#string-token-diagram.
383
 * @param {string} value Untrusted CSS property value.
384
 * @return {boolean} True if property value is safe with respect to quote
385
 *     balancedness.
386
 * @private
387
 */
388
goog.html.SafeStyle.hasBalancedQuotes_ = function(value) {
389
  var outsideSingle = true;
390
  var outsideDouble = true;
391
  for (var i = 0; i < value.length; i++) {
392
    var c = value.charAt(i);
393
    if (c == "'" && outsideDouble) {
394
      outsideSingle = !outsideSingle;
395
    } else if (c == '"' && outsideSingle) {
396
      outsideDouble = !outsideDouble;
397
    }
398
  }
399
  return outsideSingle && outsideDouble;
400
};
401

402

403
// Keep in sync with the error string in create().
404
/**
405
 * Regular expression for safe values.
406
 *
407
 * Quotes (" and ') are allowed, but a check must be done elsewhere to ensure
408
 * they're balanced.
409
 *
410
 * ',' allows multiple values to be assigned to the same property
411
 * (e.g. background-attachment or font-family) and hence could allow
412
 * multiple values to get injected, but that should pose no risk of XSS.
413
 *
414
 * The rgb() and rgba() expression checks only for XSS safety, not for CSS
415
 * validity.
416
 * @const {!RegExp}
417
 * @private
418
 */
419
goog.html.SafeStyle.VALUE_RE_ =
420
    /^([-,."'%_!# a-zA-Z0-9]+|(?:rgb|hsl)a?\([0-9.%, ]+\))$/;
421

422

423
/**
424
 * Creates a new SafeStyle object by concatenating the values.
425
 * @param {...(!goog.html.SafeStyle|!Array<!goog.html.SafeStyle>)} var_args
426
 *     SafeStyles to concatenate.
427
 * @return {!goog.html.SafeStyle}
428
 */
429
goog.html.SafeStyle.concat = function(var_args) {
430
  var style = '';
431

432
  /**
433
   * @param {!goog.html.SafeStyle|!Array<!goog.html.SafeStyle>} argument
434
   */
435
  var addArgument = function(argument) {
436
    if (goog.isArray(argument)) {
437
      goog.array.forEach(argument, addArgument);
438
    } else {
439
      style += goog.html.SafeStyle.unwrap(argument);
440
    }
441
  };
442

443
  goog.array.forEach(arguments, addArgument);
444
  if (!style) {
445
    return goog.html.SafeStyle.EMPTY;
446
  }
447
  return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(
448
      style);
449
};
450

451