Column Header

Tags: #<Tag:0x00007efc5f85f3d8>
#1

In our application, in some of our column headers we have added links that have an “onclick” attribute.
This functionality used to work fine until I upgraded to handsontable.8.2.0. It appears to be sanitized so it is removed from the rendered html.

Is there a way I can stop the column headers being santized?

eg:
<div class="relative"><span class="colHeader columnSorting sortAction"><a id="ec-1-25" class="expandcollapse fa fa-plus" onclick="toggleColumnElementsJS('a2.v3', 1, 25)"></a>Full Year</span></div>

is being rendered as:
<div class="relative"><span class="colHeader columnSorting sortAction"><a id="ec-1-25" class="expandcollapse fa fa-plus"></a>Full Year</span></div>

Reverting to Handsontable 8.1.0 fixes the problem.

Regards
Stu

#2

Hi Stu,

That’s correct. The change was made v8.2.0 and here’s a corresponding issue https://github.com/handsontable/handsontable/issues/7292 and Release Notes for v8.2.0 https://handsontable.com/docs/8.2.0/tutorial-release-notes.html

In that version for security reasons, we have implemented DOMPurify library. Using this library removes all onclick elements from your HTML by default. However, that action should be only on the cell level (not header).

I will investigate this subject and update you before the weekend. Thank you for sharing this use case.

#3

Hi. I come with an update.

I was confirmed that we planned to sanitize headers as well. However, we did not mention the same in the issue description.

Nevertheless, I have a demo for you that will do the same task, and is it is officially supported in all the versions https://jsfiddle.net/f3517c0r/2/. We are using the Handsontable callback called afterOnCellMouseDown. If you’d have any issues after updating to afterOnCellMouseDown I offer my help.

#4