insert html fragment from database

[Marco Stolle]

Hello,

via ajax i get properties of a page, among those properties there are a few already containing html tags. when i include these in my template the page shows the html code instead of rendering it. 

What step am i missing, i presume there is an element for that?

thanks

Marco

[Eric Bidelman]

Can you provide a code snippet of what you're doing?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1d64850a-d018-46a1-8b96-fe570c77a1a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Marco Stolle]

Hello Eric

this element receives properties i got from a database via a parent element via iron-ajax, the 'product.info' property already contains html markup tags ( a piece of html created in the past with an online wysiwyg editor and stored in the database). When i display my page, for the product.info part it shows raw html on the screen instead of rendered html.

<dom-module id="ws-product">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
      div.addToCart {
        border: 1px solid grey;
        padding:5px;
      }
      div.clear {
        clear: both;
      }
    </style>
    <hr>
    <div class="product">
      <h3>{{product.name}}</h3>
      <div class="description">
        <p>{{product.description}}</p>
      </div>
      <div class="info">
        {{product.info}}
      </div>
     </div>
  </template>
  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'ws-product',
        properties: {
          product: {
            name: {
              type: String
            },
            description: {
              type: String
            },
            info: {
              type: String
            }
          }
        }
      });
    })();
  </script>
</dom-module>

Op woensdag 27 januari 2016 17:19:25 UTC+1 schreef Eric Bidelman:

[Karl Tiedt]

Currently polymer has no means of safe html injection but you can use a really dirty hack and set your divs innerHTML property as inner-h-t-m-l="{{producct.info}}" and that should work for now...

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0c2cfd91-c7f5-4a98-9c1d-b5ba0f5a4e64%40googlegroups.com.

[Marco Stolle]

Ok thank you Karl, that did the trick.

Op woensdag 27 januari 2016 18:21:09 UTC+1 schreef Karl Tiedt:

[Eric Bidelman]

Right. Polymer's data binding system prevents common XSS issues. Be cautious with using innerHTML. It opens your app up to XSS attacks.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0b8bd667-3192-452b-a2ea-4194828ee434%40googlegroups.com.

[Chuck Horton]

If you are using basic HTML tags you could try using the marked-element.

[Tomek W]

You can also try juicy-html custom element https://github.com/Juicy/juicy-html
It supports direct HTML binding as well as fetching markup from external URL, plus it gives you simple data-binding that makes `dom-bind` work in your HTML fragments, triggers events on stamp, etc. 

It does the thing in a little less hacky way than inner-H-T-M-L.

Tomek