如何在Polymer模板中插入HTML？

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>

- Tachun Lin

---

你可以轻松地这样做：<div inner-h-t-m-l="{{item.content}}"></div> > https://dev59.com/_4vda4cB1Zd3GeqPca2x (Peter) - Lukas Gottschall

Answer 1

Polymer不会通过数据绑定来盖章未经转义的HTML，因为这会成为XSS攻击的漏洞。

目前有关于在有限情况下盖章HTML或允许自定义过滤的讨论，但这在数据层面上尚未实现。

今天可以使用附加的自定义元素来做到你想要的事情，但请注意，如果将不受信任的HTML呈现到页面中，可能会发生一些糟糕的事情。

以下是一个演示此技术的示例：

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

- Scott Miles

---

Scott使用Flickr的jsonp API和<polymer-jsonp>技术的示例：http://jsbin.com/zoduhoqu/1/edit - ebidel

果汁 HTML 是否也容易遭受 XSS 攻击？我猜答案是肯定的，但只是确认一下。 - saurshaz

@Scott，你能对需要额外元素的必要性进行更多评论吗？ - user1463822

您不需要使用额外的元素。 您始终可以只执行 this.innerHTML = ...。 这个想法是，我们不能允许您直接将数据绑定到HTML，除非您有意进入危险区域。 有些人使用预处理程序来明确禁止innerHTML，其他团队则要求输入过滤器。 有许多解决方案，我们可以在这个领域做出改进。 - Scott Miles

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>

- wener

---

请注意，由于绑定是在预渲染时静态计算的，因此您的命令式声明，例如 [[foo]] 或 {{bar}}，将无法在新的 HTML 中工作，因为它们是在渲染后添加的。 - AP.

我们如何在这个方法中调用 post render？ - S. Ali Mihandoost

这个程序相关的内容翻译成中文：this.innerHTML = postProcess(neo); 这对你来说合适吗？@Ali.MD - wener

我认为在Polymer 1.0中，<style>标签应该放在<template>标签内部，但除此之外，我希望我能够两次点赞这个答案。你节省了我很多痛苦，谢谢你。 - codeMonkey

Answer 3

如果你确定这就是你想要做的事情，只需使用 innerHTML。

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

或者动态添加一个影子DOM子元素：

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

我认为在 Polymer 2.0 中，Polymer.dom 将被移除。

- Jacob Phillips