@tightknitai/block-kitchen 0.10.12 → 0.10.14

package/dist/index.cjs

@@ -1868,6 +1868,7 @@ function groupValidatorErrors(errors, blocks) {
 var SAFE_LINK_PROTOCOLS = /^(https?|ircs?|mailto|tel|sms|xmpp)$/i;
 var SAFE_IMAGE_PROTOCOLS = /^(https?)$/i;
 var SAFE_IMAGE_DATA_PREFIX = /^data:image\/(?:png|jpeg|jpg|gif|webp|avif|x-icon|vnd\.microsoft\.icon)(?:;[a-z0-9-]+(?:=[^,;]*)?)*,/i;
+var SAFE_EMBED_PROTOCOLS = /^(https?)$/i;
 function getScheme(value) {
   const trimmed = value.replace(/^\s+/, "");
   const colon = trimmed.indexOf(":");
@@ -1923,16 +1924,54 @@ function isSafeImageSrc(value) {
   }
   return SAFE_IMAGE_PROTOCOLS.test(scheme);
 }
+function isSafeEmbedSrc(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  if (value.length === 0) {
+    return true;
+  }
+  const scheme = getScheme(value);
+  if (scheme === null) {
+    return false;
+  }
+  return SAFE_EMBED_PROTOCOLS.test(scheme);
+}
 function sanitizeHref(value) {
   return isSafeHref(value) ? value ?? "" : "";
 }
 function sanitizeImageSrc(value) {
   return isSafeImageSrc(value) ? value ?? "" : "";
 }
+function sanitizeEmbedSrc(value) {
+  return isSafeEmbedSrc(value) ? value ?? "" : "";
+}
 
 // src/lib/sanitize-blocks.ts
-var HREF_KEYS = /* @__PURE__ */ new Set(["url"]);
-var IMAGE_KEYS = /* @__PURE__ */ new Set(["image_url"]);
+var EMBED_KEYS = /* @__PURE__ */ new Set(["video_url"]);
+var URL_KEY = /(^|_)(url|uri|link|href|src)$/;
+var MAYBE_URL_KEY = /url|uri|link|href|src/i;
+var IMAGE_KEY_HINT = /image|thumb|icon|avatar|logo|photo|picture/;
+var PROP_BAG_KEY = /(^|_)props$/;
+function normalizeKey(key) {
+  return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
+}
+function isRendererPropBag(key) {
+  return PROP_BAG_KEY.test(normalizeKey(key));
+}
+function classifyUrlKey(key) {
+  if (!MAYBE_URL_KEY.test(key)) {
+    return null;
+  }
+  const normalized = normalizeKey(key);
+  if (EMBED_KEYS.has(normalized)) {
+    return "embed";
+  }
+  if (!URL_KEY.test(normalized)) {
+    return null;
+  }
+  return IMAGE_KEY_HINT.test(normalized) ? "image" : "href";
+}
 var RETRIEVAL_ONLY_KEYS = /* @__PURE__ */ new Map([
   // Covers both the image block and the image element — both `type: 'image'`.
   ["image", /* @__PURE__ */ new Set(["image_width", "image_height", "image_bytes", "fallback", "is_animated"])],
@@ -1960,7 +1999,7 @@ function sanitizeValue(value) {
   const dropKeys = typeof src.type === "string" ? RETRIEVAL_ONLY_KEYS.get(src.type) : void 0;
   let copy = null;
   for (const key of Object.keys(src)) {
-    if (dropKeys?.has(key)) {
+    if (dropKeys?.has(key) || isRendererPropBag(key)) {
       copy ??= { ...src };
       delete copy[key];
       continue;
@@ -1968,10 +2007,13 @@ function sanitizeValue(value) {
     const original = src[key];
     let next = original;
     if (typeof original === "string") {
-      if (HREF_KEYS.has(key)) {
+      const kind = classifyUrlKey(key);
+      if (kind === "href") {
         next = sanitizeHref(original);
-      } else if (IMAGE_KEYS.has(key)) {
+      } else if (kind === "image") {
         next = sanitizeImageSrc(original);
+      } else if (kind === "embed") {
+        next = sanitizeEmbedSrc(original);
       }
     } else if (typeof original === "object" && original !== null) {
       next = sanitizeValue(original);
@@ -3284,6 +3326,7 @@ function ChannelCombobox({
     )
   ] });
 }
+var EMBED_SELECTOR = "iframe[src], embed[src], object[data], source[src], video[src], audio[src], track[src]";
 function SlackBlockPreview({
   block,
   hooks,
@@ -3316,6 +3359,17 @@ function SlackBlockPreview({
         img.setAttribute("data-bk-blocked-src", "1");
       }
     }
+    for (const el of root.querySelectorAll(EMBED_SELECTOR)) {
+      const attr = el.tagName === "OBJECT" ? "data" : "src";
+      if (!isSafeEmbedSrc(el.getAttribute(attr))) {
+        el.removeAttribute(attr);
+        el.setAttribute("data-bk-blocked-src", "1");
+      }
+    }
+    for (const frame of root.querySelectorAll("iframe[srcdoc]")) {
+      frame.removeAttribute("srcdoc");
+      frame.setAttribute("data-bk-blocked-srcdoc", "1");
+    }
   });
   return (
     // The library scopes all of its CSS under `#slack_blocks_to_jsx` and
@@ -9168,7 +9222,14 @@ function SourcesField({
     ] })
   ] });
 }
+function UnsafeUrlNote({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-destructive", children });
+}
 function VideoEditor({ block, onChange }) {
+  const videoUrlIsUnsafe = (block.video_url ?? "").length > 0 && !isSafeEmbedSrc(block.video_url);
+  const thumbnailIsUnsafe = (block.thumbnail_url ?? "").length > 0 && !isSafeImageSrc(block.thumbnail_url);
+  const titleUrlIsUnsafe = (block.title_url ?? "").length > 0 && !isSafeHref(block.title_url);
+  const providerIconIsUnsafe = (block.provider_icon_url ?? "").length > 0 && !isSafeImageSrc(block.provider_icon_url);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 199 characters. Shown above the embedded player.", htmlFor: "video-title", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
@@ -9192,50 +9253,62 @@ function VideoEditor({ block, onChange }) {
         onChange: (e) => onChange({ ...block, alt_text: e.target.value })
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       EditorField,
       {
         label: "Video URL",
         help: "HTTPS embed URL. Must match an unfurl domain on your Slack app.",
         htmlFor: "video-url",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "video-url",
-            type: "url",
-            value: block.video_url ?? "",
-            placeholder: "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ",
-            onChange: (e) => onChange({ ...block, video_url: e.target.value })
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "video-url",
+              type: "url",
+              value: block.video_url ?? "",
+              placeholder: "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ",
+              onChange: (e) => onChange({ ...block, video_url: e.target.value }),
+              "aria-invalid": videoUrlIsUnsafe || void 0
+            }
+          ),
+          videoUrlIsUnsafe && /* @__PURE__ */ jsxRuntime.jsx(UnsafeUrlNote, { children: "The embedded player only accepts a full http(s) URL. This URL will be stripped before send and preview." })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Thumbnail URL", help: "Preview image shown before the video loads.", htmlFor: "video-thumbnail", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
-      {
-        id: "video-thumbnail",
-        type: "url",
-        value: block.thumbnail_url ?? "",
-        placeholder: "e.g. https://example.com/thumb.png",
-        onChange: (e) => onChange({ ...block, thumbnail_url: e.target.value })
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(EditorField, { label: "Thumbnail URL", help: "Preview image shown before the video loads.", htmlFor: "video-thumbnail", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "video-thumbnail",
+          type: "url",
+          value: block.thumbnail_url ?? "",
+          placeholder: "e.g. https://example.com/thumb.png",
+          onChange: (e) => onChange({ ...block, thumbnail_url: e.target.value }),
+          "aria-invalid": thumbnailIsUnsafe || void 0
+        }
+      ),
+      thumbnailIsUnsafe && /* @__PURE__ */ jsxRuntime.jsx(UnsafeUrlNote, { children: "Only http(s) image URLs are allowed. This URL will be stripped before send and preview." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
       EditorField,
       {
         label: "Title link URL",
         help: "Optional. HTTPS link the title text opens (the non-embed page).",
         htmlFor: "video-title-url",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "video-title-url",
-            type: "url",
-            value: block.title_url ?? "",
-            placeholder: "e.g. https://www.youtube.com/watch?v=dQw4w9WgXcQ",
-            onChange: (e) => onChange({ ...block, title_url: e.target.value || void 0 })
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "video-title-url",
+              type: "url",
+              value: block.title_url ?? "",
+              placeholder: "e.g. https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+              onChange: (e) => onChange({ ...block, title_url: e.target.value || void 0 }),
+              "aria-invalid": titleUrlIsUnsafe || void 0
+            }
+          ),
+          titleUrlIsUnsafe && /* @__PURE__ */ jsxRuntime.jsx(UnsafeUrlNote, { children: "Only http(s), mailto, tel, sms, and xmpp links are allowed. This URL will be stripped before send and preview." })
+        ]
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Description", help: "Optional. Up to 199 characters.", htmlFor: "video-description", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9279,22 +9352,26 @@ function VideoEditor({ block, onChange }) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       EditorField,
       {
         label: "Provider icon URL",
         help: "Optional. Small icon shown next to the provider name.",
         htmlFor: "video-provider-icon",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            id: "video-provider-icon",
-            type: "url",
-            value: block.provider_icon_url ?? "",
-            placeholder: "e.g. https://example.com/youtube-favicon.png",
-            onChange: (e) => onChange({ ...block, provider_icon_url: e.target.value || void 0 })
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "video-provider-icon",
+              type: "url",
+              value: block.provider_icon_url ?? "",
+              placeholder: "e.g. https://example.com/youtube-favicon.png",
+              onChange: (e) => onChange({ ...block, provider_icon_url: e.target.value || void 0 }),
+              "aria-invalid": providerIconIsUnsafe || void 0
+            }
+          ),
+          providerIconIsUnsafe && /* @__PURE__ */ jsxRuntime.jsx(UnsafeUrlNote, { children: "Only http(s) image URLs are allowed. This URL will be stripped before send and preview." })
+        ]
       }
     )
   ] });