如何將HTML注入到聚合物模板中

我正在使用polymer-jsonp來執行JSONP請求，但響應有時包含html。如何將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>

來源

2014-03-05 Tachun Lin

你可以很容易做到：

> http://stackoverflow.com/questions/30678307/polymer-1-0-how-to-bind-html-value（彼得）使用Flickr的API JSONP斯科特的技術 –

聚合物不會通過數據綁定標記未轉義的HTML，因爲它會成爲XSS攻擊的漏洞。

目前正在談論如何在有限的情況下對HTML進行標記，或允許進行自定義過濾，但這尚未在數據層實現。

可以使用一個額外的自定義元素來做你想做的事情，但是如果你將不可信的HTML渲染到你的頁面中，可能會發生壞事發生的可能性。

下面是一個例子，顯示了這種方法：

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

來源

2014-03-05 20:20:38

例和''：http://jsbin.com/zoduhoqu/1/edit – ebidel

juicy-html也容易受到XSS攻擊？我想答案是肯定的，但只是檢查@Scott – saurshaz

，你能否更多地評論這個工作需要額外的元素？ – user1463822

對於那些尋找聚合物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>

來源

2015-09-12 05:56:48 wener

請記住，由於綁定是在預渲染時間靜態計算的，因此您的命令聲明（如[[foo]]或{{bar}}）將不會在您的新html中起作用，因爲它們會添加後渲染。 –

我們如何在這個方法中調用post render？ –

'this.innerHTML = postProcess（neo）;'這是否適合你？@Ali.MD – wener

如果你確定這是你想要做什麼，只要使用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.dom在聚合物2.0被刪除，但。

來源

2017-04-05 09:50:37

如何將HTML注入到聚合物模板中

回答

相關問題