@devvit/ui-renderer 0.10.11-next-2023-12-12-e793f90f9.0 → 0.10.11-next-2023-12-12-ce6339b27.0

package/blocks/attributes.js

@@ -486,7 +486,7 @@ export function imageStyle(url, resizeMode, width, height) {
             size['backgroundSize'] = `${width}px ${height}px`;
     }
     return {
-        backgroundImage: `url(${url})`,
+        backgroundImage: `url('${url}')`,
         width: `${width}px`,
         height: `${height}px`,
         ...size,

package/blocks/templates/renderImageBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAA6B,YAAY,EAAE,MAAM,WAAW,CAAC;AAKpE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAsD/E"}
+{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAyD,YAAY,EAAE,MAAM,WAAW,CAAC;AAKhG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA0D/E"}

package/blocks/templates/renderImageBlock.js

@@ -1,7 +1,7 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { defaultClasses, defaultStyles, imageClasses, imageStyle, onClickAction, } from '../attributes.js';
-import { classMap, isValidImageURL } from './util.js';
+import { classMap, isDataUrl, isValidImageURL, sanitizeDataUrl } from './util.js';
 import { VerifiedPublicImageHosts } from './constants.js';
 const FALLBACK_IMG_URL = 'https://i.redd.it/p1vmc5ulmpib1.png';
 export function renderImageBlock(block, ctx) {
@@ -17,6 +17,10 @@ export function renderImageBlock(block, ctx) {
         // Replace url with a fallback snoo
         imageUrl = FALLBACK_IMG_URL;
     }
+    else if (isDataUrl(imageUrl)) {
+        const sanitized = sanitizeDataUrl(imageUrl);
+        imageUrl = sanitized ?? FALLBACK_IMG_URL;
+    }
     const classes = {
         ...defaultClasses(block, ctx),
         ...imageClasses(resizeMode),

package/blocks/templates/util.d.ts

@@ -23,6 +23,10 @@ export declare function parseDataUrl(dataUrl: string): {
     isBase64: boolean;
     data: string;
 } | null;
+/**
+ * Only supports SVG elements!
+ */
+export declare function sanitizeDataUrl(dataUrl: string): string | undefined;
 export declare function isAcceptableDataUrl(maybeDataUrl: string): boolean;
 export declare function isValidImageURL(imageUrl: string): boolean;
 /**

package/blocks/templates/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKnE,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EACV,0BAA0B,EAC1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAiB5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CASjE;AAcD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG;IAC7C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAWP;AASD,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAMjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAazD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,CA2B7D;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,0BAA0B,GAAG,SAAS,EAC7C,QAAQ,GAAE,aAAa,GAAG,SAAqB,GAC9C,MAAM,GAAG,SAAS,CAKpB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAUpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAC/B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAIzD"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKnE,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EACV,0BAA0B,EAC1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAGxB,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAiB5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CASjE;AAcD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG;IAC7C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAWP;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAmDnE;AASD,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAMjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAazD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,CA2B7D;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,0BAA0B,GAAG,SAAS,EAC7C,QAAQ,GAAE,aAAa,GAAG,SAAqB,GAC9C,MAAM,GAAG,SAAS,CAKpB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAUpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAC/B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAIzD"}

package/blocks/templates/util.js

@@ -6,6 +6,7 @@ import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUICo
 import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
 import { REDD_IT, VerifiedImageHosts } from './constants.js';
 import { BlockSizeUnit, } from '@devvit/protos';
+import { sanitizeSvg } from '@devvit/shared-types/sanitizeSvg.js';
 export function classMap(classInfo, forceString) {
     const { getType } = getTemplateRenderingStrategy();
     if (getType() === 'client' && forceString !== true) {
@@ -96,6 +97,57 @@ export function parseDataUrl(dataUrl) {
         data: matches[4].trim(),
     };
 }
+/**
+ * Only supports SVG elements!
+ */
+export function sanitizeDataUrl(dataUrl) {
+    const parsedDataUrl = parseDataUrl(dataUrl);
+    if (!parsedDataUrl || !parsedDataUrl.data || !parsedDataUrl.mimeType)
+        return undefined;
+    if (!isAcceptableDataUrlMimeType(parsedDataUrl.mimeType))
+        return undefined;
+    try {
+        let dataToSanitize;
+        if (parsedDataUrl.isBase64) {
+            dataToSanitize = decodeURIComponent(atob(parsedDataUrl.data));
+        }
+        else {
+            dataToSanitize = decodeURIComponent(parsedDataUrl.data);
+        }
+        // If you add more mimtypes in the future make sure to handle sanitizing them here!
+        const sanitized = sanitizeSvg(dataToSanitize);
+        // Break early if sanitizing failed!
+        if (sanitized === undefined) {
+            return undefined;
+        }
+        // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+        let sanitizedDataUrl = `data:${parsedDataUrl.mimeType}`;
+        if (parsedDataUrl.charset) {
+            sanitizedDataUrl += `;charset=${parsedDataUrl.charset}`;
+        }
+        if (parsedDataUrl.isBase64) {
+            // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+            sanitizedDataUrl += `;base64`;
+        }
+        /**
+         * In data url land there are characters that need to be encoded that
+         * a user may have passed in like hex-code colors that will break
+         * the image without giving any relevant messages. To be safe, we
+         * encode the entire sanitized string.
+         *
+         * More info:
+         * https://stackoverflow.com/questions/69216560/why-hexadecimal-color-dont-work-with-utf8-data-url-s-for-svg
+         *
+         * You may be able to get away with just replacing # with %23 in case
+         * people complain about the data url being hard to read.
+         */
+        sanitizedDataUrl += `,${parsedDataUrl.isBase64 ? btoa(sanitized) : encodeURIComponent(sanitized)}`;
+        return sanitizedDataUrl;
+    }
+    catch (error) {
+        return undefined;
+    }
+}
 function isAcceptableDataUrlMimeType(mimeType) {
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types
     const ACCEPTABLE_MIME_TYPES = ['image/svg+xml'];
@@ -109,8 +161,8 @@ export function isAcceptableDataUrl(maybeDataUrl) {
 }
 export function isValidImageURL(imageUrl) {
     try {
-        if (isDataUrl(imageUrl))
-            return false;
+        if (isAcceptableDataUrl(imageUrl))
+            return true;
         // The second "base" param helps to handle relative paths to local files
         // https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#parameters
         const hostName = new URL(imageUrl, `https://i.${REDD_IT}`)?.hostname;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.10.11-next-2023-12-12-e793f90f9.0",
+  "version": "0.10.11-next-2023-12-12-ce6339b27.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -54,9 +54,10 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.10.11-next-2023-12-12-e793f90f9.0",
-    "@devvit/runtime-lite": "0.10.11-next-2023-12-12-e793f90f9.0",
-    "@devvit/runtimes": "0.10.11-next-2023-12-12-e793f90f9.0",
+    "@devvit/protos": "0.10.11-next-2023-12-12-ce6339b27.0",
+    "@devvit/runtime-lite": "0.10.11-next-2023-12-12-ce6339b27.0",
+    "@devvit/runtimes": "0.10.11-next-2023-12-12-ce6339b27.0",
+    "@devvit/shared-types": "0.10.11-next-2023-12-12-ce6339b27.0",
     "@lottiefiles/lottie-player": "1.7.1",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
@@ -83,7 +84,7 @@
   "devDependencies": {
     "@devvit/eslint-config": "0.10.10",
     "@devvit/repo-tools": "0.10.10",
-    "@devvit/tsconfig": "0.10.11-next-2023-12-12-e793f90f9.0",
+    "@devvit/tsconfig": "0.10.11-next-2023-12-12-ce6339b27.0",
     "@lit-labs/ssr": "^2.2.3",
     "@lit/localize": "0.11.4",
     "@open-wc/testing-helpers": "2.3.0",
@@ -115,5 +116,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "0146cb7c5fbe2694fb7128b2056af2249810b4a7"
+  "gitHead": "6025e78ec3faa75e9fc159c5eede2090df2fc96e"
 }