fix(pos): escape html output in pos page templates (backport #55527) (#55529)

Co-authored-by: Diptanil Saha <diptanil@frappe.io>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
fix(pos): escape html output in pos page templates (#55527)

erpnext/selling/page/point_of_sale/pos_controller.js

@@ -217,7 +217,7 @@ erpnext.PointOfSale.Controller = class {
 	set_opening_entry_status() {
 		this.page.set_title_sub(
 			`<span class="indicator orange">
-				<a class="text-muted" href="#Form/POS%20Opening%20Entry/${this.pos_opening}">
+				<a class="text-muted" href="#Form/POS%20Opening%20Entry/${encodeURIComponent(this.pos_opening)}">
 					Opened at ${frappe.datetime.str_to_user(this.pos_opening_time)}
 				</a>
 			</span>`

erpnext/selling/page/point_of_sale/pos_item_cart.js

@@ -184,7 +184,7 @@ erpnext.PointOfSale.ItemCart = class {
 				me.$totals_section.find(".edit-cart-btn").click();
 			}
 
-			const item_row_name = unescape($cart_item.attr("data-row-name"));
+			const item_row_name = $cart_item.attr("data-row-name");
 			me.events.cart_item_clicked({ name: item_row_name });
 			this.numpad_value = "";
 		});
@@ -464,10 +464,10 @@ erpnext.PointOfSale.ItemCart = class {
 					<div class="customer-display">
 						${this.get_customer_image()}
 						<div class="customer-name-desc">
-							<div class="customer-name">${customer_name}</div>
+							<div class="customer-name">${frappe.utils.escape_html(customer_name)}</div>
 							${get_customer_description()}
 						</div>
-						<div class="reset-customer-btn" data-customer="${escape(customer)}">
+						<div class="reset-customer-btn" data-customer="${frappe.utils.escape_html(customer)}">
 							<svg width="32" height="32" viewBox="0 0 14 14" fill="none">
 								<path d="M4.93764 4.93759L7.00003 6.99998M9.06243 9.06238L7.00003 6.99998M7.00003 6.99998L4.93764 9.06238L9.06243 4.93759" stroke="#8D99A6"/>
 							</svg>
@@ -484,11 +484,13 @@ erpnext.PointOfSale.ItemCart = class {
 			if (!email_id && !mobile_no) {
 				return `<div class="customer-desc">${__("Click to add email / phone")}</div>`;
 			} else if (email_id && !mobile_no) {
-				return `<div class="customer-desc">${email_id}</div>`;
+				return `<div class="customer-desc">${frappe.utils.escape_html(email_id)}</div>`;
 			} else if (mobile_no && !email_id) {
-				return `<div class="customer-desc">${mobile_no}</div>`;
+				return `<div class="customer-desc">${frappe.utils.escape_html(mobile_no)}</div>`;
 			} else {
-				return `<div class="customer-desc">${email_id} - ${mobile_no}</div>`;
+				return `<div class="customer-desc">${frappe.utils.escape_html(
+					email_id
+				)} - ${frappe.utils.escape_html(mobile_no)}</div>`;
 			}
 		}
 	}
@@ -496,9 +498,13 @@ erpnext.PointOfSale.ItemCart = class {
 	get_customer_image() {
 		const { customer, image } = this.customer_info || {};
 		if (image) {
-			return `<div class="customer-image"><img src="${image}" alt="${image}""></div>`;
+			return `<div class="customer-image"><img src="${frappe.utils.escape_html(
+				image
+			)}" alt="${frappe.utils.escape_html(image)}"></div>`;
 		} else {
-			return `<div class="customer-image customer-abbr">${frappe.get_abbr(customer)}</div>`;
+			return `<div class="customer-image customer-abbr">${frappe.utils.escape_html(
+				frappe.get_abbr(customer)
+			)}</div>`;
 		}
 	}
 
@@ -559,7 +565,7 @@ erpnext.PointOfSale.ItemCart = class {
 				.map((t) => {
 					if (t.tax_amount_after_discount_amount == 0.0) return;
 					return `<div class="tax-row">
-					<div class="tax-label">${t.description}</div>
+					<div class="tax-label">${frappe.utils.escape_html(t.description)}</div>
 					<div class="tax-value">${format_currency(t.tax_amount_after_discount_amount, currency)}</div>
 				</div>`;
 				})
@@ -571,8 +577,9 @@ erpnext.PointOfSale.ItemCart = class {
 	}
 
 	get_cart_item({ name }) {
-		const item_selector = `.cart-item-wrapper[data-row-name="${escape(name)}"]`;
-		return this.$cart_items_wrapper.find(item_selector);
+		return this.$cart_items_wrapper.find(".cart-item-wrapper").filter(function () {
+			return $(this).attr("data-row-name") === name;
+		});
 	}
 
 	get_item_from_frm(item) {
@@ -602,7 +609,9 @@ erpnext.PointOfSale.ItemCart = class {
 
 		if (!$item_to_update.length) {
 			this.$cart_items_wrapper.append(
-				`<div class="cart-item-wrapper" data-row-name="${escape(item_data.name)}"></div>
+				`<div class="cart-item-wrapper" data-row-name="${frappe.utils.escape_html(
+					item_data.name
+				)}"></div>
 				<div class="seperator"></div>`
 			);
 			$item_to_update = this.get_cart_item(item_data);
@@ -612,7 +621,7 @@ erpnext.PointOfSale.ItemCart = class {
 			`${get_item_image_html()}
 			<div class="item-name-desc">
 				<div class="item-name">
-					${item_data.item_name}
+					${frappe.utils.escape_html(item_data.item_name)}
 				</div>
 				${get_description_html()}
 			</div>
@@ -641,7 +650,7 @@ erpnext.PointOfSale.ItemCart = class {
 			if (item_data.rate && item_data.amount && item_data.rate !== item_data.amount) {
 				return `
 					<div class="item-qty-rate">
-						<div class="item-qty"><span>${item_data.qty || 0} ${item_data.uom}</span></div>
+						<div class="item-qty"><span>${item_data.qty || 0} ${frappe.utils.escape_html(item_data.uom)}</span></div>
 						<div class="item-rate-amount">
 							<div class="item-rate">${format_currency(item_data.amount, currency)}</div>
 							<div class="item-amount">${format_currency(item_data.rate, currency)}</div>
@@ -650,7 +659,7 @@ erpnext.PointOfSale.ItemCart = class {
 			} else {
 				return `
 					<div class="item-qty-rate">
-						<div class="item-qty"><span>${item_data.qty || 0} ${item_data.uom}</span></div>
+						<div class="item-qty"><span>${item_data.qty || 0} ${frappe.utils.escape_html(item_data.uom)}</span></div>
 						<div class="item-rate-amount">
 							<div class="item-rate">${format_currency(item_data.rate, currency)}</div>
 						</div>
@@ -671,7 +680,7 @@ erpnext.PointOfSale.ItemCart = class {
 					}
 				}
 				item_data.description = frappe.ellipsis(item_data.description, 45);
-				return `<div class="item-desc">${item_data.description}</div>`;
+				return `<div class="item-desc">${frappe.utils.escape_html(item_data.description)}</div>`;
 			}
 			return ``;
 		}
@@ -683,22 +692,24 @@ erpnext.PointOfSale.ItemCart = class {
 					<div class="item-image">
 						<img
 							onerror="cur_pos.cart.handle_broken_image(this)"
-							src="${image}" alt="${frappe.get_abbr(item_name)}"">
+							src="${frappe.utils.escape_html(image)}" alt="${frappe.utils.escape_html(frappe.get_abbr(item_name))}">
 					</div>`;
 			} else {
-				return `<div class="item-image item-abbr">${frappe.get_abbr(item_name)}</div>`;
+				return `<div class="item-image item-abbr">${frappe.utils.escape_html(
+					frappe.get_abbr(item_name)
+				)}</div>`;
 			}
 		}
 	}
 
 	handle_broken_image($img) {
-		const item_abbr = $($img).attr("alt");
+		const item_abbr = frappe.utils.escape_html($($img).attr("alt"));
 		$($img).parent().replaceWith(`<div class="item-image item-abbr">${item_abbr}</div>`);
 	}
 
 	update_selector_value_in_cart_item(selector, value, item) {
 		const $item_to_update = this.get_cart_item(item);
-		$item_to_update.attr(`data-${selector}`, escape(value));
+		$item_to_update.attr(`data-${selector}`, value);
 	}
 
 	toggle_checkout_btn(show_checkout) {
@@ -899,8 +910,8 @@ erpnext.PointOfSale.ItemCart = class {
 				<div class="customer-display">
 					${this.get_customer_image()}
 					<div class="customer-name-desc">
-						<div class="customer-name">${customer_name}</div>
-						<div class="customer-desc">${customer}</div>
+						<div class="customer-name">${frappe.utils.escape_html(customer_name)}</div>
+						<div class="customer-desc">${frappe.utils.escape_html(customer)}</div>
 					</div>
 				</div>
 				<div class="customer-fields-container">
@@ -1041,9 +1052,11 @@ erpnext.PointOfSale.ItemCart = class {
 					};
 
 					transaction_container.append(
-						`<div class="invoice-wrapper" data-invoice-name="${escape(invoice.name)}">
+						`<div class="invoice-wrapper" data-invoice-name="${frappe.utils.escape_html(
+							invoice.name
+						)}">
 						<div class="invoice-name-date">
-							<div class="invoice-name">${invoice.name}</div>
+							<div class="invoice-name">${frappe.utils.escape_html(invoice.name)}</div>
 							<div class="invoice-date">${posting_datetime}</div>
 						</div>
 						<div class="invoice-total-status">
@@ -1051,7 +1064,7 @@ erpnext.PointOfSale.ItemCart = class {
 								${format_currency(invoice.grand_total, invoice.currency, frappe.sys_defaults.currency_precision) || 0}
 							</div>
 							<div class="invoice-status">
-								<span class="indicator-pill whitespace-nowrap ${indicator_color[invoice.status]}">
+								<span class="indicator-pill whitespace-nowrap ${indicator_color[invoice.status] || ""}">
 									<span>${__(invoice.status)}</span>
 								</span>
 							</div>

erpnext/selling/page/point_of_sale/pos_item_details.js

@@ -129,24 +129,26 @@ erpnext.PointOfSale.ItemDetails = class {
 			return ``;
 		}
 
-		this.$item_name.html(item_name);
+		this.$item_name.html(frappe.utils.escape_html(item_name));
 		this.$item_description.html(get_description_html());
 		this.$item_price.html(format_currency(price_list_rate, this.currency));
 		if (!this.hide_images && image) {
 			this.$item_image.html(
 				`<img
 					onerror="cur_pos.item_details.handle_broken_image(this)"
-					class="h-full" src="${image}"
-					alt="${frappe.get_abbr(item_name)}"
+					class="h-full" src="${frappe.utils.escape_html(image)}"
+					alt="${frappe.utils.escape_html(frappe.get_abbr(item_name))}"
 					style="object-fit: cover;">`
 			);
 		} else {
-			this.$item_image.html(`<div class="item-abbr">${frappe.get_abbr(item_name)}</div>`);
+			this.$item_image.html(
+				`<div class="item-abbr">${frappe.utils.escape_html(frappe.get_abbr(item_name))}</div>`
+			);
 		}
 	}
 
 	handle_broken_image($img) {
-		const item_abbr = $($img).attr("alt");
+		const item_abbr = frappe.utils.escape_html($($img).attr("alt"));
 		$($img).replaceWith(`<div class="item-abbr">${item_abbr}</div>`);
 	}
 

erpnext/selling/page/point_of_sale/pos_item_selector.js

@@ -196,10 +196,14 @@ erpnext.PointOfSale.ItemSelector = class {
 					${
 						!me.hide_images
 							? `<div class="item-rate">
-								${format_currency(price_list_rate, item.currency, precision) || 0} / ${uom}
+								${frappe.utils.escape_html(format_currency(price_list_rate, item.currency, precision)) || 0} / ${uom}
 							</div>`
 							: `
-							<div class="item-price">${format_currency(price_list_rate, item.currency, precision) || 0}</div>
+							<div class="item-price">${
+								frappe.utils.escape_html(
+									format_currency(price_list_rate, item.currency, precision)
+								) || 0
+							}</div>
 							<div class="item-uom">${uom}</div>
 							<div class="item-qty-available">${qty_to_display || "Non stock item"}</div>
 							`

erpnext/selling/page/point_of_sale/pos_past_order_list.js

@@ -42,7 +42,7 @@ erpnext.PointOfSale.PastOrderList = class {
 		this.$invoices_container.on("click", ".invoice-wrapper", function () {
 			const invoice_clicked = $(this);
 			const invoice_doctype = invoice_clicked.attr("data-invoice-doctype");
-			const invoice_name = unescape(invoice_clicked.attr("data-invoice-name"));
+			const invoice_name = invoice_clicked.attr("data-invoice-name");
 
 			$(".invoice-wrapper").removeClass("invoice-selected");
 			invoice_clicked.addClass("invoice-selected");
@@ -108,15 +108,15 @@ erpnext.PointOfSale.PastOrderList = class {
 		);
 		return `<div class="invoice-wrapper" data-invoice-doctype="${
 			invoice.doctype
-		}" data-invoice-name="${escape(invoice.name)}">
+		}" data-invoice-name="${frappe.utils.escape_html(invoice.name)}">
 				<div class="invoice-name-customer">
 					<div class="invoice-customer">
 						<svg class="mr-2" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
 							<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
 						</svg>
-						${frappe.ellipsis(invoice.customer_name, 20)}
+						${frappe.utils.escape_html(frappe.ellipsis(invoice.customer_name, 20))}
 					</div>
-					<div class="invoice-name">${invoice.name}</div>
+					<div class="invoice-name">${frappe.utils.escape_html(invoice.name)}</div>
 				</div>
 				<div class="invoice-total-date">
 					<div class="invoice-total">${format_currency(invoice.grand_total, invoice.currency) || 0}</div>

erpnext/selling/page/point_of_sale/pos_past_order_summary.js

@@ -82,15 +82,19 @@ erpnext.PointOfSale.PastOrderSummary = class {
 
 		return `<div class="left-section">
 					<div class="customer-section">
-						<div class="customer-name">${doc.customer_name}</div>
-						${is_customer_naming_by_customer_name ? `<div class="customer-code">${doc.customer}</div>` : ""}
-						<div class="customer-email">${this.customer_email}</div>
+						<div class="customer-name">${frappe.utils.escape_html(doc.customer_name)}</div>
+						${
+							is_customer_naming_by_customer_name
+								? `<div class="customer-code">${frappe.utils.escape_html(doc.customer)}</div>`
+								: ""
+						}
+						<div class="customer-email">${frappe.utils.escape_html(this.customer_email)}</div>
 					</div>
-					<div class="cashier">${__("Sold by")}: ${doc.owner}</div>
+					<div class="cashier">${__("Sold by")}: ${frappe.utils.escape_html(doc.owner)}</div>
 				</div>
 				<div class="right-section">
 					<div class="paid-amount">${format_currency(doc.paid_amount, doc.currency)}</div>
-					<div class="invoice-name">${doc.name}</div>
+					<div class="invoice-name">${frappe.utils.escape_html(doc.name)}</div>
 					<span class="indicator-pill whitespace-nowrap ${indicator_color}"><span>${__(doc.status)}</span></span>
 				</div>`;
 	}
@@ -100,8 +104,8 @@ erpnext.PointOfSale.PastOrderSummary = class {
 
 		return `<div class="item-row-wrapper">
 				<div class="item-row-data">
-					<div class="item-name">${item_data.item_name}</div>
-					<div class="item-qty">${item_data.qty || 0} ${item_data.uom}</div>
+					<div class="item-name">${frappe.utils.escape_html(item_data.item_name)}</div>
+					<div class="item-qty">${item_data.qty || 0} ${frappe.utils.escape_html(item_data.uom)}</div>
 					<div class="item-rate-disc">${get_rate_discount_html()}</div>
 				</div>
 
@@ -166,7 +170,7 @@ erpnext.PointOfSale.PastOrderSummary = class {
 			.map((t) => {
 				return `
 				<div class="tax-row">
-					<div class="tax-label">${t.description}</div>
+					<div class="tax-label">${frappe.utils.escape_html(t.description)}</div>
 					<div class="tax-value">${format_currency(t.tax_amount_after_discount_amount, doc.currency)}</div>
 				</div>
 			`;
@@ -185,7 +189,7 @@ erpnext.PointOfSale.PastOrderSummary = class {
 
 	get_payment_html(doc, payment) {
 		return `<div class="summary-row-wrapper payments">
-					<div>${__(payment.mode_of_payment)}</div>
+					<div>${frappe.utils.escape_html(__(payment.mode_of_payment))}</div>
 					<div>${format_currency(payment.amount, doc.currency)}</div>
 				</div>`;
 	}

erpnext/selling/page/point_of_sale/pos_payment.js

@@ -519,7 +519,7 @@ erpnext.PointOfSale.Payment = class {
 					return `
 					<div class="payment-mode-wrapper">
 						<div class="mode-of-payment" data-mode="${mode}" data-payment-type="${payment_type}">
-							${p.mode_of_payment}
+							${frappe.utils.escape_html(p.mode_of_payment)}
 							<div class="${mode}-amount pay-amount">${amount}</div>
 							<div class="${mode} mode-of-payment-control"></div>
 						</div>
@@ -603,7 +603,7 @@ erpnext.PointOfSale.Payment = class {
 				<div class="mode-of-payment loyalty-card" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
 					Redeem Loyalty Points
 					<div class="loyalty-amount-amount pay-amount">${amount}</div>
-					<div class="loyalty-amount-name">${loyalty_program}</div>
+					<div class="loyalty-amount-name">${frappe.utils.escape_html(loyalty_program)}</div>
 					<div class="loyalty-amount mode-of-payment-control"></div>
 				</div>
 			</div>`