{"id":"CVE-2024-34349","aliases":["GHSA-v2f9-rv6w-vw8r"],"url":"https://o3.security/vulnerability/CVE-2024-34349","summary":"Sylius potentially vulnerable to Cross Site Scripting via \"Name\" field (Taxons, Products, Options, Variants) in Admin Panel","details":"### Impact\n\nThere 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.\n\n### Patches\nThe issue is fixed in versions: 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1 and above.\n\n### Workarounds\n\n1. Create a new file `assets/admin/sylius-lazy-choice-tree.js`:\n\n```js\n// assets/admin/sylius-lazy-choice-tree.js\n\nfunction sanitizeInput(input) {\n  const div = document.createElement('div');\n  div.textContent = input;\n  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts\n}\n\nconst createRootContainer = function createRootContainer() {\n  return $('<div class=\"ui list\"></div>');\n};\n\nconst createLeafContainerElement = function createLeafContainerElement() {\n  return $('<div class=\"list\"></div>');\n};\n\nconst createLeafIconElement = function createLeafIconElement() {\n  return $('<i class=\"folder icon\"></i>');\n};\n\nconst createLeafTitleElement = function createLeafTitleElement() {\n  return $('<div class=\"header\"></div>');\n};\n\nconst createLeafTitleSpan = function createLeafTitleSpan(displayName) {\n  return $(`<span style=\"margin-right: 5px; cursor: pointer;\">${displayName}</span>`);\n};\n\nconst createLeafContentElement = function createLeafContentElement() {\n  return $('<div class=\"content\"></div>');\n};\n\n$.fn.extend({\n  choiceTree(type, multiple, defaultLevel) {\n    const tree = this;\n    const loader = tree.find('.dimmer');\n    const loadedLeafs = [];\n    const $input = tree.find('input[type=\"hidden\"]');\n\n    const createCheckboxElement = function createCheckboxElement(name, code, multi) {\n      const chosenNodes = $input.val().split(',');\n      let checked = '';\n      if (chosenNodes.some(chosenCode => chosenCode === code)) {\n        checked = 'checked=\"checked\"';\n      }\n      if (multi) {\n        return $(`<div class=\"ui checkbox\" data-value=\"${code}\"><input ${checked} type=\"checkbox\" name=\"${type}\"></div>`);\n      }\n\n      return $(`<div class=\"ui radio checkbox\" data-value=\"${code}\"><input ${checked} type=\"radio\" name=\"${type}\"></div>`);\n    };\n\n    const isLeafLoaded = function isLeafLoaded(code) {\n      return loadedLeafs.some(leafCode => leafCode === code);\n    };\n\n    let createLeafFunc;\n\n    const loadLeafAction = function loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement) {\n      icon.toggleClass('open');\n\n      if (!isLeafLoaded(parentCode)) {\n        expandButton.api({\n          on: 'now',\n          url: tree.data('tree-leafs-url') || tree.data('taxon-leafs-url'),\n          method: 'GET',\n          cache: false,\n          data: {\n            parentCode,\n          },\n          beforeSend(settings) {\n            loader.addClass('active');\n\n            return settings;\n          },\n          onSuccess(response) {\n            response.forEach((leafNode) => {\n              leafContainerElement.append((\n                createLeafFunc(sanitizeInput(leafNode.name), leafNode.code, leafNode.hasChildren, multiple, leafNode.level)\n              ));\n            });\n            content.append(leafContainerElement);\n            loader.removeClass('active');\n            loadedLeafs.push(parentCode);\n\n            leafContainerElement.toggle();\n          },\n        });\n      }\n\n      leafContainerElement.toggle();\n    };\n\n    const bindExpandLeafAction = function bindExpandLeafAction(parentCode, expandButton, content, icon, level) {\n      const leafContainerElement = createLeafContainerElement();\n      if (defaultLevel > level) {\n        loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement);\n      }\n\n      expandButton.click(() => {\n        loadLeafAction(parentCode, expandButton, content, icon, leafContainerElement);\n      });\n    };\n\n    const bindCheckboxAction = function bindCheckboxAction(checkboxElement) {\n      checkboxElement.checkbox({\n        onChecked() {\n          const { value } = checkboxElement[0].dataset;\n          const checkedValues = $input.val().split(',').filter(Boolean);\n          checkedValues.push(value);\n          $input.val(checkedValues.join());\n        },\n        onUnchecked() {\n          const { value } = checkboxElement[0].dataset;\n          const checkedValues = $input.val().split(',').filter(Boolean);\n          const i = checkedValues.indexOf(value);\n          if (i !== -1) {\n            checkedValues.splice(i, 1);\n          }\n          $input.val(checkedValues.join());\n        },\n      });\n    };\n\n    const createLeaf = function createLeaf(name, code, hasChildren, multipleChoice, level) {\n      const displayNameElement = createLeafTitleSpan(name);\n      const titleElement = createLeafTitleElement();\n      const iconElement = createLeafIconElement();\n      const checkboxElement = createCheckboxElement(name, code, multipleChoice);\n\n      bindCheckboxAction(checkboxElement);\n\n      const leafElement = $('<div class=\"item\"></div>');\n      const leafContentElement = createLeafContentElement();\n\n      leafElement.append(iconElement);\n      titleElement.append(displayNameElement);\n      titleElement.append(checkboxElement);\n      leafContentElement.append(titleElement);\n\n      if (!hasChildren) {\n        iconElement.addClass('outline');\n      }\n      if (hasChildren) {\n        bindExpandLeafAction(code, displayNameElement, leafContentElement, iconElement, level);\n      }\n      leafElement.append(leafContentElement);\n\n      return leafElement;\n    };\n    createLeafFunc = createLeaf;\n\n    tree.api({\n      on: 'now',\n      method: 'GET',\n      url: tree.data('tree-root-nodes-url') || tree.data('taxon-root-nodes-url'),\n      cache: false,\n      beforeSend(settings) {\n        loader.addClass('active');\n\n        return settings;\n      },\n      onSuccess(response) {\n        const rootContainer = createRootContainer();\n        response.forEach((rootNode) => {\n          rootContainer.append((\n            createLeaf(sanitizeInput(rootNode.name), rootNode.code, rootNode.hasChildren, multiple, rootNode.level)\n          ));\n        });\n        tree.append(rootContainer);\n        loader.removeClass('active');\n      },\n    });\n  },\n});\n```\n\n2. Create new file `assets/admin/sylius-auto-complete.js`:\n\n```js\n// assets/admin/sylius-auto-complete.js\n\nfunction sanitizeInput(input) {\n  const div = document.createElement('div');\n  div.textContent = input;\n  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts\n}\n\n$.fn.extend({\n  autoComplete() {\n    this.each((idx, el) => {\n      const element = $(el);\n      const criteriaName = element.data('criteria-name');\n      const choiceName = element.data('choice-name');\n      const choiceValue = element.data('choice-value');\n      const autocompleteValue = element.find('input.autocomplete').val();\n      const loadForEditUrl = element.data('load-edit-url');\n\n      element.dropdown({\n        delay: {\n          search: 250,\n        },\n        forceSelection: false,\n        saveRemoteData: false,\n        verbose: true,\n        apiSettings: {\n          dataType: 'JSON',\n          cache: false,\n          beforeSend(settings) {\n            /* eslint-disable-next-line no-param-reassign */\n            settings.data[criteriaName] = settings.urlData.query;\n\n            return settings;\n          },\n          onResponse(response) {\n            let results = response.map(item => ({\n              name: sanitizeInput(item[choiceName]),\n              value: sanitizeInput(item[choiceValue]),\n            }));\n\n            if (!element.hasClass('multiple')) {\n              results.unshift({\n                name: '&nbsp;',\n                value: '',\n              });\n            }\n\n            return {\n              success: true,\n              results: results,\n            };\n          },\n        },\n      });\n\n      if (autocompleteValue.split(',').filter(String).length > 0) {\n        const menuElement = element.find('div.menu');\n\n        menuElement.api({\n          on: 'now',\n          method: 'GET',\n          url: loadForEditUrl,\n          beforeSend(settings) {\n            /* eslint-disable-next-line no-param-reassign */\n            settings.data[choiceValue] = autocompleteValue.split(',').filter(String);\n\n            return settings;\n          },\n          onSuccess(response) {\n            response.forEach((item) => {\n              menuElement.append((\n                $(`<div class=\"item\" data-value=\"${item[choiceValue]}\">${sanitizeInput(item[choiceName])}</div>`)\n              ));\n            });\n\n            element.dropdown('refresh');\n            element.dropdown('set selected', element.find('input.autocomplete').val().split(',').filter(String));\n          },\n        });\n      }\n    });\n  },\n});\n```\n\n3. Create new file `assets/admin/sylius-product-auto-complete.js`:\n\n```js\n// assets/admin/sylius-product-auto-complete.js\n\nfunction sanitizeInput(input) {\n  const div = document.createElement('div');\n  div.textContent = input;\n  return div.innerHTML; // Converts text content to plain HTML, stripping any scripts\n}\n\n$.fn.extend({\n  productAutoComplete() {\n    this.each((index, element) => {\n      const $element = $(element);\n      $element.dropdown('set selected', $element.find('input[name*=\"[associations]\"]').val().split(',').filter(String));\n    });\n\n    this.dropdown({\n      delay: {\n        search: 250,\n      },\n      forceSelection: false,\n      apiSettings: {\n        dataType: 'JSON',\n        cache: false,\n        data: {\n          criteria: { search: { type: 'contains', value: '' } },\n        },\n        beforeSend(settings) {\n          /* eslint-disable-next-line no-param-reassign */\n          settings.data.criteria.search.value = settings.urlData.query;\n\n          return settings;\n        },\n        onResponse(response) {\n          return {\n            success: true,\n            results: response._embedded.items.map(item => ({\n              name: sanitizeInput(item.name),\n              value: sanitizeInput(item.code),\n            })),\n          };\n        },\n      },\n      onAdd(addedValue, addedText, $addedChoice) {\n        const inputAssociation = $addedChoice.parents('.product-select').find('input[name*=\"[associations]\"]');\n        const associatedProductCodes = inputAssociation.val().length > 0 ? inputAssociation.val().split(',').filter(String) : [];\n\n        associatedProductCodes.push(addedValue);\n        $.unique(associatedProductCodes.sort());\n\n        inputAssociation.attr('value', associatedProductCodes.join());\n      },\n      onRemove(removedValue, removedText, $removedChoice) {\n        const inputAssociation = $removedChoice.parents('.product-select').find('input[name*=\"[associations]\"]');\n        const associatedProductCodes = inputAssociation.val().length > 0 ? inputAssociation.val().split(',').filter(String) : [];\n\n        associatedProductCodes.splice($.inArray(removedValue, associatedProductCodes), 1);\n\n        inputAssociation.attr('value', associatedProductCodes.join());\n      },\n    });\n  },\n});\n```\n\n4. Add new import in `assets/admin/entry.js`:\n\n```js\n// assets/admin/entry.js\n// ...\nimport './sylius-lazy-choice-tree';\nimport './sylius-auto-complete';\nimport './sylius-product-auto-complete';\n```\n\n5.  If you're using Gulp, update your `gulpfile.babel.js`:\n\n```diff\n  import chug from 'gulp-chug';\n+ import concat from 'gulp-concat';\n  import gulp from 'gulp';\n  import yargs from 'yargs';\n\n  const { argv } = ...\n\n+ const rootPath = argv.rootPath || 'public/assets';\n+ \n  const config = [...];\n    '--rootPath',\n    argv.rootPath || '../../../../../../../public/assets',\n    '--nodeModulesPath',\n    argv.nodeModulesPath || '../../../../../../../node_modules',\n  ];\n\n  export const buildAdmin = ...\n\n+ export const patchAdminJs = function patchAdminJs() {\n+   return gulp.src([\n+     `${rootPath}/admin/js/app.js`,\n+     'assets/admin/sylius-auto-complete.js',\n+     'assets/admin/sylius-product-auto-complete.js',\n+     'assets/admin/sylius-lazy-choice-tree.js',\n+   ])\n+     .pipe(concat('app.js'))\n+     .pipe(gulp.dest(`${rootPath}/admin/js`));\n+ };\n+ patchAdminJs.description = 'Append admin security patches to built app.js.';\n\n ...\n\n- export const build = gulp.parallel(buildAdmin, buildShop);\n+ export const build = gulp.series(\n+   gulp.parallel(buildAdmin, buildShop),\n+   patchAdminJs,\n+ );\n\n ...\n\n- gulp.task('admin', buildAdmin);\n+ gulp.task('admin', gulp.series(buildAdmin, patchAdminJs));\n\n  ...\n```\n\n6. Rebuild your assets:\n\n```bash\nyarn build\n``` \n\n### Acknowledgements\n\nThis security issue has been reported by [Checkmarx Research Group](https://checkmarx.com), thank you!\n\n### For more information\nIf you have any questions or comments about this advisory:\n* Open an issue in [Sylius issues](https://github.com/Sylius/Sylius/issues)\n* Email us at security@sylius.com","published":"2024-05-10T15:29:39.791Z","modified":"2026-08-12T03:51:34.832083719Z","cvss":{"score":4.8,"severity":"MEDIUM","vector":"CVSS:3.1/AV:N/AC:L/PR:H/UI:R/S:C/C:L/I:L/A:N"},"epss":{"score":0.00436,"percentile":0.36532,"asOf":"2026-08-23"},"cisaKev":null,"exploitsKnown":0,"affectedPackages":[{"ecosystem":"Packagist","name":"sylius/sylius","fixedVersion":"1.9.12"},{"ecosystem":"Packagist","name":"sylius/sylius","fixedVersion":"1.10.16"},{"ecosystem":"Packagist","name":"sylius/sylius","fixedVersion":"1.11.17"},{"ecosystem":"Packagist","name":"sylius/sylius","fixedVersion":"1.12.16"},{"ecosystem":"Packagist","name":"sylius/sylius","fixedVersion":"1.13.1"}],"fix":{"url":"https://github.com/Sylius/Sylius/commit/ba4b66da5af88cdb1bba6174de8bdf42f4853e12","label":"Sylius/Sylius@ba4b66d"},"references":[{"type":"ADVISORY","url":"https://github.com/CVEProject/cvelistV5/tree/main/cves/2024/34xxx/CVE-2024-34349.json"},{"type":"ADVISORY","url":"https://github.com/Sylius/Sylius/security/advisories/GHSA-v2f9-rv6w-vw8r"},{"type":"ADVISORY","url":"https://nvd.nist.gov/vuln/detail/CVE-2024-34349"},{"type":"FIX","url":"https://github.com/Sylius/Sylius/commit/ba4b66da5af88cdb1bba6174de8bdf42f4853e12"},{"type":"PACKAGE","url":"https://github.com/Sylius/Sylius"}],"provenance":{"sources":["OSV.dev","FIRST.org (EPSS)"],"lastVerified":"2026-08-12T03:51:34.832083719Z"}}