web-dev-qa-db-ja.com

polymer）を使用してHTMLをテンプレートに挿入する方法

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>
javascriptjsonpolymer
15
Tachun Lin

Polymerは、XSS攻撃の脆弱性になるため、データバインディングを介してエスケープされていないHTMLをスタンプしません。

限られた状況下でHTMLにスタンプを付けること、またはカスタマイズされたフィルタリングを可能にすることについての話し合いが進行中ですが、これはデータレイヤーではまだ実装されていません。

追加のカスタム要素を使用して、今日やりたいことを実行することは可能ですが、信頼できないHTMLをページにレンダリングすると、悪いことが起こる可能性があることに注意してください。

この手法を示す例を次に示します。

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

14
Scott Miles

それらのために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>
9
wener

それがあなたのやりたいことであると確信している場合は、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.domはPolymer 2.0では削除されます。

2
Jacob Phillips