CODEWITHSUNDEEP
javascriptjsonpolymer
Tachun Lin
Tachun Lin

Reputation: 972

How to inject HTML into a template with polymer

I'm using polymer-jsonp to perform JSONP requests, but the response sometimes contains html.

For example, supposing that post.content is "<strong>Foo</strong> bar", how can I display {{post.content}} such that "Foo" is in bold? 

<polymer-element name="feed-element" attributes="">
  <template>
    <template repeat="{{post in posts.feed.entry}}">
      <p>{{post.content}}</p>
    </template>
    <polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp>
  </template>
  <script>
    Polymer('feed-element', {
      created: function() { },
      attached: function() { },
      detached: function() { },
      attributeChanged: function(attrName, oldVal, newVal) { }
    });
  </script>
</polymer-element>

Upvotes: 17

Views: 15097

Answers (3)

Jacob Phillips
Jacob Phillips

Reputation: 9264

If you're sure it is what you want to do, just use innerHTML.

_renderHtml: function(html) {
  this.$.dynamicHtmlContainer.innerHTML = html;
}

Or to dynamically add a shadow-dom child:

_renderHtml: function(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  Polymer.dom(this).appendChild(div);
}

I think Polymer.dom is being removed in Polymer 2.0 though.

Upvotes: 2

wener
wener

Reputation: 7740

For those look for polymer 1.0

<dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'html-echo',
      properties: {
        html: {
          type: String,
          observer: '_htmlChanged'
        }
      },
      _htmlChanged: function (neo) {
        // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
        this.innerHTML = neo;
      }
    });
  })();
</script>

Upvotes: 9

Scott Miles
Scott Miles

Reputation: 11027

Polymer will not stamp unescaped HTML via data-binding because it becomes a vulnerability for XSS attacks.

There are talks ongoing about making it possible to stamp HTML under limited circumstance, or to allow for customized filtering, but this is not implemented yet at the data layer.

It is possible to do what you want today using an additional custom element, but again, be advised of the potential for bad things to happen if you render untrusted HTML into your page.

Here is an example that shows this technique:

http://jsbin.com/durajiwo/1/edit

Upvotes: 14

Related Questions