Question

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

例如，假设post.content为"<strong>Foo</strong> bar"，如何显示{{post.content}}以使"Foo"以粗体显示？

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

Answer 3

如果您确定这是您想要做的，请使用innerHTML。

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

或者动态添加shadow-dom孩子：

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

我认为虽然在Polymer 2.0中删除了Polymer.dom。

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

3 个答案: