@isrd-isi-edu/ermrestjs 2.9.1 → 2.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@isrd-isi-edu/ermrestjs",
   "description": "ERMrest client library in JavaScript",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "license": "Apache-2.0",
   "engines": {
     "node": ">= 20.0.0",
@@ -59,7 +59,8 @@
     "handlebars": "4.7.9",
     "lodash-es": "^4.18.1",
     "lz-string": "^1.5.0",
-    "markdown-it": "12.3.2",
+    "markdown-it": "14.2.0",
+    "markdown-it-attrs": "5.0.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.48",
     "mustache": "x",

package/src/services/handlebars.ts

@@ -400,7 +400,16 @@ export default class HandlebarsService {
           precision = options.hash.precision;
           tooltip = options.hash.tooltip;
         }
-        return _formatUtils.humanizeBytes(value, mode, precision, tooltip);
+
+        /**
+         * humanizeBytes generates markup like this:
+         * :span:1.23 KB:/span:{data-chaise-tooltip="1.23 KB"}
+         * So we have to make sure handlebars is not HTML-escaping it. Doing so breaks the attribute markup.
+         * NOTE: this is safe only because humanizeBytes derives its output entirely from the numeric byte value
+         * (no user-provided text). If we ever let users supply their own tooltip text, the SafeString would expose
+         * an HTML-injection vector and we'd need a different solution (escape the user portion before returning).
+         */
+        return new Handlebars.SafeString(_formatUtils.humanizeBytes(value, mode, precision, tooltip));
       },
 
       /**
@@ -422,7 +431,16 @@ export default class HandlebarsService {
           direction = options.hash.direction;
           tooltip = options.hash.tooltip;
         }
-        return _formatUtils.datetimeDuration(start, end, unit, fraction, direction, tooltip);
+
+        /**
+         * datetimeDuration generates markup like this:
+         * :span:+1.1 months:/span:{data-chaise-tooltip="1.1 months"}
+         * So we have to make sure handlebars is not HTML-escaping it. Doing so breaks the attribute markup.
+         * NOTE: this is safe only because datetimeDuration derives its output entirely from the start/end values
+         * (no user-provided text). If we ever let users supply their own tooltip text, the SafeString would expose
+         * an HTML-injection vector and we'd need a different solution (escape the user portion before returning).
+         */
+        return new Handlebars.SafeString(_formatUtils.datetimeDuration(start, end, unit, fraction, direction, tooltip));
       },
 
       /**

package/src/services/http.ts

@@ -304,8 +304,10 @@ export default class HTTPService {
                 }
               } else {
                 // If we get an HTTP error with HTML in it, this means something the server returned as an error.
-                // Ermrest never produces HTML errors, so this was produced by the server itself
-                if (contentType && contentType.indexOf('html') > -1) {
+                // Ermrest never produces HTML errors, so this was produced by the server itself.
+                // Callers that hit non-ermrest endpoints (e.g. checking an arbitrary image URL) can set
+                // `skipHTTPErrorStatusReplacement` to keep the raw status instead of masking it as 500.
+                if (contentType && contentType.indexOf('html') > -1 && !config.skipHTTPErrorStatusReplacement) {
                   response.status = _http_status_codes.internal_server_error;
                   // keep response.data the way it is, so client can provide more info to users
                 }

package/src/utils/constants.ts

@@ -480,6 +480,8 @@ export const _classNames = Object.freeze({
   showInPrintMode: 'video-info-in-print',
   colorPreview: 'chaise-color-preview',
   imagePreview: 'chaise-image-preview',
+  // chaise attaches an onerror handler to images with this class to show a fallback
+  imageFallback: 'chaise-image-fallback',
 });
 
 export const _specialSourceDefinitions = Object.freeze({

package/src/utils/format-utils.ts

@@ -573,6 +573,9 @@ export function printColor(value: any, options?: any): string {
  *                   output in a Chaise tooltip span showing the raw byte
  *                   count and the unit conversion factor
  * @returns the humanized byte string
+ *
+ * SECURITY: Do NOT interpolate raw, user-controlled strings into the output without escaping/validating them first.
+ * The handlebars `humanizeBytes` helper returns this output as a Handlebars.SafeString (unescaped).
  */
 export function humanizeBytes(value: any, mode?: any, precision?: any, withTooltip?: any): string {
   // we cannot use parseInt here since it won't allow larger numbers.
@@ -642,6 +645,9 @@ export function humanizeBytes(value: any, mode?: any, precision?: any, withToolt
  *                   tooltip body would conflict with the calendar walk
  *                   already visible in line 1)
  * @returns the formatted duration string
+ *
+ * SECURITY: Do NOT interpolate raw, user-controlled strings into the output without escaping/validating them first.
+ * The handlebars `datetimeDuration` helper returns this output as a Handlebars.SafeString (unescaped).
  */
 export function datetimeDuration(start: any, end: any, unit?: any, fraction?: any, direction?: any, withTooltip?: any): string {
   const startM = moment(start);

package/src/utils/markdown-utils.ts

@@ -12,9 +12,11 @@ import markdownItSub from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-sub.min';
 import markdownItSup from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-sup.min';
 import markdownItSpan from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-span';
 import markdownItEscape from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-escape';
-import markdownItAttrs from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-attrs';
 import MarkdownItContainer from '@isrd-isi-edu/ermrestjs/vendor/markdown-it-container.min';
 
+// npm package (replaces the previously vendored markdown-it-attrs)
+import markdownItAttrs from 'markdown-it-attrs';
+
 let _markdownItDefaultImageRenderer: any = null;
 export const MarkdownIt = markdownit({ typographer: true, breaks: true })
   .use(markdownItSub)
@@ -32,11 +34,48 @@ _bindCustomMarkdownTags(MarkdownIt);
  * @param throwError if true, it will throw the error instead of swalloing it
  */
 export function renderMarkdown(value: string, inline?: boolean, throwError?: boolean) {
+  /*
+   * markdown-it-attrs 5.x catches errors thrown while applying an attribute
+   * block and only reports them via `console.error` (it has no error callback
+   * or opt-out). To preserve the old "if anything fails, show the raw value"
+   * behavior, trap that signal during the render and treat it as a failure so
+   * we fall back to the raw value below instead of returning a partial render.
+   */
+  let attrsError: string | null = null;
+  // message of the failure we just captured; used to recognize its stack-trace follow-up
+  let pendingMessage: string | null = null;
+  const consoleError = console.error;
+  console.error = (...args: any[]) => {
+    if (typeof args[0] === 'string' && args[0].indexOf('markdown-it-attrs:') === 0) {
+      attrsError = args[0];
+      /*
+       * markdown-it-attrs logs the message above and then `console.error(error.stack)`
+       * on the very next call (see its index.js: the two calls are consecutive and
+       * synchronous). error.stack is a string, not an Error, so we match it by content:
+       * the stack embeds the same `error.message` that trails this message.
+       */
+      pendingMessage = args[0].replace(/^markdown-it-attrs: Error in pattern '.*?': /, '');
+      return;
+    }
+    // swallow only that stack-trace follow-up; anything else is unrelated and must pass through
+    if (pendingMessage !== null) {
+      const message = pendingMessage;
+      pendingMessage = null;
+      if (message.length > 0 && typeof args[0] === 'string' && args[0].indexOf(message) !== -1) {
+        return;
+      }
+    }
+    consoleError.apply(console, args);
+  };
+
   try {
-    if (inline) {
-      return MarkdownIt.renderInline(value);
+    const rendered = inline ? MarkdownIt.renderInline(value) : MarkdownIt.render(value);
+    pendingMessage = null; // render is done; don't let a dangling flag swallow our own catch logging
+    // markdown-it-attrs only logs (never throws), so re-throw here to fall back to the raw value
+    if (attrsError !== null) {
+      throw new Error(attrsError);
     }
-    return MarkdownIt.render(value);
+    return rendered;
   } catch (e) {
     if (throwError) {
       throw e;
@@ -45,6 +84,8 @@ export function renderMarkdown(value: string, inline?: boolean, throwError?: boo
     $log.error(`Couldn't parse the given markdown value: ${value}`);
     $log.error(e);
     return value;
+  } finally {
+    console.error = consoleError;
   }
 }
 
@@ -476,8 +517,9 @@ function _bindCustomMarkdownTags(md: typeof MarkdownIt) {
           if (attrs[0].children[0].type == 'link_open') {
             let imageHTML = '<img ';
             const openingLink = attrs[0].children[0];
-            let enlargeLink,
-              posTop = true;
+            let enlargeLink;
+            let posTop = true;
+            let imageClass = _classNames.imageFallback;
 
             // Add all attributes to the image
             openingLink.attrs!.forEach(function (attr) {
@@ -497,12 +539,15 @@ function _bindCustomMarkdownTags(md: typeof MarkdownIt) {
                 case 'pos':
                   posTop = attr[1].toLowerCase() == 'bottom' ? false : true;
                   break;
+                case 'class':
+                  imageClass += ' ' + attr[1];
+                  break;
                 default:
                   imageHTML += attr[0] + '="' + attr[1] + '" ';
               }
             });
 
-            html += imageHTML + '/>';
+            html += imageHTML + 'class="' + imageClass + '" />';
 
             let captionHTML = '';
 
@@ -918,16 +963,17 @@ function _bindCustomMarkdownTags(md: typeof MarkdownIt) {
       };
   }
 
-  // the class that we should add
-  const className = _classNames.postLoad;
+  // the classes that we should add (post-load for layout, image-fallback so chaise
+  // can swap in a fallback image when the image fails to load)
+  const imgClassName = _classNames.postLoad + ' ' + _classNames.imageFallback;
   md.renderer.rules.image = function (tokens, idx, options, env, self) {
     const token = tokens[idx];
 
     const cIndex = token.attrIndex('class');
     if (cIndex < 0) {
-      token.attrPush(['class', className]);
+      token.attrPush(['class', imgClassName]);
     } else {
-      token.attrs![cIndex][1] += ' ' + className;
+      token.attrs![cIndex][1] += ' ' + imgClassName;
     }
 
     return _markdownItDefaultImageRenderer(tokens, idx, options, env, self);