Form html entities not rendering as expected

[BrentH]

<input type="text" value="x&lt;y" />
<textarea>x&lt;y</textarea>

The two above standard html input or textarea render html entities values as x<y

If I data-link input or textarea then these render as x<y (not expected).

val="x<y"
<input type="text" data-link="val" /> or <input type="text" data-link="{:val}" />
<textarea data-link="val"></textarea>

I tried using a converter using $.parseHTML()...but that returns an object which cannot be used.

Is this by design or am I simply missing something?

Is there anyway to render html entities like x<y without attaching a html editing widget (which is overkill here)?

Thanks

[BrentH]

Update to my previous post. I have decided to never encode html when storing in db, as this affects length and makes queries more difficult. But, I thought x<y would render the same using data-link like a plain input/textarea element...x<y...I guess we would need something like data-link="{{>data}}" for it to render that way.

Thanks,

[Boris Moore]

You have the choice between making your client-side data strings encode some characters - and specifically <, >, & - or not. If you decide to encode those characters then you have the separate question of whether to encode them also on the server (and if not, then you will need to unencode when sending to the server, and encode again when fetching).

On the client if you provide user editing of strings through data-linked inputs etc. then the choice is:

• Don't encode, but never use {^{:someValue}} to display strings. Instead use {^{>someValue}} or <span data-link="someValue">, or for two-way: <input data-link="someValue"/>, for example...
• Encode, and use {^{:someValue}} or <span data-link="{unencode:someValue}" or <input data-link="{unencode:someValue:encode"/>, etc.

The converters can be the following:

$.views.converters({
  encode: function dataEncode(text) {
    // Encode just < > and & - intended for 'safe data' along with {{:}} rather than {{>}}
    return text != undefined ? text.replace(/[&<>]/g, function(token) { 
      return encodeEnts[token]; 
    }) : "";
  },

  unencode: function(text) {
  // Unencode just < > and & - intended for 'safe data' along with {{:}} rather than {{>}}
  return text != undefined ? text.replace(/&(amp|gt|lt);/g, function(match, token) { 
    return unencodeEnts[token]; 
  }) : "";
  }
});

Your post here made me look more closely at encoding and related XSS or other security issue when users can enter markup strings... I will post back here with an update on this...

Note that the setting of content on a textarea or input is either through markup - in which case encoding of > etc. is required: <input value="&gt;"/> or programmatic in which case you are not within HTML markup, so setting input.value = ">" is correct, and using the HTML character entity is incorrect.

[Boris Moore]

The next update will include the above encode and unencode converters, to facilitate secure approaches to inserting and removing HTML data from users/the server. Marking this as feature request.

[BrentH]

Thanks Boris, that will be much more convenient.

[Boris Moore]

This has been fixed in release v0.9.91.