Wie HTML in eine Vorlage mit Polymer injizieren

Ich verwende Polymer-Jsonp, um JSONP-Anforderungen durchzuführen, aber die Antwort enthält manchmal HTML.Wie HTML in eine Vorlage mit Polymer injizieren

Angenommen, dass post.content "<strong>Foo</strong> bar" ist, wie kann ich {{post.content}} so anzeigen, dass "Foo" fett gedruckt ist?

Quelle

2014-03-05 Tachun Lin

Sie könnten einfach tun:

> http://stackoverflow.com/questions/30678307/polymer-1-0-how-to-bind-html-value (Peter) –

Polymer stempelt HTML nicht über HTML-Daten, da es eine Sicherheitsanfälligkeit für XSS-Angriffe darstellt.

Es gibt Gespräche darüber, HTML unter bestimmten Umständen stempeln zu können, oder um benutzerdefinierte Filterung zu ermöglichen, aber dies ist noch nicht auf der Datenschicht implementiert.

Es ist möglich, mit einem zusätzlichen benutzerdefinierten Element das zu tun, was Sie heute möchten, aber Sie sollten erneut darauf hingewiesen werden, dass schlechte Dinge passieren können, wenn Sie nicht vertrauenswürdiges HTML in Ihre Seite rendern. Hier

ist ein Beispiel, das diese Technik zeigt:

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

Quelle

2014-03-05 20:20:38

Beispiel für Technik Scott JSONP API unter Verwendung von Flickr und '': http://jsbin.com/zoduhoqu/1/edit – ebidel

Ist Juicy-html auch anfällig für XSS-Angriffe? Ich denke, die Antwort ist positiv, aber überprüfen Sie einfach – saurshaz

@Scott, können Sie mehr über die Notwendigkeit für zusätzliche Element für diese Arbeit kommentieren? – user1463822

Für diejenigen, sucht 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>

Quelle

2015-09-12 05:56:48 wener

Da die Bindung statisch zur Zeit vor dem Rendern berechnet wird, funktionieren Ihre imperativen Deklarationen wie '[[foo]]' oder '{{bar}}' in Ihrem neuen HTML nicht, da sie nach dem Rendern hinzugefügt wurden. –

Wie können wir post in dieser Methode rendern rendern? –

'this.innerHTML = postProcess (neo);' passt das zu dir [email protected] – wener

Wenn Sie sicher sind, es ist das, was Sie tun möchten, benutzen Sie einfach innerHTML.

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

Oder, um dynamisch ein Schatten-dom Kind hinzufügen:

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

Ich denke Polymer.dom obwohl in Polymer entfernt wird 2,0.

Quelle

2017-04-05 09:50:37

Wie HTML in eine Vorlage mit Polymer injizieren

Antwort

Verwandte Themen