diff --git a/erpnext/public/js/templates/item_selector.html b/erpnext/public/js/templates/item_selector.html
index 86a15f49072..0839077f57d 100644
--- a/erpnext/public/js/templates/item_selector.html
+++ b/erpnext/public/js/templates/item_selector.html
@@ -1,17 +1,19 @@
 <div class="app-listing item-list image-view-container item-selector">
 {% for (var i=0; i < data.length; i++) { var item = data[i]; %}
+	{% const item_name = frappe.utils.escape_html(item.name); %}
+	{% const item_title = frappe.utils.escape_html(item.item_name || item.name); %}
 	{% if (i % 4 === 0) { %}<div class="image-view-row">{% } %}
-	<div class="image-view-item" data-name="{{ item.name }}">
+	<div class="image-view-item" data-name="{{ item_name }}">
 		<div class="image-view-header doclist-row">
 			<div class="list-value">
-				<a class="grey list-id" data-name="{{item.name}}"
-					title="{{ item.item_name || item.name}}">
-					{{item.item_name || item.name}}</a>
+				<a class="grey list-id" data-name="{{ item_name }}"
+					title="{{ item_title }}">
+					{{ item_title }}</a>
 			</div>
 		</div>
 		<div class="image-view-body">
-			<a  data-item-code="{{ item.name }}"
-				title="{{ item.item_name || item.name }}"
+			<a  data-item-code="{{ item_name }}"
+				title="{{ item_title }}"
 			>
 				<div class="image-field"
 					style="
@@ -22,11 +24,11 @@
 				>
 					{% if (!item.image) { %}
 					<span class="placeholder-text">
-						{%= frappe.get_abbr(item.item_name || item.name) %}
+						{%= frappe.get_abbr(item_title) %}
 					</span>
 					{% } %}
 					{% if (item.image) { %}
-					<img src="{{ item.image }}" alt="{{item.item_name || item.name}}">
+					<img src="{{ frappe.utils.escape_html(item.image) }}" alt="{{ item_title }}">
 					{% } %}
 				</div>
 			</a>