The fix to #97, released with version 2.4.1, breaks any legitimate use of HTML markup in the data-display attribute, which becomes totally useless.
If we want the data-display functionality to stay in place, it is not possible to avoid using innerHTML, as suggested by the reporter of #97 and adopted in version 2.4.1. A more appropriate solution would be to remove any potentially malicious content from the data-display string before it is further assigned to DOM elements. The best place to do this is inside the extractData() function, right before returning itemData inside the loop. A function like the one below addresses most scenarios and can be easily extended to add more exclusions or further sanitization if needed:
sanitizeHtml(html) {
// Remove potentially malicious content from the text
// while allowing innocuous HTML markup
['script', 'iframe', 'object', 'embed', 'applet'].forEach(tag => {
html = html.trim().replace(new RegExp(`<${tag}[^>]*>([\\S\\s]*?)<\/${tag}>`, 'gim'), '').replace(new RegExp(`<\/?\\s*${tag}\\s*>`, 'gim'), '');
});
// remove any event attribute from tags
html = html.replace(/ on\w+="[^"]*"/gim, '');
return html;
}
The fix to #97, released with version 2.4.1, breaks any legitimate use of HTML markup in the
data-displayattribute, which becomes totally useless.If we want the
data-displayfunctionality to stay in place, it is not possible to avoid usinginnerHTML, as suggested by the reporter of #97 and adopted in version 2.4.1. A more appropriate solution would be to remove any potentially malicious content from thedata-displaystring before it is further assigned to DOM elements. The best place to do this is inside theextractData()function, right before returningitemDatainside the loop. A function like the one below addresses most scenarios and can be easily extended to add more exclusions or further sanitization if needed: