@budibase/bbui 3.45.0 → 3.47.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "v3.45.0",
+  "version": "v3.47.0",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -21,7 +21,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@types/sanitize-html": "^2.13.0",
     "vite-plugin-css-injected-by-js": "3.5.2",
-    "vitest": "^4.1.8"
+    "vitest": "^5.0.0"
   },
   "keywords": [
     "svelte"
@@ -108,5 +108,5 @@
       }
     }
   },
-  "gitHead": "39146fbea58fca5022556582a42e57a794fdf8ad"
+  "gitHead": "adfff86585b1d393941175f58cbe74f2005616b4"
 }

package/src/Markdown/renderMarkdown.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+
+import { renderMarkdown } from "./renderMarkdown"
+
+describe("renderMarkdown", () => {
+  it("preserves safe HTML used for email layouts", () => {
+    const html = renderMarkdown(
+      '<div style="color:red;padding:4px"><span>Alert</span><table width="600" cellpadding="4"><tr><td colspan="2">Body</td></tr></table></div>'
+    )
+
+    expect(html).toBe(
+      '<div style="color:red;padding:4px"><span>Alert</span><table width="600" cellpadding="4"><tr><td colspan="2">Body</td></tr></table></div>'
+    )
+  })
+
+  it("blocks the stored XSS advisory payload", () => {
+    const html = renderMarkdown(
+      '<iframe srcdoc="<script src=https://example.com/payload.mjs></script>"></iframe>'
+    )
+
+    expect(html).toBe("")
+  })
+
+  it("removes executable attributes, URLs, and styles", () => {
+    const html = renderMarkdown(
+      '<div class="spectrum-Modal" onclick="alert(1)" style="color:red;position:fixed;background-image:url(https://example.com/pixel)"><img src="https://example.com/image.png" onerror="alert(1)"><a href="javascript:alert(1)">Link</a></div>'
+    )
+
+    expect(html).toBe(
+      '<div style="color:red"><img src="https://example.com/image.png" /><a>Link</a></div>'
+    )
+  })
+
+  it("removes unsafe values from allowed style properties", () => {
+    const html = renderMarkdown(
+      '<div style="color:url(https://example.com/x);width:expression(alert(1));padding:4px">Direct</div><div style="color:u\\72l(https://example.com/x);width:e\\78pression(alert(1));font-family:u/**/rl(https://example.com/x);padding:4px">Obfuscated</div>'
+    )
+
+    expect(html).toBe(
+      '<div style="padding:4px">Direct</div><div style="padding:4px">Obfuscated</div>'
+    )
+  })
+})

package/src/Markdown/renderMarkdown.ts

@@ -28,8 +28,81 @@ const MARKDOWN_TAGS = [
   "thead",
   "tr",
   "ul",
+  "div",
+  "span",
 ]
 
+const MARKDOWN_ATTRIBUTES = {
+  "*": [
+    "align",
+    "bgcolor",
+    "dir",
+    "height",
+    "lang",
+    "role",
+    "style",
+    "valign",
+    "width",
+  ],
+  a: ["href", "title"],
+  img: ["alt", "src", "title"],
+  li: ["value"],
+  ol: ["reversed", "start", "type"],
+  table: ["border", "cellpadding", "cellspacing"],
+  td: ["colspan", "headers", "nowrap", "rowspan"],
+  th: ["colspan", "headers", "nowrap", "rowspan", "scope"],
+}
+
+const SAFE_STYLE_VALUE =
+  /^(?![\s\S]*(?:\\|\/\*|(?:expression|url)\s*\())[\s\S]*$/i
+const MARKDOWN_STYLE_PROPERTIES = [
+  "background-color",
+  "border",
+  "border-bottom",
+  "border-collapse",
+  "border-color",
+  "border-left",
+  "border-right",
+  "border-spacing",
+  "border-style",
+  "border-top",
+  "border-width",
+  "color",
+  "display",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "height",
+  "letter-spacing",
+  "line-height",
+  "margin",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "max-height",
+  "max-width",
+  "min-height",
+  "min-width",
+  "padding",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "text-align",
+  "text-decoration",
+  "vertical-align",
+  "width",
+]
+
+const MARKDOWN_STYLES = {
+  "*": Object.fromEntries(
+    MARKDOWN_STYLE_PROPERTIES.map(property => [property, [SAFE_STYLE_VALUE]])
+  ),
+}
+
 export const renderMarkdown = (markdown: string | undefined) => {
   if (!markdown) {
     return ""
@@ -39,10 +112,8 @@ export const renderMarkdown = (markdown: string | undefined) => {
 
   return sanitizeHtml(html, {
     allowedTags: MARKDOWN_TAGS,
-    allowedAttributes: {
-      a: ["href", "title"],
-      img: ["alt", "src", "title"],
-    },
+    allowedAttributes: MARKDOWN_ATTRIBUTES,
+    allowedStyles: MARKDOWN_STYLES,
     allowedSchemes: ["http", "https", "mailto", "tel"],
     allowedSchemesByTag: {
       img: ["http", "https"],

package/src/Modal/ModalContent.svelte

@@ -31,6 +31,7 @@
   export let secondaryButtonWarning: boolean = false
   export let custom: boolean = false
   export let disableCancelOnConfirm: boolean = false
+  export let compact: boolean = false
 
   const { hide, cancel } = getContext(Context.Modal)
 
@@ -72,6 +73,7 @@
   class:spectrum-Dialog--extraLarge={size === "XL"}
   class:no-grid={custom}
   class:noDivider={!showDivider}
+  class:compact
   style="position: relative;"
   role="dialog"
   tabindex="-1"
@@ -183,6 +185,10 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
   }
 
+  .spectrum-Dialog.compact {
+    --spectrum-dialog-confirm-padding: 24px;
+  }
+
   .spectrum-Dialog-heading {
     font-size: 24px;
   }

package/dist/__vite-browser-external-c_Pnnbav.mjs

@@ -1,25 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (e && (t = e(e = 0)), t), s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), c = (e, n) => {
-	let r = {};
-	for (var i in e) t(r, i, {
-		get: e[i],
-		enumerable: !0
-	});
-	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
-}, l = (e, i, o, s) => {
-	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
-		get: ((e) => i[e]).bind(null, d),
-		enumerable: !(s = n(i, d)) || s.enumerable
-	});
-	return e;
-}, u = (n, r, a) => (a = n == null ? {} : e(i(n)), l(r || !n || !n.__esModule ? t(a, "default", {
-	value: n,
-	enumerable: !0
-}) : a, n)), d = (e) => a.call(e, "module.exports") ? e["module.exports"] : l(t({}, "__esModule", { value: !0 }), e), f = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), p = /* @__PURE__ */ s(((e, t) => {
-	t.exports = {};
-}));
-//#endregion
-export { f as a, c as i, s as n, d as o, o as r, u as s, p as t };