如何使用聚合物将HTML注入模板

Question

我正在使用polymer-jsonp来执行JSONP请求,但响应有时包含html.

例如,假设post.content是"<strong>Foo</strong> bar",我如何"Foo"以粗体显示{{post.content}} ？

<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>

Answer 1

Polymer不会通过数据绑定标记未转义的HTML,因为它会成为XSS攻击的漏洞.

目前正在讨论如何在有限的环境下标记HTML,或允许自定义过滤,但这尚未在数据层实现.

现在可以使用其他自定义元素执行您想要的操作,但同样,如果您将不受信任的HTML呈现到页面中,请注意可能会发生不良事件.

这是一个显示此技术的示例:

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

Answer 2

对于那些寻找聚合物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>