@vonage/vivid 5.10.0 → 5.11.0

package/lib/rich-text-editor/rte/utils/sanitization.d.ts

@@ -0,0 +1,7 @@
+export declare const ATTR_WHITESPACE: RegExp;
+export declare const domPurifyConfig: {
+    ALLOWED_URI_REGEXP: RegExp;
+};
+export declare const sanitizeLinkHref: (url: string) => string;
+export declare const sanitizeImageSrc: (url: string) => string;
+export declare const escapeCssProperty: (value: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.10.0",
+  "version": "5.11.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -90,15 +90,15 @@
     "wait-on": "^8.0.5",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-config": "1.0.0",
-    "@repo/consts": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/consts": "1.0.0",
     "@repo/shared": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
     "@repo/styles": "1.0.0",
     "@repo/tokens": "1.0.0",
-    "@repo/vitest-config": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/typescript-config": "1.0.0"
+    "@repo/typescript-config": "1.0.0",
+    "@repo/vitest-config": "1.0.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/rich-text-editor/definition.cjs

@@ -11575,6 +11575,37 @@ class RteCoreImpl extends slottableRequest.RteFeatureImpl {
 }
 slottableRequest.featureFacade(RteCoreImpl);
 
+const DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+const domPurifyConfig = {
+  // Allow blobs
+  ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB
+};
+const sanitizeLinkHref = (url) => {
+  if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) {
+    return "";
+  }
+  const anchor = document.createElement("a");
+  anchor.setAttribute("href", url);
+  const sanitizedAnchor = DOMPurify.sanitize(anchor, {
+    RETURN_DOM: true,
+    ...domPurifyConfig
+  }).querySelector("a");
+  /* v8 ignore next -- since href is already validated it's probably always present @preserve */
+  return sanitizedAnchor.getAttribute("href") ?? "";
+};
+const sanitizeImageSrc = (url) => {
+  const img = document.createElement("img");
+  img.setAttribute("src", url);
+  const sanitizedImg = DOMPurify.sanitize(img, {
+    RETURN_DOM: true,
+    ...domPurifyConfig
+  }).querySelector("img");
+  return sanitizedImg.getAttribute("src") ?? "";
+};
+const escapeCssProperty = (value) => value.replace(/[;!].*/, "");
+
 const copy = (obj) => ({ ...obj });
 const parseRulesFromSchema = (schema) => ({
   nodes: Object.fromEntries(
@@ -11612,7 +11643,10 @@ class RteHtmlParser {
     }).content.toJSON() ?? [];
   }
   parseHtml(html, options) {
-    const dom = DOMPurify.sanitize(html, { RETURN_DOM: true });
+    const dom = DOMPurify.sanitize(html, {
+      RETURN_DOM: true,
+      ...domPurifyConfig
+    });
     const container = document.createDocumentFragment();
     container.appendChild(dom);
     options?.modifyDom?.(container);
@@ -12771,7 +12805,7 @@ class RteFontSizePickerFeatureImpl extends slottableRequest.RteFeatureImpl {
       toDOM: (mark) => {
         return [
           "span",
-          { style: `font-size: ${mark.attrs.size};` },
+          { style: `font-size: ${escapeCssProperty(mark.attrs.size)};` },
           0
         ];
       },
@@ -13441,7 +13475,7 @@ class RteTextColorPickerFeatureImpl extends slottableRequest.RteFeatureImpl {
               return [
                 "span",
                 {
-                  style: `color: ${color}`,
+                  style: `color: ${escapeCssProperty(color)};`,
                   "data-text-color": color
                 },
                 0
@@ -13951,6 +13985,7 @@ const alignments = [
     label: "right"
   }
 ];
+const validTextAlign = (value) => alignments.find((a) => a.value === value)?.value ?? "left";
 class RteAlignmentFeatureImpl extends slottableRequest.RteFeatureImpl {
   constructor() {
     super(...arguments);
@@ -13962,10 +13997,10 @@ class RteAlignmentFeatureImpl extends slottableRequest.RteFeatureImpl {
         name: "textAlign",
         default: "left",
         fromDOM(dom) {
-          return dom.style.textAlign || "left";
+          return validTextAlign(dom.style.textAlign);
         },
         toStyles(node) {
-          return [`text-align: ${node.attrs.textAlign}`];
+          return [`text-align: ${validTextAlign(node.attrs.textAlign)}`];
         }
       })
     ];
@@ -14121,7 +14156,7 @@ class RteLinkFeatureImpl extends slottableRequest.RteFeatureImpl {
               ],
               toDOM(node) {
                 const { href } = node.attrs;
-                return ["a", { href }, 0];
+                return ["a", { href: sanitizeLinkHref(href) }, 0];
               }
             }
           }
@@ -14526,7 +14561,7 @@ class InlineImageView {
     });
   }
   renderImg(src) {
-    this.img.src = src;
+    this.img.src = sanitizeImageSrc(src);
     this.setContent(this.img, { allowPopover: true });
   }
   update(node) {
@@ -14564,13 +14599,13 @@ class RteInlineImageFeatureImpl extends slottableRequest.RteFeatureImpl {
       },
       parseDOM: [
         {
-          tag: "img[src]",
+          tag: "img[src],img[data-src]",
           getAttrs: (dom) => {
             const parseDimension = (dim) => {
               const value = parseInt(dim ?? "", 10);
               return isNaN(value) ? null : value;
             };
-            const srcAttr = dom.getAttribute("src");
+            const srcAttr = dom.getAttribute("data-src") ?? dom.getAttribute("src");
             const imageUrl = this.config.parseUrlFromHtml ? this.config.parseUrlFromHtml(srcAttr) : srcAttr;
             if (imageUrl === null) {
               return false;
@@ -14592,8 +14627,14 @@ class RteInlineImageFeatureImpl extends slottableRequest.RteFeatureImpl {
         if (resolvedUrl === null) {
           return document.createTextNode("");
         }
-        const attrs = { src: resolvedUrl, alt };
-        if (size) attrs.style = `max-width: ${size}; height: auto;`;
+        const attrs = {
+          src: sanitizeImageSrc(resolvedUrl),
+          "data-src": resolvedUrl,
+          // Preserve src if it is dropped by sanitization
+          alt
+        };
+        if (size)
+          attrs.style = `max-width: ${escapeCssProperty(size)}; height: auto;`;
         if (naturalWidth) attrs.width = naturalWidth;
         if (naturalHeight) attrs.height = naturalHeight;
         return ["img", attrs];

package/rich-text-editor/definition.js

@@ -11571,6 +11571,37 @@ class RteCoreImpl extends RteFeatureImpl {
 }
 featureFacade(RteCoreImpl);
 
+const DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+const domPurifyConfig = {
+  // Allow blobs
+  ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB
+};
+const sanitizeLinkHref = (url) => {
+  if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) {
+    return "";
+  }
+  const anchor = document.createElement("a");
+  anchor.setAttribute("href", url);
+  const sanitizedAnchor = DOMPurify.sanitize(anchor, {
+    RETURN_DOM: true,
+    ...domPurifyConfig
+  }).querySelector("a");
+  /* v8 ignore next -- since href is already validated it's probably always present @preserve */
+  return sanitizedAnchor.getAttribute("href") ?? "";
+};
+const sanitizeImageSrc = (url) => {
+  const img = document.createElement("img");
+  img.setAttribute("src", url);
+  const sanitizedImg = DOMPurify.sanitize(img, {
+    RETURN_DOM: true,
+    ...domPurifyConfig
+  }).querySelector("img");
+  return sanitizedImg.getAttribute("src") ?? "";
+};
+const escapeCssProperty = (value) => value.replace(/[;!].*/, "");
+
 const copy = (obj) => ({ ...obj });
 const parseRulesFromSchema = (schema) => ({
   nodes: Object.fromEntries(
@@ -11608,7 +11639,10 @@ class RteHtmlParser {
     }).content.toJSON() ?? [];
   }
   parseHtml(html, options) {
-    const dom = DOMPurify.sanitize(html, { RETURN_DOM: true });
+    const dom = DOMPurify.sanitize(html, {
+      RETURN_DOM: true,
+      ...domPurifyConfig
+    });
     const container = document.createDocumentFragment();
     container.appendChild(dom);
     options?.modifyDom?.(container);
@@ -12767,7 +12801,7 @@ class RteFontSizePickerFeatureImpl extends RteFeatureImpl {
       toDOM: (mark) => {
         return [
           "span",
-          { style: `font-size: ${mark.attrs.size};` },
+          { style: `font-size: ${escapeCssProperty(mark.attrs.size)};` },
           0
         ];
       },
@@ -13437,7 +13471,7 @@ class RteTextColorPickerFeatureImpl extends RteFeatureImpl {
               return [
                 "span",
                 {
-                  style: `color: ${color}`,
+                  style: `color: ${escapeCssProperty(color)};`,
                   "data-text-color": color
                 },
                 0
@@ -13947,6 +13981,7 @@ const alignments = [
     label: "right"
   }
 ];
+const validTextAlign = (value) => alignments.find((a) => a.value === value)?.value ?? "left";
 class RteAlignmentFeatureImpl extends RteFeatureImpl {
   constructor() {
     super(...arguments);
@@ -13958,10 +13993,10 @@ class RteAlignmentFeatureImpl extends RteFeatureImpl {
         name: "textAlign",
         default: "left",
         fromDOM(dom) {
-          return dom.style.textAlign || "left";
+          return validTextAlign(dom.style.textAlign);
         },
         toStyles(node) {
-          return [`text-align: ${node.attrs.textAlign}`];
+          return [`text-align: ${validTextAlign(node.attrs.textAlign)}`];
         }
       })
     ];
@@ -14117,7 +14152,7 @@ class RteLinkFeatureImpl extends RteFeatureImpl {
               ],
               toDOM(node) {
                 const { href } = node.attrs;
-                return ["a", { href }, 0];
+                return ["a", { href: sanitizeLinkHref(href) }, 0];
               }
             }
           }
@@ -14522,7 +14557,7 @@ class InlineImageView {
     });
   }
   renderImg(src) {
-    this.img.src = src;
+    this.img.src = sanitizeImageSrc(src);
     this.setContent(this.img, { allowPopover: true });
   }
   update(node) {
@@ -14560,13 +14595,13 @@ class RteInlineImageFeatureImpl extends RteFeatureImpl {
       },
       parseDOM: [
         {
-          tag: "img[src]",
+          tag: "img[src],img[data-src]",
           getAttrs: (dom) => {
             const parseDimension = (dim) => {
               const value = parseInt(dim ?? "", 10);
               return isNaN(value) ? null : value;
             };
-            const srcAttr = dom.getAttribute("src");
+            const srcAttr = dom.getAttribute("data-src") ?? dom.getAttribute("src");
             const imageUrl = this.config.parseUrlFromHtml ? this.config.parseUrlFromHtml(srcAttr) : srcAttr;
             if (imageUrl === null) {
               return false;
@@ -14588,8 +14623,14 @@ class RteInlineImageFeatureImpl extends RteFeatureImpl {
         if (resolvedUrl === null) {
           return document.createTextNode("");
         }
-        const attrs = { src: resolvedUrl, alt };
-        if (size) attrs.style = `max-width: ${size}; height: auto;`;
+        const attrs = {
+          src: sanitizeImageSrc(resolvedUrl),
+          "data-src": resolvedUrl,
+          // Preserve src if it is dropped by sanitization
+          alt
+        };
+        if (size)
+          attrs.style = `max-width: ${escapeCssProperty(size)}; height: auto;`;
         if (naturalWidth) attrs.width = naturalWidth;
         if (naturalHeight) attrs.height = naturalHeight;
         return ["img", attrs];