File size: 2,802 Bytes
0c4637f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | /* A shared playground link carries HTML as well as styles, and anyone can write a link.
* So the canvas never receives that text as markup. It is parsed in an inert document and
* rebuilt element by element from a short allow-list: layout and text tags, a few form
* controls, class names and data attributes. No scripts, no event handlers, no style
* attributes, no URLs, no ids (which could collide with the site). */
const TAGS = new Set([
"div", "span", "p", "section", "article", "header", "footer", "nav", "main", "aside", "figure", "figcaption",
"h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "a", "b", "i", "em", "strong", "small", "code", "pre", "kbd", "mark",
"blockquote", "hr", "br", "button", "input", "label", "progress", "meter", "table", "thead", "tbody", "tr", "th", "td",
]);
const ATTRS = new Set(["class", "title", "value", "min", "max", "step", "checked", "disabled", "placeholder", "aria-label", "aria-hidden", "aria-describedby", "role", "low", "high", "optimum"]);
const INPUT_TYPES = new Set(["range", "checkbox", "radio", "text", "number", "button"]);
const MAX_CHARS = 30000;
const MAX_NODES = 1500;
/** parse `html` and append a safe copy to `target` (any existing children are removed first) */
export function renderSafeHtml(target: HTMLElement, html: string): { nodes: number; dropped: number; truncated: boolean } {
target.replaceChildren();
let dropped = 0, nodes = 0, truncated = false;
const text = html.length > MAX_CHARS ? ((truncated = true), html.slice(0, MAX_CHARS)) : html;
const doc = new DOMParser().parseFromString(text, "text/html");
const copy = (src: Node, into: Node) => {
for (const n of Array.from(src.childNodes)) {
if (nodes >= MAX_NODES) { truncated = true; return; }
if (n.nodeType === Node.TEXT_NODE) { into.appendChild(document.createTextNode(n.textContent || "")); continue; }
if (n.nodeType !== Node.ELEMENT_NODE) continue;
const el = n as Element;
const tag = el.tagName.toLowerCase();
if (!TAGS.has(tag)) { dropped++; continue; }
nodes++;
const out = document.createElement(tag);
for (const a of Array.from(el.attributes)) {
const name = a.name.toLowerCase();
if (name === "type" && tag === "input") { if (INPUT_TYPES.has(a.value)) out.setAttribute("type", a.value); else dropped++; continue; }
if (name.startsWith("data-") && /^data-[a-z0-9-]{1,40}$/.test(name)) { out.setAttribute(name, a.value.slice(0, 200)); continue; }
if (ATTRS.has(name)) { out.setAttribute(name, a.value.slice(0, 400)); continue; }
dropped++;
}
if (tag === "a") out.setAttribute("tabindex", "-1");
copy(el, out);
into.appendChild(out);
}
};
copy(doc.body, target);
return { nodes, dropped, truncated };
}
|