CVE-2024-34349: Sylius/sylius Sylius Potentially Vulnerable To Cross Vulnerability

MODERATE
Advisory Identifier: GHSA-v2f9-rv6w-vw8r
CVSS 4.8
CWE-79
Published
Advisory Summary

CVE-2024-34349 is a MODERATE (CVSS 4.8) sylius potentially vulnerable to cross vulnerability (CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')) affecting Sylius/sylius libraries in the Packagist ecosystem. The issue involves sylius potentially vulnerable to cross site scripting via "name" field (taxons, products, options, variants) in admin panel. Remediation is available by upgrading affected packages to version 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1.

CVE-2024-34349 at a Glance

CVE Identifier CVE-2024-34349
GHSA Identifier GHSA-v2f9-rv6w-vw8r
Severity MODERATE
CVSS v3.1 Base Score 4.8
CWE Classification CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
Affected Product Sylius/sylius
Package Ecosystem Packagist
Published Date
Last Updated

Security Impact

CVSS: 4.8

The security impact metrics below are parsed directly from the CVSS v3.1 vector string (CVSS:3.1/AV:N/AC:L/PR:H/UI:R/S:C/C:L/I:L/A:N).

Attack Vector Network (AV:N)
Attack Complexity Low (AC:L)
Privileges Required High (PR:H)
User Interaction Required (UI:R)
Scope Changed (S:C)
Confidentiality Low (C:L)
Integrity Low (I:L)
Availability None (A:N)

How to Fix CVE-2024-34349

To remediate this vulnerability, upgrade all affected Sylius/sylius dependencies to a patched release. Both direct and transitive dependencies should be checked, as frameworks or security libraries may pull in vulnerable versions transitively.

sylius/sylius fixed: 1.9.12
Upgrade sylius/sylius to 1.9.12
sylius/sylius fixed: 1.10.16
Upgrade sylius/sylius to 1.10.16
sylius/sylius fixed: 1.11.17
Upgrade sylius/sylius to 1.11.17
sylius/sylius fixed: 1.12.16
Upgrade sylius/sylius to 1.12.16
sylius/sylius fixed: 1.13.1
Upgrade sylius/sylius to 1.13.1
Verify Direct and Transitive Dependencies

Run the following command in your project directory to verify that all resolved dependencies use the patched release:

inspect dependencies for sylius/sylius

How to Check if You Are Affected

To determine whether your application is affected by CVE-2024-34349, inspect your project dependencies for Sylius/sylius:

inspect dependencies for sylius/sylius

Analyze the terminal output to locate any version of Sylius/sylius in your dependency tree. If any resolved version matches the vulnerable ranges listed in the table below (for example, versions earlier than 1.9.12), your application is affected.

Note: Verify declared build manifests and deployed runtime container environments.

Technical Details

Vulnerability Mechanism & Technical Analysis

This vulnerability is classified under CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting'), where the product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users. In Sylius/sylius, software state validation or input boundaries are circumvented during processing. Review the official source advisory statement below for specific affected components, classes, and reproduction details.

Source Advisory Statement

### 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 1. Create a new file `assets/admin/sylius-lazy-choice-tree.js`: ```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'); }, }); }, }); ``` 2. Create new file `assets/admin/sylius-auto-complete.js`: ```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)); }, }); } }); }, }); ``` 3. Create new file `assets/admin/sylius-product-auto-complete.js`: ```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()); }, }); }, }); ``` 4. Add new import in `assets/admin/entry.js`: ```js // assets/admin/entry.js // ... import './sylius-lazy-choice-tree'; import './sylius-auto-complete'; import './sylius-product-auto-complete'; ``` 5. 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)); ... ``` 6. Rebuild your assets: ```bash yarn build ``` ### Acknowledgements This security issue has been reported by [Checkmarx Research Group](https://checkmarx.com), thank you! ### For more information If you have any questions or comments about this advisory: * Open an issue in [Sylius issues](https://github.com/Sylius/Sylius/issues) * Email us at security@sylius.com

CVE-2024-34349 Affected Sylius/sylius Versions

5 component(s)
Fixed Versions:
1.9.121.10.161.11.171.12.161.13.1
Product / Package Ecosystem Affected Versions Fixed Version
sylius/sylius
Packagist
< 1.9.12
1.9.12
sylius/sylius
Packagist
≥ 1.10.0-alpha.1
< 1.10.16
1.10.16
sylius/sylius
Packagist
≥ 1.11.0-alpha.1
< 1.11.17
1.11.17
sylius/sylius
Packagist
≥ 1.12.0-alpha.1
< 1.12.16
1.12.16
sylius/sylius
Packagist
≥ 1.13.0-alpha.1
< 1.13.1
1.13.1

References

Frequently Asked Questions

What is CVE-2024-34349?
CVE-2024-34349 is a security vulnerability in Sylius/sylius involving Sylius potentially vulnerable to Cross Site Scripting via "Name" field (Taxons, Products, Options, Variants) in Admin Panel under CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting').
Which Sylius/sylius versions are affected?
Affected versions include releases prior to 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1 across affected packages: sylius/sylius.
What version fixes CVE-2024-34349?
Upgrading to 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1 (or the latest patched release for your respective branch) resolves the vulnerability.
Is sylius/sylius affected?
Yes, sylius/sylius is affected in releases prior to 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1. Upgrade your dependency to 1.9.12, 1.10.16, 1.11.17, 1.12.16, 1.13.1 or later.
What is the CVSS score of CVE-2024-34349?
CVE-2024-34349 has a CVSS v3.1 base score of 4.8 (MODERATE) with vector string CVSS:3.1/AV:N/AC:L/PR:H/UI:R/S:C/C:L/I:L/A:N.
What CWE is associated with CVE-2024-34349?
CVE-2024-34349 is classified under CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting') (The product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.).
How can I check Packagist dependencies for CVE-2024-34349?
Run the dependency tree command: 'inspect dependencies for sylius/sylius'. This command lists direct and transitive dependencies in your build configuration so you can verify if a vulnerable version is resolved.
Machine-readable OSV JSON OSV v1.5 Schema
Normalized schema output
{
  "schema_version" : "1.4.0",
  "id" : "GHSA-v2f9-rv6w-vw8r",
  "modified" : "2026-03-09T15:56:14Z",
  "published" : "2024-05-10T15:33:01Z",
  "aliases" : [ "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",
  "severity" : [ {
    "type" : "CVSS_V3",
    "score" : "CVSS:3.1/AV:N/AC:L/PR:H/UI:R/S:C/C:L/I:L/A:N"
  }, {
    "type" : "CVSS_V4",
    "score" : "CVSS:4.0/AV:N/AC:L/AT:N/PR:H/UI:P/VC:N/VI:N/VA:N/SC:L/SI:L/SA:N"
  } ],
  "affected" : [ {
    "package" : {
      "ecosystem" : "Packagist",
      "name" : "sylius/sylius"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "0"
      }, {
        "fixed" : "1.9.12"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "Packagist",
      "name" : "sylius/sylius"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "1.10.0-alpha.1"
      }, {
        "fixed" : "1.10.16"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "Packagist",
      "name" : "sylius/sylius"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "1.11.0-alpha.1"
      }, {
        "fixed" : "1.11.17"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "Packagist",
      "name" : "sylius/sylius"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "1.12.0-alpha.1"
      }, {
        "fixed" : "1.12.16"
      } ]
    } ]
  }, {
    "package" : {
      "ecosystem" : "Packagist",
      "name" : "sylius/sylius"
    },
    "ranges" : [ {
      "type" : "ECOSYSTEM",
      "events" : [ {
        "introduced" : "1.13.0-alpha.1"
      }, {
        "fixed" : "1.13.1"
      } ]
    } ]
  } ],
  "references" : [ {
    "type" : "WEB",
    "url" : "https://github.com/Sylius/Sylius/security/advisories/GHSA-v2f9-rv6w-vw8r"
  }, {
    "type" : "WEB",
    "url" : "https://github.com/Sylius/Sylius/commit/ba4b66da5af88cdb1bba6174de8bdf42f4853e12"
  }, {
    "type" : "PACKAGE",
    "url" : "https://github.com/Sylius/Sylius"
  } ],
  "database_specific" : {
    "cwe_ids" : [ "CWE-79" ],
    "severity" : "MODERATE",
    "github_reviewed" : true,
    "github_reviewed_at" : "2024-05-10T15:33:01Z",
    "nvd_published_at" : "2024-05-14T15:38:41Z"
  }
}