Source

// Markdown in posts, comments and changelog entries, rendered safely: raw HTML is cleaned by DOMPurify,
// and images become links so a post cannot load anything from another site when opened. class and id are
// dropped so a post cannot borrow the app's own styles (a fixed .modal-backdrop) to cover the page with a fake dialog.
import { Marked } from "marked";
import DOMPurify from "dompurify";

const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]!);

const marked = new Marked({
  gfm: true,
  breaks: true,
  async: false,
  renderer: {
    image({ href, text }) {
      return `<a href="${escapeHtml(href)}">${escapeHtml(text || "Image")} (image)</a>`;
    },
  },
});

DOMPurify.addHook("afterSanitizeAttributes", (node) => {
  if (node.tagName === "A") {
    node.setAttribute("target", "_blank");
    node.setAttribute("rel", "noopener noreferrer nofollow ugc");
  }
});

export function renderMarkdown(text: string): string {
  return DOMPurify.sanitize(marked.parse(text) as string, {
    FORBID_TAGS: ["img", "style", "form", "input", "button", "textarea", "select", "iframe", "video", "audio", "source", "picture", "svg", "math"],
    FORBID_ATTR: ["style", "srcset", "class", "id"],
  });
}