@oracle/oraclejet 20.1.2 → 20.1.4

package/dist/js/libs/oj/debug_esm/ojdataproviderscroller.js

@@ -414,7 +414,15 @@ DataProviderContentHandler.prototype._addOrReplaceItem = function (
     var componentElement = this.m_widget.GetRootElement()[0];
     var bindingContext = this.GetBindingContext(context);
     var as = this.m_widget.getAs ? this.m_widget.getAs() : null;
-    var nodes = templateEngine.execute(componentElement, templateElement, bindingContext, as);
+    var nodes = templateEngine.execute(
+      componentElement,
+      templateElement,
+      bindingContext,
+      as,
+      undefined,
+      undefined,
+      { processTemplate: true }
+    );
     if (replaceChildCallback) {
       isCustomizeItem = replaceChildCallback(nodes);
     } else {
@@ -2814,12 +2822,9 @@ IteratingDataProviderContentHandler.prototype._renderItemsWhenIdle = function (
       addFragmentOnRequestAnimationFrame(fragment);
     });
   } else {
-    // Chromium has an issue with requestIdleCallback when mouse wheel is used, see Chrome :
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=822269
-    var options;
-    if (isMouseWheel && oj.AgentUtils.getAgentInfo().engine === oj.AgentUtils.ENGINE.BLINK) {
-      options = { timeout: 100 };
-    }
+    // Use a timeout so fetch rendering is not blocked indefinitely when the browser
+    // does not get an idle period, including scrollbar and mouse wheel scrolling.
+    var options = { timeout: 100 };
     this.m_idleCallback = window.requestIdleCallback(function (idleDeadline) {
       // no need to check for whether listview has been destroyed yet since we cancel the callback on destroy
       var timeRemaining = idleDeadline.timeRemaining();

package/dist/js/libs/oj/debug_esm/ojdatetimepicker.js

@@ -1441,6 +1441,33 @@ function _getMetaData(dayMetaData, position, params) {
   );
 }
 
+/**
+ * JET-79822 - JET - ARM5_UNCONSTRAINED- F37 - OJ-INPUT-DATE DAYFORMATTER CLASSNAME UNESCAPED IN HTML CLASS ATTRIBUTE
+ * Encodes application-supplied text before it is inserted into a generated HTML attribute string.
+ *
+ * @param {string} value value to encode
+ * @returns {string} value encoded for an HTML attribute
+ * @ignore
+ */
+function _escapeHtmlAttribute(value) {
+  return String(value).replace(/[&'"<>]/g, function (match) {
+    switch (match) {
+      case '&':
+        return '&amp;';
+      case "'":
+        return '&#39;';
+      case '"':
+        return '&quot;';
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      default:
+        return match;
+    }
+  });
+}
+
 /**
  * For default converter
  * @static
@@ -2829,9 +2856,13 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * it shows all the time.
      * </p>
      * <p>
-     * For security reasons we only support urls with protocol 'http:' or 'https:'.
-     * If the url doesn't comply we ignore it and throw an error.
-     * Pass in an encoded URL since we do not encode the URL.</p>
+     * <p><b>Note:</b> For security, JET validates the URL protocol before navigation and
+     * currently supports <code class="prettyprint">http:</code> and
+     * <code class="prettyprint">https:</code> protocols. If the url doesn't
+     * comply we ignore it and throw an error. JET does not validate whether
+     * the URL is trusted for the application. Applications are responsible
+     * for providing sanitized URLs and enforcing any required origin or host
+     * allowlist. Pass in an encoded URL since we do not encode the URL.</p>
      *
      * <p>See the <a href="#helpHints">help-hints</a> attribute for usage examples.</p>
      *
@@ -2877,6 +2908,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * <p>
      * To include formatted text in the help.instruction, format the string using html tags.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * For example the
      * help.instruction might look like:
      * <pre class="prettyprint"><code>&lt;oj-some-element help.instruction="&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html>">&lt;/oj-some-element></code></pre>
@@ -3007,6 +3040,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * hints and message summary text cannot. If you use formatted text, it should be accessible
      * and make sense to the user if formatting wasn't there.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * To format the message detail, you could do this:
      * <pre class="prettyprint"><code>&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html></code></pre>
      * </p>
@@ -3497,6 +3532,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
      * hints and message summary text cannot. If you use formatted text, it should be accessible
      * and make sense to the user if formatting wasn't there.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * To format the help.instruction, you could do this:
      * <pre class="prettyprint"><code>&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html></code></pre>
      * </p>
@@ -6851,7 +6888,7 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
               (otherMonth && daysOutsideMonth === 'hidden'
                 ? ''
                 : ' ' +
-                  daySettings[1] + // highlight custom dates
+                  _escapeHtmlAttribute(daySettings[1]) + // highlight custom dates
                   (selected ? ' ' + this._CURRENT_CLASS : '') + // highlight selected day
                   (printDate.getTime() === today.getTime() ? ' oj-datepicker-today' : '')) +
               "'" + // highlight today (if different)
@@ -11072,6 +11109,8 @@ oj.__registerWidget('oj.ojInputTime', $.oj.inputBase, {
      * hints and message summary text cannot. If you use formatted text, it should be accessible
      * and make sense to the user if formatting wasn't there.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * To format the help.instruction, you could do this:
      * <pre class="prettyprint"><code>&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html></code></pre>
      * </p>
@@ -14402,9 +14441,13 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
      * it shows all the time.
      * </p>
      * <p>
-     * For security reasons we only support urls with protocol 'http:' or 'https:'.
-     * If the url doesn't comply we ignore it and throw an error.
-     * Pass in an encoded URL since we do not encode the URL.</p>
+     * <p><b>Note:</b> For security, JET validates the URL protocol before navigation and
+     * currently supports <code class="prettyprint">http:</code> and
+     * <code class="prettyprint">https:</code> protocols. If the url doesn't
+     * comply we ignore it and throw an error. JET does not validate whether
+     * the URL is trusted for the application. Applications are responsible
+     * for providing sanitized URLs and enforcing any required origin or host
+     * allowlist. Pass in an encoded URL since we do not encode the URL.</p>
      *
      * <p>See the <a href="#helpHints">help-hints</a> attribute for usage examples.</p>
      *
@@ -14450,6 +14493,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
      * <p>
      * To include formatted text in the help.instruction, format the string using html tags.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * For example the
      * help.instruction might look like:
      * <pre class="prettyprint"><code>&lt;oj-some-element help.instruction="&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html>">&lt;/oj-some-element></code></pre>
@@ -14580,6 +14625,8 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
      * hints and message summary text cannot. If you use formatted text, it should be accessible
      * and make sense to the user if formatting wasn't there.
      * The allowed html tags are: span, b, i, em, br, hr, li, ol, ul, p, small, pre.
+     * Inline style attributes are sanitized; the retained styling is limited to color, font
+     * style, font weight, and text decoration. Use CSS classes for other styling.
      * To format the message detail, you could do this:
      * <pre class="prettyprint"><code>&lt;html>Enter &lt;b>at least&lt;/b> 6 characters&lt;/html></code></pre>
      * </p>

package/dist/js/libs/oj/debug_esm/ojdiagram.js

@@ -3728,15 +3728,15 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
   _GetComponentRendererOptions: function () {
     return [
       { path: 'tooltip/renderer', slot: 'tooltipTemplate' },
-      { path: 'nodeContent/renderer', slot: 'nodeContentTemplate' },
-      { path: 'nodeContent/focusRenderer', slot: 'nodeContentTemplate' },
-      { path: 'nodeContent/hoverRenderer', slot: 'nodeContentTemplate' },
-      { path: 'nodeContent/selectionRenderer', slot: 'nodeContentTemplate' },
-      { path: 'nodeContent/zoomRenderer', slot: 'nodeContentTemplate' },
-      { path: 'linkContent/renderer', slot: 'linkContentTemplate' },
-      { path: 'linkContent/focusRenderer', slot: 'linkContentTemplate' },
-      { path: 'linkContent/hoverRenderer', slot: 'linkContentTemplate' },
-      { path: 'linkContent/selectionRenderer', slot: 'linkContentTemplate' }
+      { path: 'nodeContent/renderer', slot: 'nodeContentTemplate', processTemplate: true },
+      { path: 'nodeContent/focusRenderer', slot: 'nodeContentTemplate', processTemplate: true },
+      { path: 'nodeContent/hoverRenderer', slot: 'nodeContentTemplate', processTemplate: true },
+      { path: 'nodeContent/selectionRenderer', slot: 'nodeContentTemplate', processTemplate: true },
+      { path: 'nodeContent/zoomRenderer', slot: 'nodeContentTemplate', processTemplate: true },
+      { path: 'linkContent/renderer', slot: 'linkContentTemplate', processTemplate: true },
+      { path: 'linkContent/focusRenderer', slot: 'linkContentTemplate', processTemplate: true },
+      { path: 'linkContent/hoverRenderer', slot: 'linkContentTemplate', processTemplate: true },
+      { path: 'linkContent/selectionRenderer', slot: 'linkContentTemplate', processTemplate: true }
     ];
   },
 
@@ -4175,21 +4175,27 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
   },
 
   // Executes the inline template and returns the nodes from the template
-  _TemplateRenderer: function (context, templateEngine, templateElement, templateName) {
+  _TemplateRenderer: function (
+    context,
+    templateEngine,
+    templateElement,
+    templateName,
+    rendererOptions
+  ) {
     var states = context.state;
     var prevStates = context.previousState;
     var id = context.id;
     this._nodeLinkContext[id] = context;
     templateEngine.defineTrackableProperty(context, 'state', states);
     templateEngine.defineTrackableProperty(context, 'prevState', prevStates);
-    return this._super(context, templateEngine, templateElement, templateName);
+    return this._super(context, templateEngine, templateElement, templateName, rendererOptions);
   },
 
-  _ProcessInlineTemplateRenderer: function (options, optionPath, templateElement, templateName) {
+  _ProcessInlineTemplateRenderer: function (options, rendererOptions, templateElement) {
     if (!this._nodeLinkContext) {
       this._nodeLinkContext = {};
     }
-    this._super(options, optionPath, templateElement, templateName);
+    this._super(options, rendererOptions, templateElement);
   },
 
   _WrapInlineTemplateRenderer: function (origRenderer, templateName, option) {

package/dist/js/libs/oj/debug_esm/ojdomutils.js

@@ -32,7 +32,16 @@ const DomUtils = {
     SMALL: 1,
     PRE: 1
   },
-  _LEGAL_ATTRIBUTES: { class: 1, style: 1 }
+  _LEGAL_ATTRIBUTES: { class: 1, style: 1 },
+  _LEGAL_CSS_PROPERTIES: {
+    color: 1,
+    'font-style': 1,
+    'font-weight': 1,
+    'text-decoration': 1,
+    'text-decoration-line': 1
+  },
+  _ILLEGAL_CSS_VALUE_PATTERN:
+    /(?:url\s*\(|expression\s*\(|behavior\s*:|-moz-binding|@import|!important|var\s*\()/i
 };
 
 /**
@@ -53,11 +62,13 @@ DomUtils.isHTMLContent = function (content) {
 };
 
 DomUtils.cleanHtml = function (value) {
-  var offSpan = $(document.createElement('span')).get(0);
-  offSpan.innerHTML = value; // @HTMLUpdateOK safe manipulation
+  var offSpan = document.createElement('span');
+  var template = document.createElement('template');
+  template.innerHTML = value; // @HTMLUpdateOK template content is sanitized before use
   if (value && value.indexOf('\x3c') >= 0) {
-    DomUtils._cleanElementHtml(offSpan);
+    DomUtils._cleanElementHtml(template.content);
   }
+  offSpan.appendChild(template.content); // @HTMLUpdateOK appending sanitized template content
   return offSpan;
 };
 
@@ -71,22 +82,73 @@ DomUtils._cleanElementHtml = function (node) {
         var attrs = child.attributes;
         for (var i = attrs.length - 1; i >= 0; i--) {
           var attr = attrs[i];
+          var attrName = attr.name.toLowerCase();
           // jquery - the .attr() method returns undefined for attributes that have not been set.
           var childHasAttr = $(child).attr(attr.name) !== undefined;
           if (childHasAttr) {
-            if (!Object.hasOwn(DomUtils._LEGAL_ATTRIBUTES, attr.name)) {
+            if (!Object.hasOwn(DomUtils._LEGAL_ATTRIBUTES, attrName)) {
               child.removeAttribute(attr.nodeName);
+            } else if (attrName === 'style') {
+              DomUtils._sanitizeStyleAttribute(child);
             }
           }
         }
         DomUtils._cleanElementHtml(child);
-      } else if (child) {
+      } else {
         node.removeChild(child);
       }
+    } else if (child && child.nodeType === 8) {
+      node.removeChild(child);
+    }
+  }
+};
+
+DomUtils._sanitizeStyleAttribute = function (node) {
+  var cleanDeclarations = [];
+  var style = node.style;
+  var properties = Array.from(style);
+
+  for (var i = 0; i < properties.length; i++) {
+    var property = properties[i];
+    var value = style.getPropertyValue(property);
+    var cleanValue = DomUtils._getCleanHtmlCssValue(
+      property,
+      value,
+      style.getPropertyPriority(property)
+    );
+
+    if (cleanValue) {
+      cleanDeclarations.push({ property: property, value: cleanValue });
+    }
+  }
+
+  node.removeAttribute('style');
+
+  if (cleanDeclarations.length > 0) {
+    for (var j = 0; j < cleanDeclarations.length; j++) {
+      var cleanDeclaration = cleanDeclarations[j];
+      node.style.setProperty(cleanDeclaration.property, cleanDeclaration.value);
     }
   }
 };
 
+DomUtils._getCleanHtmlCssValue = function (property, value, priority) {
+  if (
+    !Object.hasOwn(DomUtils._LEGAL_CSS_PROPERTIES, property) ||
+    !value ||
+    priority ||
+    DomUtils._ILLEGAL_CSS_VALUE_PATTERN.test(value)
+  ) {
+    return null;
+  }
+
+  if (window.CSS && CSS.supports && !CSS.supports(property, value)) {
+    return null;
+  }
+
+  return value;
+};
+
 /**
  * Checks to see if the "ancestorNode" is a ancestor of "node".
  *
@@ -1011,10 +1073,10 @@ DomUtils.isLogicalAncestorOrSelf = function (ancestorNode, node) {
 };
 
 /**
- * Checks whether the href represents a safe URL
+ * Checks whether the href uses an allowed URL protocol.
  * @param {!string} href - HREF to test
  * @param {Array=} whitelist - optional list of the allowed protocols. Protocol name has to use lowercase letters and
- * be followed by a ':'. If the parameter is ommitted, ['http:', 'https:'] will be used
+ * be followed by a ':'. If the parameter is omitted, ['http:', 'https:'] will be used
  * @throws {Exception} an error if the HREF represents an invalid URL
  * @ignore
  */
@@ -1028,10 +1090,12 @@ DomUtils.validateURL = function (href, whitelist) {
   if (protocol != null) {
     protocol = protocol.toLowerCase();
   }
-  // if it isn't on the allowed list and it isn't '', throw an error.
-  // IE11 returns '' for hrefs like 'abc', other browsers return 'https'
-  // and we want to allow hrefs like 'abc' since those are relative urls.
-  if (allowed.indexOf(protocol) < 0 && protocol !== '') {
+  // Security issues JET-79830, JET-79570, and JET-79644 flagged the legacy
+  // empty-protocol allowance. IE11 returned '' for some relative URLs, but IE11
+  // is no longer supported. Modern browsers resolve relative URLs against the
+  // document URL before exposing the protocol, so an empty protocol is not
+  // treated as valid.
+  if (allowed.indexOf(protocol) < 0) {
     throw new Error(protocol + ' is not a valid URL protocol');
   }
 };

package/dist/js/libs/oj/debug_esm/ojdvt-base.js

@@ -2428,7 +2428,11 @@ oj.__registerWidget(
       if (options.selection !== undefined) {
         this._component.select(options.selection);
       }
-      if (options.dataCursorPosition !== undefined && this._component.positionDataCursor && !this._isSubtreeDetached) {
+      if (
+        options.dataCursorPosition !== undefined &&
+        this._component.positionDataCursor &&
+        !this._isSubtreeDetached
+      ) {
         this._component.positionDataCursor(options.dataCursorPosition);
       }
       if (options.scrollPosition !== undefined) {
@@ -3559,11 +3563,12 @@ oj.__registerWidget(
       if (this._IsCustomElement()) {
         var renderers = this._GetComponentRendererOptions();
         for (var i = 0; i < renderers.length; i++) {
-          var optionPath = renderers[i].path;
-          var slot = renderers[i].slot;
+          var rendererOptions = renderers[i];
+          var optionPath = rendererOptions.path;
+          var slot = rendererOptions.slot;
           var templates = this._TemplateHandler.getTemplates();
           if (slot && templates[slot] && templates[slot][0]) {
-            this._ProcessInlineTemplateRenderer(options, optionPath, templates[slot][0], slot);
+            this._ProcessInlineTemplateRenderer(options, rendererOptions, templates[slot][0]);
           } else {
             var path = new DvtJsonPath(options, optionPath);
             var value = path.getValue();
@@ -3688,21 +3693,28 @@ oj.__registerWidget(
     /**
      * Creates a callback function that will be used as a custom renderer for an inline template slot.
      * @param {Object} options Options for rendering the component
-     * @param {string} optionPath The path to set the generated renderer function
+     * @param {Object} rendererOptions The renderer path, slot, and optional template processing metadata
      * @param {Element} templateElement The <template> element
-     * @param {string} templateName The name of the template
      * @return {Function} A function that will be used as a custom renderer
      * @protected
      * @memberof oj.dvtBaseComponent
      */
-    _ProcessInlineTemplateRenderer: function (options, optionPath, templateElement, templateName) {
+    _ProcessInlineTemplateRenderer: function (options, rendererOptions, templateElement) {
+      var optionPath = rendererOptions.path;
+      var templateName = rendererOptions.slot;
       var renderCount = this._renderCount;
       this._numDeferredObjs += 1;
       var templateEnginePromise = this._TemplateHandler.getTemplateEngine();
       templateEnginePromise.then(
         function (templateEngine) {
           var templateRenderer = function (context) {
-            return this._TemplateRenderer(context, templateEngine, templateElement, templateName);
+            return this._TemplateRenderer(
+              context,
+              templateEngine,
+              templateElement,
+              templateName,
+              rendererOptions
+            );
           }.bind(this);
           templateRenderer = this._WrapInlineTemplateRenderer(
             templateRenderer,
@@ -3725,12 +3737,29 @@ oj.__registerWidget(
      * @param {Object} templateEngine The template engine to be used to process templates
      * @param {Element} templateElement The <template> element
      * @param {string} templateName The name of the template
+     * @param {Object} rendererOptions The renderer path, slot, and optional template processing metadata
      * @return {Object}
      * @protected
      * @memberof oj.dvtBaseComponent
      */
-    _TemplateRenderer: function (context, templateEngine, templateElement, templateName) {
-      var nodes = templateEngine.execute(this.element[0], templateElement, context);
+    _TemplateRenderer: function (
+      context,
+      templateEngine,
+      templateElement,
+      templateName,
+      rendererOptions
+    ) {
+      var executionOptions =
+        rendererOptions && rendererOptions.processTemplate ? { processTemplate: true } : undefined;
+      var nodes = templateEngine.execute(
+        this.element[0],
+        templateElement,
+        context,
+        undefined,
+        undefined,
+        undefined,
+        executionOptions
+      );
       if (nodes && nodes.length > 0) {
         Object.defineProperty(context, '_templateCleanup', {
           value: () => {