@devvit/ui-renderer 0.10.10-next-2023-11-14-d6fe14bf4.0 → 0.10.10-next-2023-11-14-fabd613d1.0

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;AAGvC,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,CA8C/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;AAGvC,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,CAiD/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, onClickAction, resizeModeClass } 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) {
@@ -27,7 +27,7 @@ export function renderImageBlock(block, ctx) {
     const onClick = onClickAction(block, ctx);
     return html `
     <img
-      src="${imageUrl}"
+      src="${isDataUrl(imageUrl) ? sanitizeDataUrl(imageUrl) : imageUrl}"
       width="${width}"
       height="${height}"
       alt="${description}"
@@ -36,7 +36,10 @@ export function renderImageBlock(block, ctx) {
       @click="${ifDefined(onClick)}"
       data-debug-block-type="image"
       @error="${{
-        handleEvent: (event) => (event.target.src = FALLBACK_IMG_URL),
+        handleEvent: (event) => {
+            console.error(`An error rendering the image with url:`, imageUrl);
+            event.target.src = FALLBACK_IMG_URL;
+        },
         once: true,
     }}"
     />

package/blocks/templates/util.d.ts

@@ -1,8 +1,8 @@
+import { TemplateResult, nothing } from 'lit';
 import type { DirectiveClass, DirectiveResult } from 'lit/directive.js';
 import { ClassInfo, classMap as clientClassMap } from 'lit/directives/class-map.js';
-import { ref as clientRef, RefOrCallback } from 'lit/directives/ref.js';
+import { RefOrCallback, ref as clientRef } from 'lit/directives/ref.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
-import { nothing, TemplateResult } from 'lit';
 import type { UnsafeString } from '@reddit/baseplate/html.js';
 import { Block, BlockColor, BlockSizes, BlockSizes_Dimension_Value, BlockSizeUnit } from '@devvit/protos';
 export type TemplateLike = TemplateResult | typeof nothing;
@@ -16,6 +16,23 @@ export declare function resolveIcon(name: string): TemplateResult;
  * @param styleInfo
  */
 export declare function sanitizeStyleInfo(styleInfo: StyleInfo): StyleInfo;
+export declare function isDataUrl(input: string): boolean;
+export declare function parseDataUrl(dataUrl: string): {
+    mimeType: string | undefined;
+    charset: string | undefined;
+    isBase64: boolean;
+    data: string;
+} | null;
+export declare function isAcceptableDataUrl(maybeDataUrl: string): boolean;
+/**
+ * Attempts to sanitize data URLs to prevent two things:
+ *
+ * 1. XSS attacks
+ * 2. Allowing images to be shown to users that bypass Reddit's safety checks
+ *
+ * NOTE: We only allow a mime type of image/svg+xml at this time.
+ */
+export declare function sanitizeDataUrl(dataUrl: string): string;
 export declare function isValidImageURL(imageUrl: string): boolean;
 /**
  * Returns a BlockSizes object either directly from the block or constructs

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,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,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,CAW5C;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;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAWzD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,CA2B7D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,0BAA0B,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKhG;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":"AACA,OAAO,EAAE,cAAc,EAAE,OAAO,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,aAAa,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,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,CAW5C;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;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAyIvD;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,CAAC,KAAK,EAAE,0BAA0B,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKhG;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

@@ -1,6 +1,7 @@
+import DOMPurify from 'isomorphic-dompurify';
 import { classMap as clientClassMap } from 'lit/directives/class-map.js';
-import { unsafeHTML as clientUnsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ref as clientRef } from 'lit/directives/ref.js';
+import { unsafeHTML as clientUnsafeHTML } from 'lit/directives/unsafe-html.js';
 import { unsafeHTML as serverUnsafeHTML } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
@@ -67,8 +68,183 @@ export function sanitizeStyleInfo(styleInfo) {
     }
     return styleInfo;
 }
+const DATA_URL_REGEX = 
+// eslint-disable-next-line security/detect-unsafe-regex
+/^data:([a-zA-Z]+\/[a-zA-Z0-9.+_-]+)?(;charset=[a-zA-Z0-9._+-]+)?(;base64)?,(.*)/;
+function preprocessDataUrl(input) {
+    /**
+     * This can be submitted to us as multi-line and that will break the parser
+     * so we remove all newlines here
+     */
+    return input.trim().replace(/[\r\n]+/g, '');
+}
+export function isDataUrl(input) {
+    return !!preprocessDataUrl(input).match(DATA_URL_REGEX);
+}
+export function parseDataUrl(dataUrl) {
+    const matches = DATA_URL_REGEX.exec(preprocessDataUrl(dataUrl));
+    if (!matches)
+        return null;
+    return {
+        mimeType: matches[1],
+        charset: matches[2]?.split('=')[1],
+        isBase64: !!matches[3],
+        data: matches[4].trim(),
+    };
+}
+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'];
+    return ACCEPTABLE_MIME_TYPES.includes(mimeType);
+}
+export function isAcceptableDataUrl(maybeDataUrl) {
+    const parsedDataUrl = parseDataUrl(maybeDataUrl);
+    if (!parsedDataUrl?.mimeType)
+        return false;
+    return isAcceptableDataUrlMimeType(parsedDataUrl.mimeType);
+}
+/**
+ * Attempts to sanitize data URLs to prevent two things:
+ *
+ * 1. XSS attacks
+ * 2. Allowing images to be shown to users that bypass Reddit's safety checks
+ *
+ * NOTE: We only allow a mime type of image/svg+xml at this time.
+ */
+export function sanitizeDataUrl(dataUrl) {
+    const parsedDataUrl = parseDataUrl(dataUrl);
+    if (!parsedDataUrl || !parsedDataUrl.data || !parsedDataUrl.mimeType)
+        return '';
+    if (!isAcceptableDataUrlMimeType(parsedDataUrl.mimeType))
+        return '';
+    try {
+        let dataToSanitize;
+        if (parsedDataUrl.isBase64) {
+            dataToSanitize = decodeURIComponent(atob(parsedDataUrl.data));
+        }
+        else {
+            dataToSanitize = decodeURIComponent(parsedDataUrl.data);
+        }
+        const sanitizeCss = (cssText) => {
+            // Define a regex pattern that matches CSS properties that can include URLs
+            const urlPattern = 
+            // eslint-disable-next-line security/detect-unsafe-regex
+            /(?:background(-image)?|border-image(-source)?)\s*:\s*(url\(['"]?(data:image\/(?:png|jpeg|gif);base64,[^)]+|https?:\/\/[^)]+)['"]?\))(?:;\s*)?/gi;
+            // Remove any matching URL patterns from the CSS text
+            return cssText.replace(urlPattern, '');
+        };
+        // This is for <style> tags
+        DOMPurify.addHook('uponSanitizeElement', (node) => {
+            if (node.tagName === 'style') {
+                if (node.textContent) {
+                    node.textContent = sanitizeCss(node.textContent);
+                }
+            }
+            /**
+             * xmlns is optional when using a SVG inside of the DOM. However,
+             * since we are using it within a data url, it is required.
+             *
+             * https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed
+             */
+            if (node.tagName === 'svg') {
+                if (!node.getAttribute('xmlns')) {
+                    node.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+                }
+            }
+        });
+        // This is for style attribute tags
+        DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
+            if (data.attrName === 'style') {
+                data.attrValue = sanitizeCss(data.attrValue);
+            }
+        });
+        const sanitized = DOMPurify.sanitize(dataToSanitize, {
+            // Only allow svg and associated tags
+            // Note that these are some of the big offenders that are left out:
+            // 'script', 'image', 'foreignObject', 'object', 'use'
+            //
+            // To support more mimeTypes, remove the ALLOWED_TAGS array fully.
+            //
+            // src: https://github.com/cure53/DOMPurify/blob/2c66eb1f6ae39cc7001a97889a9bb78b688a6f99/src/tags.js#L124
+            ALLOWED_TAGS: [
+                'svg',
+                'altglyph',
+                'altglyphdef',
+                'altglyphitem',
+                'animatecolor',
+                'animatemotion',
+                'animatetransform',
+                'circle',
+                'clippath',
+                'defs',
+                'desc',
+                'ellipse',
+                'filter',
+                'font',
+                'g',
+                'glyph',
+                'glyphref',
+                'hkern',
+                'line',
+                'lineargradient',
+                'marker',
+                'mask',
+                'metadata',
+                'mpath',
+                'path',
+                'pattern',
+                'polygon',
+                'polyline',
+                'radialgradient',
+                'rect',
+                'stop',
+                'style',
+                'switch',
+                'symbol',
+                'text',
+                'textpath',
+                'title',
+                'tref',
+                'tspan',
+                'view',
+                'vkern',
+            ],
+            // These are required for svg animate tags
+            ADD_ATTR: ['from', 'to', 'animate'],
+            FORBID_ATTR: ['image'],
+        });
+        // 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 '';
+    }
+}
 export function isValidImageURL(imageUrl) {
     try {
+        if (isDataUrl(imageUrl))
+            return isAcceptableDataUrl(imageUrl);
         // 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.10-next-2023-11-14-d6fe14bf4.0",
+  "version": "0.10.10-next-2023-11-14-fabd613d1.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -54,10 +54,11 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.10.10-next-2023-11-14-d6fe14bf4.0",
-    "@devvit/runtime-lite": "0.10.10-next-2023-11-14-d6fe14bf4.0",
-    "@devvit/runtimes": "0.10.10-next-2023-11-14-d6fe14bf4.0",
+    "@devvit/protos": "0.10.10-next-2023-11-14-fabd613d1.0",
+    "@devvit/runtime-lite": "0.10.10-next-2023-11-14-fabd613d1.0",
+    "@devvit/runtimes": "0.10.10-next-2023-11-14-fabd613d1.0",
     "@lottiefiles/lottie-player": "1.7.1",
+    "isomorphic-dompurify": "1.9.0",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
   },
@@ -83,11 +84,12 @@
   "devDependencies": {
     "@devvit/eslint-config": "0.10.9",
     "@devvit/repo-tools": "0.10.9",
-    "@devvit/tsconfig": "0.10.10-next-2023-11-14-d6fe14bf4.0",
+    "@devvit/tsconfig": "0.10.10-next-2023-11-14-fabd613d1.0",
     "@lit/localize": "0.11.4",
     "@open-wc/testing-helpers": "2.3.0",
     "@reddit/baseplate": "0.14.0",
     "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
+    "@types/dompurify": "3.0.5",
     "autoprefixer": "10.4.14",
     "backstopjs": "6.2.1",
     "chokidar": "3.5.3",
@@ -112,5 +114,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "bc36a2bf53e5626e925cf6733b7c83df67fbfa26"
+  "gitHead": "6f6cadcdc83bf711b273e7359ae4976bbaea29b5"
 }