Mittel

Sylius potentially vulnerable to Cross Site Scripting via "Name" field (Taxons, Products, Options, Variants) in Admin Panel

Veröffentlicht: 10.05.2024
Aktualisiert: 11.10.2026 10:22

Impact

There is a possibility to execute javascript code in the Admin panel. In order to perform an XSS attack input a script into Name field in which of the resources: Taxons, Products, Product Options or Product Variants. The code will be executed while using an autocomplete field with one of the listed entities in the Admin Panel. Also for the taxons in the category tree on the product form.

Patches

The issue is fixed in versions: 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1 and above.

Workarounds

Create a new file assets/admin/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');
      },
    });
  },
});

Create new file assets/admin/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: '&nbsp;',
                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]}">${sanitizeInput(item[choiceName])}</div>`)
              ));
            });

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

Create new file assets/admin/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());
      },
    });
  },
});

Add new import in assets/admin/entry.js:

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

If you're using Gulp, update your gulpfile.babel.js:

diff

  import chug from 'gulp-chug';
+ import concat from 'gulp-concat';
  import gulp from 'gulp';
  import yargs from 'yargs';

  const { argv } = ...

+ const rootPath = argv.rootPath || 'public/assets';
+ 
  const config = [...];
    '--rootPath',
    argv.rootPath || '../../../../../../../public/assets',
    '--nodeModulesPath',
    argv.nodeModulesPath || '../../../../../../../node_modules',
  ];

  export const buildAdmin = ...

+ export const patchAdminJs = function patchAdminJs() {
+   return gulp.src([
+     `${rootPath}/admin/js/app.js`,
+     'assets/admin/sylius-auto-complete.js',
+     'assets/admin/sylius-product-auto-complete.js',
+     'assets/admin/sylius-lazy-choice-tree.js',
+   ])
+     .pipe(concat('app.js'))
+     .pipe(gulp.dest(`${rootPath}/admin/js`));
+ };
+ patchAdminJs.description = 'Append admin security patches to built app.js.';

 ...

- export const build = gulp.parallel(buildAdmin, buildShop);
+ export const build = gulp.series(
+   gulp.parallel(buildAdmin, buildShop),
+   patchAdminJs,
+ );

 ...

- gulp.task('admin', buildAdmin);
+ gulp.task('admin', gulp.series(buildAdmin, patchAdminJs));

  ...

Rebuild your assets:

bash

yarn build

Acknowledgements

This security issue has been reported by Checkmarx Research Group, thank you!

For more information

If you have any questions or comments about this advisory:

Open an issue in Sylius issues
Email us at security@sylius.com

Betroffene Software

Klicken Sie auf eine Technologie, um alle zugehörigen Schwachstellen anzuzeigen.

Plattform	Paket	Anfällige Versionen	Behoben in
Composer-Paket	sylius/sylius	< 1.9.12, >= 1.10.0-alpha.1, < 1.10.16, >= 1.11.0-alpha.1, < 1.11.17, >= 1.12.0-alpha.1, < 1.12.16, >= 1.13.0-alpha.1, < 1.13.1	1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1

Verweise

CVSS-Wert 4.8/10

CVSS-Vektor: CVSS:3.1/AV:N/AC:L/PR:H/UI:R/S:C/C:L/I:L/A:N
Schwäche (CWE): CWE-79
Plattform: Composer
Paket: sylius/sylius
Veröffentlicht: 10.05.2024
Aktualisiert: 11.10.2026 10:22

Quellen und Lizenzen

OSV / GitHub Advisory Database - GHSA-v2f9-rv6w-vw8r - CC BY 4.0

Schwachstellenhistorie: sylius/sylius

Alle veröffentlichten Schwachstellen dieses Pakets (Composer-Paket), neueste zuerst. Zeigt, ob es ein einmaliger Ausrutscher ist oder ein Paket, das man im Auge behalten muss.

Alle (23) im Archiv

Einträge insgesamt: 23
Erste → letzte: 12.2019 07.2026
Ohne Fix: 0
In Angriffen ausgenutzt: 0

Verteilung nach Schweregrad

Hoch 4
Mittel 17
Niedrig 2

Veröffentlichungen pro Jahr

2019: 1
2020: 3
2021: 1
2022: 4
2023: 0
2024: 4
2025: 0
2026: 10

11.03.2026

Sylius has a Promotion Usage Limit Bypass via Race Condition

Hoch · 8.2 CVE-2026-31824 < 1.9.12, >= 1.10.0, < 1.10.16, >= 1.11.0, < 1.11.17, >= 1.12.0, < 1.12.23, >= 1.13.0, < 1.13.15, >= 1.14.0, < 1.14.18, >= 2.0.0, < 2.0.16, >= 2.1.0, < 2.1.12, >= 2.2.0, < 2.2.3 1.9.12, 1.10.16, 1.11.17, 1.12.23, 1.13.15, 1.14.18, 2.0.16, 2.1.12, 2.2.3
11.03.2026

Sylius affected by IDOR in Cart and Checkout LiveComponents

Hoch CVE-2026-31820 >= 2.0.0, < 2.0.16, >= 2.1.0, < 2.1.12, >= 2.2.0, < 2.2.3 2.0.16, 2.1.12, 2.2.3
17.07.2024

Sylius has a security vulnerability via adjustments API endpoint

Hoch · 7.5 CVE-2024-40633 >= 1.12.0-alpha.1, < 1.12.19, >= 1.13.0-alpha.1, < 1.13.4, < 1.9.12, >= 1.10.0-alpha.1, < 1.10.16, >= 1.11.0-alpha.1, < 1.11.17 1.12.19, 1.13.4, 1.9.12, 1.10.16, 1.11.17
10.05.2024

Sylius potentially vulnerable to Cross Site Scripting via "Name" field (Taxons, Products, Options, Variants) in Admin Panel dieser Eintrag

Mittel · 4.8 CVE-2024-34349 < 1.9.12, >= 1.10.0-alpha.1, < 1.10.16, >= 1.11.0-alpha.1, < 1.11.17, >= 1.12.0-alpha.1, < 1.12.16, >= 1.13.0-alpha.1, < 1.13.1 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1
14.03.2022

Insufficient Session Expiration in Sylius

Hoch · 7.1 CVE-2022-24743 >= 1.10.0, < 1.10.11, >= 1.11.0, < 1.11.2 1.10.11, 1.11.2

Erkennen Sie Schwachstellen in Ihrer Anwendung

Mit der DockRay-Integration und aktivierter Softwareinventarisierung prüft DockRay gemeldete Komponentenversionen auf bekannte Schwachstellen und benachrichtigt Sie über bestätigte Treffer. Die Abdeckung hängt von der unterstützten Technologie und den verfügbaren Meldungen ab.

Anwendung verbinden