Rendering a long text field that contains html tags on a template

Questions
1

Hi all,

Currently I have a base64 code stored in a field along with html tags. For example, . That is the data that is in the field. When I try to place this field {{fieldname}} and allow html. It just comes out as text. I can’t call the image externally like this. because the text inside already contains the img src tag. Has anyone ever ran into this or does anyone have any idea how I could solve this? I’ve also tried with 3 mustaches instead of 2 and I assume I could possibly call a javascript snippet but I’m unsure if that would work or if that’s possible.

Thanks,

P.S. The base64 code inside works fine in an external source outside of skuid.

2

Hi Kyle, just to clarify - did you try  allowing HTML and 3 mustaches  without the external html tag, i.e. just {{{fieldname}}} as the content of your template?

Because in theory in that case the field output would be raw code, but since the template is allowing html it would render not as code but as the finished product (it may be weird in the Composer, but preview to make sure). 

3

Hi Anna, 

Thanks for the reply and yes I did what you suggested. Strangely enough it’s not showing the image even though the html tag is included in the field. It just comes out as text. I’ve tried it with extra tags around and without. I’ve also tried 2 mustaches and 3 mustaches. The template isn’t spitting out the html, just the text with the proper html tags in place. 

4

): Okay, thanks.  I’m looking into it and will let you know what I figure out (e.g. whether this is an expected outcome and/or a bug).

5

I spoke to one of our product engineers and have a clearer idea of what’s going on.  The reason the HTML field isn’t working probably has to do with the way Skuid security is set up (to protect against XSS attacks)

One thing you can do is to use the javascript console in your browser to pull up the model and field in question and see what’s going on and if the HTML in the field is getting stripped out. You can use the decodeHTML method described here. 

6

Thanks Anna, I’ll look into this!

7

no problem, keep us posted!

8

So I just wanted to come back to this and show how we sovled for it. 


$(document.body).one(‘pageload’, function() {   imgPopulate(skuid);
   var $ = skuid.$;


   function imgPopulate(skuid) {
     var $ = skuid.$;


     var model = skuid.model.getModel(‘Signer’),
       row = model.getFirstRow(),
       sigField = row.Signature__c;

     var img = $(“#imageSource”);


     img.html(sigField);


     img.children().css(“height”, “200px”).css(“width”, “75%”);

     console.log(“image populate”);

   }

 });


Thanks all for your time!

9

Thank you for sharing your solution!

10

{{#urlDecode}}{{Test_HTML__c}}{{/urlDecode}}

11

Henry’s syntax worked for me, the urlDecode Global Merge Variable. Documented here:
https://docs.skuid.com/latest/en/skuid/merge-syntax/global-merge-variables.html

12

For those who come later: this behavior of urlDecode was patched as of 12.0. It presented an unintended XSS vulnerability we wanted to protect our customers from.

We are researching better ways we can offer a supported method of inserting raw HTML for both V1 and V2, but in the interim if you are in a V1 skuid page our recommendation is to achieve similar behavior with a custom renderer for that field in V1 (see below for the custom render code you can use)

var field = arguments[0],
    // Note: The value below (arguments[1]) will be HTML-escaped, since this is what is returned in the snippet.
    // If you want the unescaped value, use model.getFieldValue(fieldId, row, noEscape) with noEscape set to true (see below)
    // value = arguments[1],
    fieldId = field.id,
    model = field.model,
    row = field.row,
    element = field.element,
    mode = field.mode,
 fieldValue = model.getFieldValue(row, fieldId, true), // The third argument here is noEscape. Setting it to true specifies that we DON'T want an HTML-escaped result for the model field value
 uriDecodedValue = decodeURIComponent(fieldValue); element.html(uriDecodedValue);```