Sylius Vulnerable to Authenticated Stored XSS
### Impact
An authenticated stored cross-site scripting (XSS) vulnerability exists in multiple places across the shop frontend and admin panel due to unsanitized entity names being rendered as raw HTML.
**Shop breadcrumbs** (`shared/breadcrumbs.html.twig`): The `breadcrumbs` macro uses the Twig `|raw` filter on label values. Since taxon names, product names, and ancestor names flow directly into these labels, a
malicious taxon name like `
` is rendered and executed as JavaScript on the storefront.
**Admin product taxon picker** (`ProductTaxonTreeController.js`): The `rowRenderer` method interpolates `${name}` directly into a template literal building HTML, allowing script injection through taxon names in the admin panel.
**Admin autocomplete fields** (Tom Select): Dropdown items and options render entity names as raw HTML without escaping, allowing XSS through any autocomplete field displaying entity names.
An **authenticated administrator** can inject arbitrary HTML or JavaScript via entity names (e.g. taxon name) that is persistently rendered for all users.
### Patches
The issue is fixed in versions: 2.0.16, 2.1.12, 2.2.3 and above.
### Workarounds
Override vulnerable templates and JavaScript controllers at the project level.
#### Step 1 — Override shop breadcrumbs template
`templates/bundles/SyliusShopBundle/shared/breadcrumbs.html.twig`:
```twig
{% macro breadcrumbs(items) %}
{% for item in items %}
-
{% if item.path is defined %}
{{ item.label }}
{% else %}
{{ item.label }}
{% endif %}
{% endfor %}
{% endmacro %}
```
#### Step 2 — Override order breadcrumbs template
`templates/bundles/SyliusShopBundle/account/order/show/content/breadcrumbs.html.twig`:
```twig
{% from '@SyliusShop/shared/breadcrumbs.html.twig' import breadcrumbs as breadcrumbs %}
{% set order = hookable_metadata.context.order %}
{{ breadcrumbs([
{ label: 'sylius.ui.home'|trans, path: path('sylius_shop_homepage')},
{ label: 'sylius.ui.my_account'|trans, path: path('sylius_shop_account_dashboard')},
{ label: 'sylius.ui.order_history'|trans, path: path('sylius_shop_account_order_index')},
{ label: '#'~order.number, active: true, test_attribute: 'order-number' }
]) }}
```
#### Step 3 — Override ProductTaxonTreeController.js
Disable the vendor controller in `assets/admin/controllers.json`:
```diff
"product-taxon-tree": {
- "enabled": true,
+ "enabled": false,
"fetch": "lazy"
},
```
Create `assets/admin/controllers/product_taxon_tree_controller.js` — copy the original from `vendor/sylius/sylius/src/Sylius/Bundle/AdminBundle/Resources/assets/controllers/ProductTaxonTreeController.js` and apply the following change:
```diff
+ const escapeHtml = (str) => {
+ const div = document.createElement('div');
+ div.textContent = str;
+ return div.innerHTML;
+ };
// in rowRenderer:
-
${name}
+
${escapeHtml(name)}
```
Register the patched controller in `assets/admin/bootstrap.js`:
```js
import ProductTaxonTreeController from './controllers/product_taxon_tree_controller';
app.register('sylius--admin-bundle--product-taxon-tree', ProductTaxonTreeController);
```
#### Step 4 — Add autocomplete XSS
protection
`assets/admin/scripts/autocomplete-xss-protection.js`:
```js
const escapeHtml = (str) => {
if (typeof str !== 'string') return str;
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
};
document.addEventListener('autocomplete:pre-connect', (event) => {
const options = event.detail.options;
if (!options.render) return;
const labelField = options.labelField || 'text';
const wrapRenderer = (renderer) => {
if (!renderer) return renderer;
return (data, escape) => {
const escaped = { ...data };
if (escaped[labelField]) {
escaped[labelField] = escapeHtml(escaped[labelField]);
}
return renderer(escaped, escape);
};
};
if (options.render.item) options.render.item = wrapRenderer(options.render.item);
if (options.render.option) options.render.option = wrapRenderer(options.render.option);
});
```
Import in `assets/admin/entrypoint.js` **before** bootstrap:
```diff
+ i
