interactive-markdown 0.0.0-stage → 0.1.1

package/src/sanitize-svg.js

@@ -0,0 +1,196 @@
+/**
+ * Sanitize SVG markup before injecting into the DOM.
+ * Strips script, foreignObject, event handlers, and external hrefs.
+ * Safe shapes (rect, circle, line, path, text, g, defs, animate, …) are kept.
+ */
+
+/** Tags removed entirely (case-insensitive localName). */
+const FORBIDDEN_TAGS = new Set([
+  "script",
+  "foreignobject",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+  "use", // may reference external resources
+  "handler", // legacy
+  "style", // avoid CSS injection vectors in v1; presentation attrs remain
+]);
+
+/**
+ * Optional allowlist. If an element is not forbidden and not in this set,
+ * it is still kept (unknown SVG elements are generally harmless once scripts/hrefs are gone).
+ * Listed for documentation / future strict mode.
+ */
+export const SAFE_SVG_TAGS = Object.freeze([
+  "svg",
+  "g",
+  "defs",
+  "symbol",
+  "rect",
+  "circle",
+  "ellipse",
+  "line",
+  "polyline",
+  "polygon",
+  "path",
+  "text",
+  "tspan",
+  "textpath",
+  "title",
+  "desc",
+  "animate",
+  "animatetransform",
+  "animatemotion",
+  "set",
+  "lineargradient",
+  "radialgradient",
+  "stop",
+  "clippath",
+  "mask",
+  "pattern",
+  "marker",
+  "image", // only with safe href (data:image or #)
+  "switch",
+  "a", // href must be safe (# only in practice)
+]);
+
+/**
+ * @param {string} href
+ * @returns {boolean}
+ */
+export function isSafeHref(href) {
+  if (href == null || href === "") return true;
+  const v = String(href).trim().toLowerCase();
+  if (v.startsWith("#")) return true;
+  if (v.startsWith("data:image/")) return true;
+  // Block javascript:, http(s):, file:, and any other scheme or relative URL
+  return false;
+}
+
+function getDOMParser() {
+  const P = globalThis.DOMParser;
+  if (!P) throw new Error("DOMParser is not available");
+  return new P();
+}
+
+function serializeElement(el) {
+  const S = globalThis.XMLSerializer;
+  if (S) return new S().serializeToString(el);
+  // linkedom / some environments: Element#toString or outerHTML
+  if (typeof el.toString === "function") {
+    const s = el.toString();
+    if (s && s.startsWith("<")) return s;
+  }
+  if (typeof el.outerHTML === "string" && el.outerHTML) return el.outerHTML;
+  throw new Error("XMLSerializer is not available");
+}
+
+/**
+ * @param {Element} el
+ * @param {string} name lowercase attribute name
+ */
+function removeAttr(el, name) {
+  if (el.hasAttribute(name)) el.removeAttribute(name);
+  // xlink:href variants
+  if (name === "href" || name === "xlink:href") {
+    try {
+      el.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+    } catch (_) {
+      /* ignore */
+    }
+    if (el.hasAttribute("xlink:href")) el.removeAttribute("xlink:href");
+  }
+}
+
+/**
+ * Sanitize an SVG string. Returns safe SVG markup (wraps fragments in <svg>).
+ * @param {string} svgText
+ * @returns {string}
+ */
+export function sanitizeSvg(svgText) {
+  const raw = String(svgText || "").trim();
+  if (!raw) return "";
+
+  const parser = getDOMParser();
+  const wrapped = /<svg\b/i.test(raw)
+    ? raw
+    : `<svg xmlns="http://www.w3.org/2000/svg">${raw}</svg>`;
+
+  const doc = parser.parseFromString(wrapped, "image/svg+xml");
+
+  // Some parsers surface errors as <parsererror>
+  const parseError =
+    doc.querySelector?.("parsererror") ||
+    doc.getElementsByTagName?.("parsererror")?.[0];
+  if (parseError) {
+    console.warn("[sanitize-svg] parse error");
+    return "";
+  }
+
+  const root = doc.documentElement;
+  if (!root || String(root.localName || root.tagName || "").toLowerCase() !== "svg") {
+    return "";
+  }
+
+  walk(root);
+
+  if (!root.getAttribute("xmlns")) {
+    root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  }
+
+  return serializeElement(root);
+}
+
+/**
+ * @param {Element} el
+ */
+function walk(el) {
+  const tag = String(el.localName || el.tagName || "").toLowerCase().replace(/^.*:/, "");
+
+  if (FORBIDDEN_TAGS.has(tag)) {
+    el.parentNode?.removeChild(el);
+    return;
+  }
+
+  const attrs = Array.from(el.attributes || []);
+  for (const attr of attrs) {
+    const name = String(attr.name || "").toLowerCase();
+    const value = attr.value;
+
+    // on* event handlers
+    if (name.startsWith("on")) {
+      removeAttr(el, attr.name);
+      continue;
+    }
+
+    // href / xlink:href
+    if (
+      name === "href" ||
+      name === "xlink:href" ||
+      name.endsWith(":href") ||
+      (attr.namespaceURI === "http://www.w3.org/1999/xlink" &&
+        String(attr.localName || "").toLowerCase() === "href")
+    ) {
+      if (!isSafeHref(value)) {
+        removeAttr(el, attr.name);
+      }
+      continue;
+    }
+
+    // xlink:actuate etc. left alone; block style urls with external schemes
+    if (name === "style" && /url\s*\(\s*['"]?\s*(https?:|javascript:|data:text)/i.test(value)) {
+      removeAttr(el, attr.name);
+      continue;
+    }
+  }
+
+  const children = Array.from(el.children || el.childNodes || []).filter(
+    (n) => n.nodeType === 1
+  );
+  for (const child of children) {
+    walk(/** @type {Element} */ (child));
+  }
+}

package/styles/app.css

@@ -0,0 +1,336 @@
+:root {
+  --bg: #0b1220;
+  --panel: #111827;
+  --panel-2: #0f172a;
+  --border: #1f2937;
+  --text: #e5e7eb;
+  --muted: #9ca3af;
+  --accent: #38bdf8;
+  --accent-2: #a78bfa;
+  --danger: #f87171;
+  --radius: 10px;
+  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  min-width: 12rem;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+
+.brand span {
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  flex: 1;
+}
+
+.toolbar select,
+.toolbar button {
+  font: inherit;
+  font-size: 0.85rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-2);
+  color: var(--text);
+  padding: 0.4rem 0.7rem;
+  cursor: pointer;
+}
+
+.toolbar button:hover,
+.toolbar select:hover {
+  border-color: #374151;
+}
+
+.toolbar button.primary {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+  border-color: transparent;
+  color: white;
+  font-weight: 600;
+}
+
+#status {
+  color: var(--muted);
+  font-size: 0.8rem;
+  margin-left: auto;
+}
+
+.layout {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 0;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: 45vh 1fr;
+  }
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--border);
+}
+
+.pane:last-child {
+  border-right: none;
+}
+
+.pane-title {
+  padding: 0.5rem 0.85rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  background: #0c1424;
+}
+
+#editor {
+  flex: 1;
+  width: 100%;
+  resize: none;
+  border: 0;
+  outline: none;
+  padding: 1rem;
+  background: var(--panel-2);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  line-height: 1.45;
+  tab-size: 2;
+}
+
+#preview {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem 1.15rem 2rem;
+  background: #0a101c;
+}
+
+/* Markdown content */
+.im-md {
+  line-height: 1.55;
+  max-width: 52rem;
+}
+
+.im-md > *:first-child {
+  margin-top: 0;
+}
+
+.im-md h1,
+.im-md h2,
+.im-md h3 {
+  line-height: 1.25;
+  margin: 1.2em 0 0.5em;
+}
+
+.im-md h1 {
+  font-size: 1.6rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.3rem;
+}
+
+.im-md h2 {
+  font-size: 1.25rem;
+}
+
+.im-md p,
+.im-md ul,
+.im-md ol {
+  color: #d1d5db;
+}
+
+.im-md code {
+  font-family: var(--mono);
+  font-size: 0.88em;
+  background: #1e293b;
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+}
+
+.im-md pre {
+  background: #1e293b;
+  padding: 0.85rem 1rem;
+  border-radius: var(--radius);
+  overflow: auto;
+}
+
+.im-md pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.im-md a {
+  color: var(--accent);
+}
+
+.im-md blockquote {
+  margin: 0.8em 0;
+  padding-left: 0.9rem;
+  border-left: 3px solid #334155;
+  color: var(--muted);
+}
+
+/* IVM widgets */
+.im-ivm-host {
+  margin: 1.1rem 0 1.4rem;
+}
+
+.im-ivm {
+  background: #111827;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.9rem 1rem 1rem;
+  max-width: 52rem;
+}
+
+.im-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin-bottom: 0.85rem;
+}
+
+.im-control {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.im-slider-row {
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  column-gap: 0.6rem;
+}
+
+.im-slider-row input[type="range"] {
+  grid-column: 1 / -1;
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+.im-label {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: #cbd5e1;
+}
+
+.im-value {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--accent-2);
+  margin-left: auto;
+}
+
+.im-timer-btn {
+  font: inherit;
+  font-size: 0.8rem;
+  padding: 0.3rem 0.65rem;
+  border-radius: 7px;
+  border: 1px solid #334155;
+  background: #1e293b;
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.im-timer-btn[aria-pressed="true"] {
+  background: #164e63;
+  border-color: #0891b2;
+}
+
+.im-input-row input[type="text"] {
+  font: inherit;
+  padding: 0.4rem 0.55rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: #0f172a;
+  color: var(--text);
+}
+
+.im-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.im-svg-host {
+  background: #020617;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid #1e293b;
+  padding: 0.5rem;
+}
+
+.im-svg-host svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.im-errors {
+  white-space: pre-wrap;
+  color: var(--danger);
+  background: #450a0a;
+  border: 1px solid #7f1d1d;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  margin-bottom: 0.6rem;
+}
+
+#file-input {
+  display: none;
+}