Is there the a way to prevent HTML escaping inside

2019-05-06 03:43发布

问题:

This question already has an answer here:

  • How can I bind a text which contains url as html 1 answer

My colleague Patrick & I currently converting an autocomplete component from Web UI to Polymer.dart.In Web UI we provided a HTML rendered list to the autocomplete in order to give a programmer the opportunity to style the results. Based on the input's value we filtered the list and displayed the matching results.

What would you recommend to achieve the same behaviour in Polymer.dart? Should we approach this completly differently?

Old Web UI code:

<template iterate="entry in filteredEntries">
  <li class="b-autocomplete-results-li">{{ entry.sanitizedHtml }}</li>
</template>

Class for one entry:

class AutocompleteEntry {

  final String id;
  final String searchableText;
  final Element _element;

  AutocompleteEntry(this.id, this.searchableText, this._element) {
    // remove the data-id and data-text since we don't need them in the html
    _element.dataset.remove('text');
    _element.dataset.remove('id');
  }

  get sanitizedHtml {
    var validator = new NodeValidatorBuilder()..allowHtml5();
    var documentFragment = document.body.createFragment(_element.outerHtml, validator: validator);
    return documentFragment;
  }
}

回答1:

Update

A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html


No there isn't. This is intentional because it is prone to XSS attacks. What you can do is to use an element like <safe-html> instead.

My answer to this question HTML Tags Within Internationalized Strings In Polymer.dart shows the full source code.