CIF-3024 - DOM XSS in multiple CIF core components (#1014)

* resolves the DOM XSS issues
adobe · Jul 26, 2024 · f84d420 · f84d420
1 parent f3f0dd5
commit f84d420
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/ui.apps/package-lock.json b/ui.apps/package-lock.json
diff --git a/ui.apps/package.json b/ui.apps/package.json
@@ -46,6 +46,7 @@
     "babel-plugin-istanbul": "^5.2.0",
     "chai": "^4.2.0",
     "glob": "^7.1.6",
+    "graphql": "^15.3.0",
     "karma": "^6.3.16",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -60,11 +61,11 @@
     "prettier": "^1.19.1",
     "sinon": "^7.5.0",
     "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "graphql": "^15.3.0"
+    "webpack-cli": "^3.3.11"
   },
   "dependencies": {
     "@adobe/magento-storefront-events-sdk": "1.1.16",
-    "@babel/polyfill": "^7.8.3"
+    "@babel/polyfill": "^7.8.3",
+    "dompurify": "^3.1.6"
   }
 }
diff --git a/ui.apps/src/main/content/jcr_root/apps/core/cif/clientlibs/common/js/PriceFormatter.js b/ui.apps/src/main/content/jcr_root/apps/core/cif/clientlibs/common/js/PriceFormatter.js
@@ -15,6 +15,8 @@
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 'use strict';
 
+import DOMPurify from 'dompurify';
+
 class PriceFormatter {
     constructor(locale) {
         this._locale = locale || window.CIF.locale || document.documentElement.lang || navigator.language;
@@ -88,7 +90,7 @@ class PriceFormatter {
                 })}</span>`;
             }
         }
-        return innerHTML;
+        return DOMPurify.sanitize(innerHTML);
     }
 
     formatPrice(price) {

diff --git a/...ent/jcr_root/apps/core/cif/components/commerce/product/v1/product/clientlib/js/product.js b/...ent/jcr_root/apps/core/cif/components/commerce/product/v1/product/clientlib/js/product.js
@@ -15,6 +15,8 @@
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 'use strict';
 
+import DOMPurify from 'dompurify';
+
 class Product {
     constructor(config) {
         this._element = config.element;
@@ -90,7 +92,7 @@ class Product {
         // Update values and enable add to cart button
         this._element.querySelector(Product.selectors.sku).innerText = variant.sku;
         this._element.querySelector(Product.selectors.name).innerText = variant.name;
-        this._element.querySelector(Product.selectors.description).innerHTML = variant.description;
+        this._element.querySelector(Product.selectors.description).innerHTML = DOMPurify.sanitize(variant.description);
 
         // Use client-side fetched price
         if (this._state.sku in this._state.prices) {

diff --git a/...ent/jcr_root/apps/core/cif/components/commerce/product/v3/product/clientlib/js/product.js b/...ent/jcr_root/apps/core/cif/components/commerce/product/v3/product/clientlib/js/product.js
@@ -15,6 +15,8 @@
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 'use strict';
 
+import DOMPurify from 'dompurify';
+
 class Product {
     constructor(config) {
         this._element = config.element;
@@ -88,7 +90,7 @@ class Product {
         const nameEl = this._element.querySelector(Product.selectors.name);
         if (nameEl) nameEl.innerText = variant.name;
         const descriptionEl = this._element.querySelector(Product.selectors.description);
-        if (descriptionEl) descriptionEl.innerHTML = variant.description;
+        if (descriptionEl) descriptionEl.innerHTML = DOMPurify.sanitize(variant.description);
 
         // Use client-side fetched price
         if (this._state.sku in this._state.prices) {