First rev of Safe DOM

tools/dom/templates/html/impl/impl_Element.darttemplate

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of $LIBRARYNAME;
 
 class _ChildrenElementList extends ListBase<Element> {
   // Raw Element.
   final Element _element;
   final HtmlCollection _childElements;
@@ skipping 217 matching lines @@
    *
    * Important: the contents of [html] should not contain any user-supplied
    * data. Without strict data validation it is impossible to prevent script
    * injection exploits.
    *
    * It is instead recommended that elements be constructed via [Element.tag]
    * and text be added via [text].
    *
    *     var element = new Element.html('<div class="foo">content</div>');
    */
-  factory $CLASSNAME.html(String html) =>
-      _$(CLASSNAME)FactoryProvider.createElement_html(html);
+  factory Element.html(String html,
+      {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) {
+    var fragment = document.body.createFragment(html, validator: validator,
+        treeSanitizer: treeSanitizer);
+    return fragment.nodes.where((e) => e is Element).single;
+  }
 
   /**
    * Creates the HTML element specified by the tag name.
    *
    * This is similar to [Document.createElement].
    * [tag] should be a valid HTML tag name. If [tag] is an unknown tag then
    * this will create an [UnknownElement].
    *
    *     var divElement = new Element.tag('div');
    *     print(divElement is DivElement); // 'true'
@@ skipping 667 matching lines @@
   @Experimental
   bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
 
   void _ensureTemplate() {
     if (!isTemplate) {
       throw new UnsupportedError('$this is not a template.');
     }
     TemplateElement.decorate(this);
   }
 
+  /**
+   * Create a DocumentFragment from the HTML fragment and ensure that it follows
+   * the sanitization rules specified by the validator or treeSanitizer.
+   *
+   * If the default validation behavior is too restrictive then a new
+   * NodeValidator should be created, either extending or wrapping a default
+   * validator and overriding the validation APIs.
+   *
+   * The treeSanitizer is used to walk the generated node tree and sanitize it.
+   * A custom treeSanitizer can also be provided to perform special validation
+   * rules but since the API is more complex to implement this is discouraged.
+   *
+   * The returned tree is guaranteed to only contain nodes and attributes which
+   * are allowed by the provided validator.
+   *
+   * See also:
+   *
+   * * [NodeValidator]
+   * * [NodeTreeSanitizer]
+   */
+  DocumentFragment createFragment(String html,
+      {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) {
+
+    if (treeSanitizer == null) {
+      if (validator == null) {
+        validator = new NodeValidatorBuilder.common();
+      }
+      treeSanitizer = new NodeTreeSanitizer(validator);
+    }
+
+    return _ElementFactoryProvider._parseHtml(this, html, treeSanitizer);
+  }
+
+  void set innerHtml(String html) {
+    this.setInnerHtml(html);
+  }
+
+  void setInnerHtml(String html,
+    {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) {
+    text = null;
+    append(createFragment(
+        html, validator: validator, treeSanitizer: treeSanitizer));
+  }
+
+  String get innerHtml => deprecatedInnerHtml;
+
 $!MEMBERS
 }
 
 
-final _START_TAG_REGEXP = new RegExp('<(\\w+)');
 class _ElementFactoryProvider {
-  static const _CUSTOM_PARENT_TAG_MAP = const {
-    'body' : 'html',
-    'head' : 'html',
-    'caption' : 'table',
-    'td': 'tr',
-    'th': 'tr',
-    'colgroup': 'table',
-    'col' : 'colgroup',
-    'tr' : 'tbody',
-    'tbody' : 'table',
-    'tfoot' : 'table',
-    'thead' : 'table',
-    'track' : 'audio',
-  };
 
-  @DomName('Document.createElement')
-  static Element createElement_html(String html) {
-    // TODO(jacobr): this method can be made more robust and performant.
-    // 1) Cache the dummy parent elements required to use innerHTML rather than
-    //    creating them every call.
-    // 2) Verify that the html does not contain leading or trailing text nodes.
-    // 3) Verify that the html does not contain both <head> and <body> tags.
-    // 4) Detatch the created element from its dummy parent.
-    String parentTag = 'div';
-    String tag;
-    final match = _START_TAG_REGEXP.firstMatch(html);
-    if (match != null) {
-      tag = match.group(1).toLowerCase();
-      if (Device.isIE && Element._TABLE_TAGS.containsKey(tag)) {
-        return _createTableForIE(html, tag);
-      }
-      parentTag = _CUSTOM_PARENT_TAG_MAP[tag];
-      if (parentTag == null) parentTag = 'div';
+  static DocumentFragment _parseHtml(Element context, String html,
+    NodeTreeSanitizer treeSanitizer) {
+
+    var doc = document.implementation.createHtmlDocument('');
+    var contextElement;
+    if (context == null || context is BodyElement) {
+      contextElement = doc.body;
+    } else {
+      contextElement = doc.$dom_createElement(context.tagName);
+      doc.body.append(contextElement);
     }
 
-    final temp = new Element.tag(parentTag);
-    temp.innerHtml = html;
+    if (Range.supportsCreateContextualFragment) {
+      var range = doc.$dom_createRange();
+      range.selectNodeContents(contextElement);
+      var fragment = range.createContextualFragment(html);
 
-    Element element;
-    if (temp.children.length == 1) {
-      element = temp.children[0];
-    } else if (parentTag == 'html' && temp.children.length == 2) {
-      // In html5 the root <html> tag will always have a <body> and a <head>,
-      // even though the inner html only contains one of them.
-      element = temp.children[tag == 'head' ? 0 : 1];
+      treeSanitizer.sanitizeTree(fragment);
+      return fragment;
     } else {
-      _singleNode(temp.children);
+      contextElement.deprecatedInnerHtml = html;
+
+      treeSanitizer.sanitizeTree(contextElement);
+
+      var fragment = new DocumentFragment();
+      while (contextElement.$dom_firstChild != null) {
+        fragment.append(contextElement.$dom_firstChild);
+      }
+      return fragment;
     }
-    element.remove();
-    return element;
-  }
-
-  /**
-   * IE table elements don't support innerHTML (even in standards mode).
-   * Instead we use a div and inject the table element in the innerHtml string.
-   * This technique works on other browsers too, but it's probably slower,
-   * so we only use it when running on IE.
-   *
-   * See also innerHTML:
-   * <http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx>
-   * and Building Tables Dynamically:
-   * <http://msdn.microsoft.com/en-us/library/ie/ms532998(v=vs.85).aspx>.
-   */
-  static Element _createTableForIE(String html, String tag) {
-    var div = new Element.tag('div');
-    div.innerHtml = '<table>$html</table>';
-    var table = _singleNode(div.children);
-    Element element;
-    switch (tag) {
-      case 'td':
-      case 'th':
-        TableRowElement row = _singleNode(table.rows);
-        element = _singleNode(row.cells);
-        break;
-      case 'tr':
-        element = _singleNode(table.rows);
-        break;
-      case 'tbody':
-        element = _singleNode(table.tBodies);
-        break;
-      case 'thead':
-        element = table.tHead;
-        break;
-      case 'tfoot':
-        element = table.tFoot;
-        break;
-      case 'caption':
-        element = table.caption;
-        break;
-      case 'colgroup':
-        element = _getColgroup(table);
-        break;
-      case 'col':
-        element = _singleNode(_getColgroup(table).children);
-        break;
-    }
-    element.remove();
-    return element;
-  }
-
-  static TableColElement _getColgroup(TableElement table) {
-    // TODO(jmesserly): is there a better way to do this?
-    return _singleNode(table.children.where((n) => n.tagName == 'COLGROUP')
-        .toList());
-  }
-
-  static Node _singleNode(List<Node> list) {
-    if (list.length == 1) return list[0];
-    throw new ArgumentError('HTML had ${list.length} '
-        'top level elements but 1 expected');
   }
 
   @DomName('Document.createElement')
 $if DART2JS
   // Optimization to improve performance until the dart2js compiler inlines this
   // method.
   static dynamic createElement_tag(String tag) =>
       // Firefox may return a JS function for some types (Embed, Object).
       JS('Element|=Object', 'document.createElement(#)', tag);
 $else
@@ skipping 11 matching lines @@
   const ScrollAlignment._internal(this._value);
   toString() => 'ScrollAlignment.$_value';
 
   /// Attempt to align the element to the top of the scrollable area.
   static const TOP = const ScrollAlignment._internal('TOP');
   /// Attempt to center the element in the scrollable area.
   static const CENTER = const ScrollAlignment._internal('CENTER');
   /// Attempt to align the element to the bottom of the scrollable area.
   static const BOTTOM = const ScrollAlignment._internal('BOTTOM');
 }