Dart Removing disallowed attribute after editor upgraded

Question

I have encounter error "Removing disallowed attribute" after I upgraded my dart editor in SDK 0.7.3.1_r27487.

I have a custom tag which template contains boostarp attributes "data-target" and "data-toggle". It work under previous version but encounter error after upgraded.

Console

Removing disallowed attribute <A data-toggle="dropdown">
Removing disallowed attribute <BUTTON data-target=".navbar-collapse">
Removing disallowed attribute <BUTTON data-toggle="collapse">

.html Code

<element extends="div" name="x-navbar" constructor="Navbar">
<template>    
  ..
  <a name="top" href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
  ..
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
</template>
<script type="application/dart" src="custom_ui.dart"></script> 
</element>

Answer 1

You're probably using Element.innerHtml. You should use Element.setInnerHtml instead.

As you can see with the parameters of this new method, the HTML code is now validated and filtered. To restore the old behavior, you must provide a validator or a tree sanitizer allowing all attributes.

To explicitly allow "data" on anchors and buttons:

// Call NodeValidatorBuilder.allowX() methods to customize the validator.

final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common()
  ..allowElement('a', attributes: ['data-target', 'data-toggle'])
  ..allowElement('button', attributes: ['data-target', 'data-toggle']);

query('#anElement').setInnerHtml('a content', validator: _htmlValidator);

Element and CustomElement classes use HTML sanitization in several places (Element.html factory, innerHtml property, createFragment method...).

Even if you don't use these methods directly in your own code, they're called by the underlying Dart libraries (CustomElement class was created for Polymer library but is also used by latest releases of Web UI library).

For the moment, there is NO way to globally disable or customize the default sanitization rules. So I guess you'll have to deal with setInnerHtml calls... or wait for another SDK release to fix the issue ("data-" attributes are valid HTML5 code, but the default sanitization filter doesn't allow them as well as inline styles: why these attributes are considered insecure?).

Note: you should consider switching from Web UI to Polymer, as Web UI is now deprecated.

Answer 2

For those who are working with angular dart, you will have to reimplement the NgDirective with custom validations like so:

library ng_bind_html_unsafe;

import 'dart:html' as dom;
import 'package:angular/angular.dart';

@NgDirective(
    selector: '[ng-bind-html-unsafe]',
    map: const {'ng-bind-html-unsafe': '=>value'}    )
class NgBindHtmlUnsafeDirective{
  final dom.Element element;

  NgBindHtmlUnsafeDirective(this.element);

  set value(value) => element.setInnerHtml(value == null ? '' : value.toString(),
                                             validator: new dom.NodeValidatorBuilder()
                                             ..allowHtml5()
                                             ..allowElement('a', attributes: ['href'])
                                             ..allowElement('img', attributes: ['src']));
}

In that specific example, I am allowing links and pictures without any sanitization you can extend this however you'd like.

Answer 3

In Angular 0.9.9 ng-bind-html supports custom NodeValidators.

Just register a factory that returns a customized NodeValidator like shown in the other answers

factory(NodeValidator, (Injector inj) => getNodeValidator());

and ng-bind-html will use this NodeValidator.

I found that the HTML included this way isn't processed by Angular (any directives/components/expressions are ignored).

When I need this I use a custom bind-html directive like shown by @mabounassif with this additional code in the value setter after element.setInnerHtml

if(value != null) {
  _compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes);
}

see also https://github.com/angular/angular.dart/issues/742