proxmox-widget-toolkit/src/Parser.js
Thomas Lamprecht 71bc0913bd markdown: encode bad nodes HTML instead of pruning it
As pruning means content an user wrote into the box, even if with
malicious intend, gets hidden and that can be quite confusing..

So rather get the outerHTML, transform it with ExtJS's htmlEncode and
set it again.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
2021-07-04 19:22:40 +02:00

47 lines
1.5 KiB
JavaScript

// NOTE: just relays parsing to markedjs parser
Ext.define('Proxmox.Markdown', {
alternateClassName: 'Px.Markdown', // just trying out something, do NOT copy this line
singleton: true,
// transforms HTML to a DOM tree and recursively descends and HTML-encodes every branch with a
// "bad" node.type and drops "bad" attributes from the remaining nodes.
// "bad" means anything which can do XSS or break the layout of the outer page
sanitizeHTML: function(input) {
if (!input) {
return input;
}
let _sanitize;
_sanitize = (node) => {
if (node.nodeType === 3) return;
if (node.nodeType !== 1 || /^(script|iframe|object|embed|svg)$/i.test(node.tagName)) {
// could do node.remove() instead, but it's nicer UX if we keep the (encoded!) html
node.outerHTML = Ext.String.htmlEncode(node.outerHTML);
return;
}
for (let i=node.attributes.length; i--;) {
const name = node.attributes[i].name;
// TODO: we may want to also disallow class and id attrs
if (!/^(class|id|name|href|src|alt|align|valign|disabled|checked|start|type)$/i.test(name)) {
node.attributes.removeNamedItem(name);
}
}
for (let i=node.childNodes.length; i--;) _sanitize(node.childNodes[i]);
};
const doc = new DOMParser().parseFromString(`<!DOCTYPE html><html><body>${input}`, 'text/html');
doc.normalize();
_sanitize(doc.body);
return doc.body.innerHTML;
},
parse: function(markdown) {
/*global marked*/
let unsafeHTML = marked(markdown);
return `<div class="pmx-md">${this.sanitizeHTML(unsafeHTML)}</div>`;
},
});