Displaying chevrons etc in data

[ajcsParticipant]

In a grid cell if I have chevrons in the data it does not display the text between.

So I thought I needed to html encode it but get unpredictable results.

See your demo here that I have modified:
demo

You can see that I have changed the names of the first 3 firstNames

When you run it (a few times to get those names to maybe appear) you will see literal html encodings. If you sort the First name column a few times they then display correctly.

So is this a bug and how do I ensure that any text in the data is displayed literally correctly?

Thanks

[MartinParticipant]

Hello ajcs,

I would suggest you use the cellsrenderer property of the column in order to display the escaped characters properly.

Please, check the updated Example.

Best Regards,
Martin Yotov

jQWidgets Team
https://www.jqwidgets.com/

[ajcsParticipant]

Can you please explain how your modified example is working because the cellsrenderer is not doing any extra processing. Just returning the value passed to it. So how is this different than just binding to the data field:

cellsrenderer: (row, columnfield, value) => {
return value;
}

All of this is important for XSS protection because what if someone enters a script into a data value. Your other controls such as text input field seem to cope with this ok without me having to Html encode the data.

XSS is a big topic and it would be useful if you one have an article explaining how your controls are affected by it and which ones may need Html encoding or not.

[MartinParticipant]

Hello ajsc,

Thank you for the feedback! XSS prevention is built-in in our jqxGrid.
The cellsrenderer callback returns a string that is interpreted by the grid as html, that is why it displays the characters correctly.

Best Regards,
Martin Yotov

jQWidgets Team
https://www.jqwidgets.com/

[ajcsParticipant]

I have found in cellsrenderer it is no good to just return the value because it will not be aligned in the row. You must return something like a div with something like margin: 5px.

Also if you don’t return a div and just return the value it seems to display safely but if you refresh your data it will end up running an embedded potential XSS script. I tried to make a demo of this but I can’t seem to embed the script in JSFiddle or even type it in here without it getting mangled.

So it only seems safe if you return a div.

Rather than make me create a div with formatting etc it would have been better for you to have provided a boolean switch on the column specifying to HTML encode the data value or not.

[Yavor DashevParticipant]

Hi acjs,

Yes, I completely agree that returning just the value is not the best way to do it and it’s always best to wrap it in a element.
The position is not the same as the default of content because cellsrenderer overrides the default rendering of the cell and the downturn is that the developer has to position it depending on the needs.

I will discuss the property you mentioned about the rendering and we may consider it for future development/improvement/enchancment.

Thank you for your feedback!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts