Potential Cross Site Scripting (XSS) via the "Name" field (Taxons, Products, Options, Variants) in the Admin Panel workaround

bash.sh

yarn build

entry.js

// assets/admin/entry.js
// ...
import './sylius-lazy-choice-tree';
import './sylius-auto-complete';
import './sylius-product-auto-complete';

sylius-auto-complete.js

// assets/admin/sylius-auto-complete.js

function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input;
  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts
}

$.fn.extend({
  autoComplete() {
    this.each((idx, el) => {
      const element = $(el);
      const criteriaName = element.data('criteria-name');
      const choiceName = element.data('choice-name');
      const choiceValue = element.data('choice-value');
      const autocompleteValue = element.find('input.autocomplete').val();
      const loadForEditUrl = element.data('load-edit-url');

      element.dropdown({
        delay: {
          search: 250,
        },
        forceSelection: false,
        saveRemoteData: false,
        verbose: true,
        apiSettings: {
          dataType: 'JSON',
          cache: false,
          beforeSend(settings) {
            /* eslint-disable-next-line no-param-reassign */
            settings.data[criteriaName] = settings.urlData.query;

            return settings;
          },
          onResponse(response) {
            let results = response.map(item => ({
              name: sanitizeInput(item[choiceName]),
              value: sanitizeInput(item[choiceValue]),
            }));

            if (!element.hasClass('multiple')) {
              results.unshift({
                name: ' ',
                value: '',
              });
            }

            return {
              success: true,
              results: results,
            };
          },
        },
      });

      if (autocompleteValue.split(',').filter(String).length > 0) {
        const menuElement = element.find('div.menu');

        menuElement.api({
          on: 'now',
          method: 'GET',
          url: loadForEditUrl,
          beforeSend(settings) {
            /* eslint-disable-next-line no-param-reassign */
            settings.data[choiceValue] = autocompleteValue.split(',').filter(String);

            return settings;
          },
          onSuccess(response) {
            response.forEach((item) => {
              menuElement.append((
                $(`<div class="item" data-value="${item[choiceValue]}">${item[choiceName]}</div>`)
              ));
            });

            element.dropdown('refresh');
            element.dropdown('set selected', element.find('input.autocomplete').val().split(',').filter(String));
          },
        });
      }
    });
  },
});

sylius-lazy-choice-tree.js

// assets/admin/sylius-lazy-choice-tree.js

function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input;
  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts
}

const createRootContainer = function createRootContainer() {
  return $('<div class="ui list"></div>');
};

const createLeafContainerElement = function createLeafContainerElement() {
  return $('<div class="list"></div>');
};

const createLeafIconElement = function createLeafIconElement() {
  return $('<i class="folder icon"></i>');
};

const createLeafTitleElement = function createLeafTitleElement() {
  return $('<div class="header"></div>');
};

const createLeafTitleSpan = function createLeafTitleSpan(displayName) {
  return $(`<span style="margin-right: 5px; cursor: pointer;">${displayName}</span>`);
};

const createLeafContentElement = function createLeafContentElement() {
  return $('<div class="content"></div>');
};

