Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164import sanitizeHtml from "sanitize-html";import { isRepoRelative, mediaSrcset, mediaUrl, treeUrl } from "$lib/markup/paths";import type { MarkupContext } from "$lib/markup/paths";
const HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
// mirrors appview/pages/markup/sanitizer, which is bluemonday's UGC policy plus// the elements our own extensions emit. markdown renders with raw html enabled,// so anything hand written in a readme lands here tooconst ALLOWED_TAGS = [ ...HEADINGS, "p", "br", "hr", "div", "span", "section", "blockquote", "pre", "code", "kbd", "samp", "var", "tt", "b", "strong", "i", "em", "u", "s", "strike", "del", "ins", "sub", "sup", "small", "mark", "a", "img", "picture", "source", "video", "ul", "ol", "li", "dl", "dt", "dd", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption", "colgroup", "col", "details", "summary", "figure", "figcaption", "abbr", "bdo", "cite", "dfn", "q", "ruby", "rt", "rp", "time", "wbr", "center", "input", "label"];
// bluemonday's standard attributesconst GLOBAL_ATTRIBUTES = ["id", "title", "dir", "lang", "align"];
const ALLOWED_ATTRIBUTES: sanitizeHtml.IOptions["allowedAttributes"] = { "*": GLOBAL_ATTRIBUTES, a: ["href", "name", "rel", "aria-hidden"], img: ["src", "srcset", "alt", "width", "height", "loading", "decoding"], source: ["src", "srcset", "type", "media"], video: ["src", "poster", "controls", "autoplay", "loop", "muted", "width", "height"], // the tasklist plugin renders disabled checkboxes tied to their labels input: ["type", "checked", "disabled"], label: ["for"], th: ["colspan", "rowspan", "scope"], td: ["colspan", "rowspan"], col: ["span", "width"], colgroup: ["span"], ol: ["start", "type", "reversed"], details: ["open"], time: ["datetime"], abbr: ["title"]};
// classes are allowlisted per tag, so a readme cannot reach the app's own stylesconst ALLOWED_CLASSES: sanitizeHtml.IOptions["allowedClasses"] = { a: ["anchor", "mention", "footnote-ref", "footnote-backref", "footnote-anchor"], sup: ["footnote-ref"], hr: ["footnotes-sep"], section: ["footnotes"], ol: ["footnotes-list", "task-list-container"], ul: ["task-list-container"], li: ["footnote-item", "task-list-item"], input: ["task-list-item-checkbox"], label: ["task-list-item-label"], div: ["markdown-alert", "markdown-alert-*"], p: ["markdown-alert-title"], code: ["language-*"]};
const externalRel = (href: string): string | undefined => isRepoRelative(href) || href.startsWith("#") ? undefined : "nofollow noopener noreferrer";
const optionsFor = (ctx: MarkupContext): sanitizeHtml.IOptions => ({ allowedTags: ALLOWED_TAGS, allowedAttributes: ctx.sourceLines ? { ...ALLOWED_ATTRIBUTES, "*": [...GLOBAL_ATTRIBUTES, "data-line"] } : ALLOWED_ATTRIBUTES, allowedClasses: ALLOWED_CLASSES, allowedSchemes: ["http", "https", "mailto"], allowedSchemesAppliedToAttributes: ["href", "src", "srcset", "poster"], // resolving urls here rather than in a renderer rule catches the ones // written as raw html too transformTags: { a: (tagName, attribs) => { const href = attribs.href ?? ""; // a mention already points at a profile const rewritten = isRepoRelative(href) && attribs.class !== "mention" ? treeUrl(href, ctx) : href; const rel = externalRel(rewritten); return { tagName, attribs: { ...attribs, href: rewritten, ...(rel ? { rel } : {}) } }; }, img: (tagName, attribs) => ({ tagName, attribs: { ...resolveMedia(attribs, ctx), loading: "lazy", decoding: "async" } }), source: (tagName, attribs) => ({ tagName, attribs: resolveMedia(attribs, ctx) }), video: (tagName, attribs) => ({ tagName, attribs: resolveMedia(attribs, ctx) }) }, // the tasklist checkboxes are the only inputs we render exclusiveFilter: (frame) => frame.tag === "input" && frame.attribs.type !== "checkbox"});
const resolveMedia = ( attribs: Record<string, string>, ctx: MarkupContext): Record<string, string> => { const resolved = { ...attribs }; for (const key of ["src", "poster"]) { const value = resolved[key]; if (value) resolved[key] = mediaUrl(value, ctx); } if (resolved.srcset) resolved.srcset = mediaSrcset(resolved.srcset, ctx); return resolved;};
export const sanitizeMarkup = (html: string, ctx: MarkupContext): string => sanitizeHtml(html, optionsFor(ctx));