Using the "Drag n drop of rows" demo, set the "diHelper" to "CustomerName" then edit a customer name on any row to: "<script>alert(3)</script>". Once done drag that row and an alert pops up.
The "diHelper" HTML text needs to be sanitised/cleaned when it is displayed as currently it is a security risk as it allows code injection.
FIX:
getHelper: function(evt) {
var self = this,
that = self.that,
m = self.model,
clsNode = m.clsNode,
$cell = $(evt.target).closest(".pq-grid-cell,.pq-grid-number-cell"),
cellObj = self.cellObj = that.getCellIndices({
$td: $cell
}),
diHelper = m.diHelper || [m.diDrag],
rd = cellObj.rowData,
dragNodes = cellObj.nodes = m.dragNodes.call(that, rd, evt),
txt = m.contentHelper.call(that, diHelper, dragNodes), // <<<<<<<---------- HERE (only changed variable name from html to txt for consistency)
$helper = self.$helper = $(m.tmplHelper),
scale = that.getScale(),
scaleB = pq.getScale(document.body);
$helper.find("span:eq(1)").text(txt); // <<<<<<<---------- AND HERE (changed ".html(html);" to ".text(txt);")
dragNodes.forEach(function(node) {
that.addClass({
rowData: node,
cls: clsNode
})
});
self.addRejectIcon();
$helper.addClass("pq-theme pq-drag-helper").css(m.cssHelper).data("Drag", self);
$helper.css({
scale: scale[0] / scaleB[0] + " " + scale[1] / scaleB[1],
"transform-origin": "0 0"
});
return $helper[0]
},