$.fn.extend({
  choiceTree(type, multiple, defaultLevel) {
    const tree = this;
    const loader = tree.find('.dimmer');
    const loadedLeafs = [];
    const $input = tree.find('input[type="hidden"]');

    const createCheckboxElement = function createCheckboxElement(name, code, multi) {
      const chosenNodes = $input.val().split(',');
      let checked = '';
      if (chosenNodes.some(chosenCode => chosenCode === code)) {
        checked = 'checked="checked"';
      }
      if (multi) {
        return $(`<div class="ui checkbox" data-value="${code}"><input ${checked} type="checkbox" name="${type}"></div>`);
      }

      return $(`<div class="ui radio checkbox" data-value="${code}"><input ${checked} type="radio" name="${type}"></div>`);
    };

    const isLeafLoaded = function isLeafLoaded(code) {
      return loadedLeafs.some(leafCode => leafCode === code);
    };

    let createLeafFunc;

    const loadLeafAction = function loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement) {
      icon.toggleClass('open');

      if (!isLeafLoaded(parentCode)) {
        expandButton.api({
          on: 'now',
          url: tree.data('tree-leafs-url') || tree.data('taxon-leafs-url'),
          method: 'GET',
          cache: false,
          data: {
            parentCode,
          },
          beforeSend(settings) {
            loader.addClass('active');

            return settings;
          },
          onSuccess(response) {
            response.forEach((leafNode) => {
              leafContainerElement.append((
                createLeafFunc(sanitizeInput(leafNode.name), leafNode.code, leafNode.hasChildren, multiple, leafNode.level)
              ));
            });
            content.append(leafContainerElement);
            loader.removeClass('active');
            loadedLeafs.push(parentCode);

            leafContainerElement.toggle();
          },
        });
      }

      leafContainerElement.toggle();
    };

    const bindExpandLeafAction = function bindExpandLeafAction(parentCode, expandButton, content, icon, level) {
      const leafContainerElement = createLeafContainerElement();
      if (defaultLevel > level) {
        loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement);
      }

      expandButton.click(() => {
        loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement);
      });
    };

    const bindCheckboxAction = function bindCheckboxAction(checkboxElement) {
      checkboxElement.checkbox({
        onChecked() {
          const { value } = checkboxElement[0].dataset;
          const checkedValues = $input.val().split(',').filter(Boolean);
          checkedValues.push(value);
          $input.val(checkedValues.join());
        },
        onUnchecked() {
          const { value } = checkboxElement[0].dataset;
          const checkedValues = $input.val().split(',').filter(Boolean);
          const i = checkedValues.indexOf(value);
          if (i !== -1) {
            checkedValues.splice(i, 1);
          }
          $input.val(checkedValues.join());
        },
      });
    };

    const createLeaf = function createLeaf(name, code, hasChildren, multipleChoice, level) {
      const displayNameElement = createLeafTitleSpan(name);
      const titleElement = createLeafTitleElement();
      const iconElement = createLeafIconElement();
      const checkboxElement = createCheckboxElement(name, code, multipleChoice);

      bindCheckboxAction(checkboxElement);

      const leafElement = $('<div class="item"></div>');
      const leafContentElement = createLeafContentElement();

      leafElement.append(iconElement);
      titleElement.append(displayNameElement);
      titleElement.append(checkboxElement);
      leafContentElement.append(titleElement);

      if (!hasChildren) {
        iconElement.addClass('outline');
      }
      if (hasChildren) {
        bindExpandLeafAction(code, displayNameElement, leafContentElement, iconElement, level);
      }
      leafElement.append(leafContentElement);

      return leafElement;
    };
    createLeafFunc = createLeaf;

    tree.api({
      on: 'now',
      method: 'GET',
      url: tree.data('tree-root-nodes-url') || tree.data('taxon-root-nodes-url'),
      cache: false,
      beforeSend(settings) {
        loader.addClass('active');

        return settings;
      },
      onSuccess(response) {
        const rootContainer = createRootContainer();
        response.forEach((rootNode) => {
          rootContainer.append((
            createLeaf(sanitizeInput(rootNode.name), rootNode.code, rootNode.hasChildren, multiple, rootNode.level)
          ));
        });
        tree.append(rootContainer);
        loader.removeClass('active');
      },
    });
  },
});

sylius-product-auto-complete.js

// assets/admin/sylius-product-auto-complete.js

function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input;
  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts
}

$.fn.extend({
  productAutoComplete() {
    this.each((index, element) => {
      const $element = $(element);
      $element.dropdown('set selected', $element.find('input[name*="[associations]"]').val().split(',').filter(String));
    });

    this.dropdown({
      delay: {
        search: 250,
      },
      forceSelection: false,
      apiSettings: {
        dataType: 'JSON',
        cache: false,
        data: {
          criteria: { search: { type: 'contains', value: '' } },
        },
        beforeSend(settings) {
          /* eslint-disable-next-line no-param-reassign */
          settings.data.criteria.search.value = settings.urlData.query;

          return settings;
        },
        onResponse(response) {
          return {
            success: true,
            results: response._embedded.items.map(item => ({
              name: sanitizeInput(item.name),
              value: sanitizeInput(item.code),
            })),
          };
        },
      },
      onAdd(addedValue, addedText, $addedChoice) {
        const inputAssociation = $addedChoice.parents('.product-select').find('input[name*="[associations]"]');
        const associatedProductCodes = inputAssociation.val().length > 0 ? inputAssociation.val().split(',').filter(String) : [];

        associatedProductCodes.push(addedValue);
        $.unique(associatedProductCodes.sort());

        inputAssociation.attr('value', associatedProductCodes.join());
      },
      onRemove(removedValue, removedText, $removedChoice) {
        const inputAssociation = $removedChoice.parents('.product-select').find('input[name*="[associations]"]');
        const associatedProductCodes = inputAssociation.val().length > 0 ? inputAssociation.val().split(',').filter(String) : [];

        associatedProductCodes.splice($.inArray(removedValue, associatedProductCodes), 1);

        inputAssociation.attr('value', associatedProductCodes.join());
      },
    });
  },
});