@vonage/vivid 5.10.0 → 5.12.0

package/icon/definition.cjs

@@ -10,7 +10,7 @@ const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.7.0';
+const ICONS_VERSION = '4.7.1';
 
 const numberConverter = {
   toView(value) {

package/icon/definition.js

@@ -6,7 +6,7 @@ import { classNames } from '@microsoft/fast-web-utilities';
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
-const ICONS_VERSION = '4.7.0';
+const ICONS_VERSION = '4.7.1';
 
 const numberConverter = {
   toView(value) {

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.12.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -89,16 +89,16 @@
     "vitest-fetch-mock": "^0.4.5",
     "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/eslint-config": "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/typescript-config": "1.0.0",
     "@repo/tools": "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];