Skip to content

Instantly share code, notes, and snippets.

@GSadee
Last active May 10, 2024 08:26
Show Gist options
  • Save GSadee/0926ac86935309e17ea0acf6d7df0709 to your computer and use it in GitHub Desktop.
Save GSadee/0926ac86935309e17ea0acf6d7df0709 to your computer and use it in GitHub Desktop.
Potential Cross Site Scripting (XSS) via the "Province" field in the Checkout and Address Book workaround
yarn build
// assets/shop/entry.js
// ...
import './sylius-province-field';
// assets/shop/sylius-province-field.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 getProvinceInputValue = function getProvinceInputValue(valueSelector) {
return valueSelector == undefined ? '' : `value="${sanitizeInput(valueSelector)}"`;
};
$.fn.extend({
provinceField() {
const countrySelect = $('select[name$="[countryCode]"]');
countrySelect.on('change', (event) => {
const select = $(event.currentTarget);
const provinceContainer = select.parents('.field').next('div.province-container');
const provinceSelectFieldName = select.attr('name').replace('country', 'province');
const provinceInputFieldName = select.attr('name').replace('countryCode', 'provinceName');
const provinceSelectFieldId = select.attr('id').replace('country', 'province');
const provinceInputFieldId = select.attr('id').replace('countryCode', 'provinceName');
const form = select.parents('form');
if (select.val() === '' || select.val() == undefined) {
provinceContainer.fadeOut('slow', () => {
provinceContainer.html('');
});
return;
}
provinceContainer.attr('data-loading', true);
form.addClass('loading');
$.get(provinceContainer.attr('data-url'), { countryCode: select.val() }, (response) => {
if (!response.content) {
provinceContainer.fadeOut('slow', () => {
provinceContainer.html('');
provinceContainer.removeAttr('data-loading');
form.removeClass('loading');
});
} else if (response.content.indexOf('select') !== -1) {
provinceContainer.fadeOut('slow', () => {
const provinceSelectValue = getProvinceInputValue((
$(provinceContainer).find('select > option[selected$="selected"]').val()
));
provinceContainer.html((
response.content
.replace('name="sylius_address_province"', `name="${provinceSelectFieldName}"${provinceSelectValue}`)
.replace('id="sylius_address_province"', `id="${provinceSelectFieldId}"`)
.replace('option value="" selected="selected"', 'option value=""')
.replace(`option ${provinceSelectValue}`, `option ${provinceSelectValue}" selected="selected"`)
));
provinceContainer.addClass('required');
provinceContainer.removeAttr('data-loading');
provinceContainer.fadeIn('fast', () => {
form.removeClass('loading');
});
});
} else {
provinceContainer.fadeOut('slow', () => {
const provinceInputValue = getProvinceInputValue($(provinceContainer).find('input').val());
provinceContainer.html((
response.content
.replace('name="sylius_address_province"', `name="${provinceInputFieldName}"${provinceInputValue}`)
.replace('id="sylius_address_province"', `id="${provinceInputFieldId}"`)
));
provinceContainer.removeAttr('data-loading');
provinceContainer.fadeIn('fast', () => {
form.removeClass('loading');
});
});
}
});
});
if (countrySelect.val() !== '') {
countrySelect.trigger('change');
}
if ($.trim($('div.province-container').text()) === '') {
$('select.country-select').trigger('change');
}
const shippingAddressCheckbox = $('input[type="checkbox"][name$="[differentShippingAddress]"]');
const shippingAddressContainer = $('#sylius-shipping-address-container');
const toggleShippingAddress = function toggleShippingAddress() {
shippingAddressContainer.toggle(shippingAddressCheckbox.prop('checked'));
};
toggleShippingAddress();
shippingAddressCheckbox.on('change', toggleShippingAddress);
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment