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>
Polymerは、XSS攻撃の脆弱性になるため、データバインディングを介してエスケープされていないHTMLをスタンプしません。
限られた状況下でHTMLにスタンプを付けること、またはカスタマイズされたフィルタリングを可能にすることについての話し合いが進行中ですが、これはデータレイヤーではまだ実装されていません。
追加のカスタム要素を使用して、今日やりたいことを実行することは可能ですが、信頼できないHTMLをページにレンダリングすると、悪いことが起こる可能性があることに注意してください。
この手法を示す例を次に示します。
それらのために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>
それがあなたのやりたいことであると確信している場合は、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では削除されます。