@shopgate/pwa-common 7.32.0-beta.20 → 7.32.0-beta.21

package/actions/app/handleLink.js

@@ -6,6 +6,7 @@ import "core-js/modules/web.url-search-params.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { DEEPLINK_CART_ADD_PRODUCT_PATTERN } from '@shopgate/pwa-common-commerce/cart/constants';
 import fetchProduct from '@shopgate/pwa-common-commerce/product/actions/fetchProduct';
+import { sanitizeLink } from "../../helpers/router";
 import { historyPush, historyReset } from "../router";
 import { INDEX_PATH_DEEPLINK, INDEX_PATH } from "../../constants/RoutePaths";
 
@@ -24,8 +25,11 @@ export default function handleLink(payload, allowExternalLinks = false) {
       return;
     }
 
-    // cast to string
-    link = String(link);
+    // Cast to string and remove potentially malicious content from the external link
+    link = sanitizeLink(String(link));
+    if (!link) {
+      return;
+    }
     let pathname;
     if (link.startsWith('http')) {
       // Link is common URL schema.

package/helpers/html/decodeHTML.js

@@ -1,11 +1,13 @@
 /**
  * Unescape HTML entities.
+ * The input is assigned to a textarea element whose content is parsed as plain text, so markup
+ * within the input is never turned into DOM nodes and can't execute scripts.
  * @param {string} input The escaped HTML.
  * @returns {string} The unescaped HTML.
  */
 const decodeHTML = input => {
-  const e = document.createElement('div');
-  e.innerHTML = input;
-  return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = input;
+  return textarea.value;
 };
 export default decodeHTML;

package/helpers/html/htmlToText.js

@@ -0,0 +1,15 @@
+/**
+ * Converts a string which might contain HTML markup or HTML entities into plain text.
+ * Tags are stripped and entities are decoded. The input is parsed within an inert document
+ * created by DOMParser, so scripts are not executed and no resources are loaded.
+ * @param {string} input The input string.
+ * @returns {string} The plain text.
+ */
+const htmlToText = input => {
+  if (typeof input !== 'string' || input === '') {
+    return '';
+  }
+  const doc = new DOMParser().parseFromString(input, 'text/html');
+  return doc.body?.textContent ?? '';
+};
+export default htmlToText;

package/helpers/router/index.js

@@ -1,7 +1,9 @@
 import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.string.replace.js";
 import "core-js/modules/web.url-search-params.js";
 import { createBrowserHistory } from 'history';
 import { router } from '@virtuous/conductor';
+import { logger } from '@shopgate/pwa-core/helpers';
 const match = /^(.*)index.html/.exec(window.location.pathname);
 const {
   getCurrentRoute
@@ -56,4 +58,87 @@ export const parseObjectToQueryString = (obj, includePrefix = true) => {
     return `?${urlParams.toString()}`;
   }
   return urlParams.toString();
+};
+
+// Angle brackets and their HTML entity representations.
+const ANGLE_BRACKET_ENTITIES = '&(lt|gt|#0*6[02]|#x0*3[ce]);?';
+const UNSAFE_CHARS_REGEX = new RegExp(`[<>]|${ANGLE_BRACKET_ENTITIES}`, 'i');
+const UNSAFE_PROTOCOL_REGEX = /^\s*(javascript|data|vbscript):/i;
+
+/**
+ * Removes HTML tags, angle brackets and their entity representations from a string.
+ * @param {string} value The (decoded) value.
+ * @returns {string}
+ */
+const stripHtml = value => value.replace(new RegExp(ANGLE_BRACKET_ENTITIES, 'gi'), '').replace(/<[^>]*>/g, '').replace(/[<>]/g, '');
+
+/**
+ * Removes HTML from a single URI component. The component is only modified when it contains
+ * suspicious characters, so regular components (e.g. encoded product ids) stay untouched.
+ * @param {string} component A single URI encoded component like a path segment.
+ * @returns {string}
+ */
+const sanitizeUriComponent = component => {
+  let decoded;
+  try {
+    decoded = decodeURIComponent(component);
+  } catch (e) {
+    // Malformed encoding - fall back to the raw component.
+    decoded = component;
+  }
+  if (!UNSAFE_CHARS_REGEX.test(decoded)) {
+    return component;
+  }
+  return encodeURIComponent(stripHtml(decoded));
+};
+
+/**
+ * Removes HTML from a decoded query parameter key or value.
+ * @param {string} value The decoded value.
+ * @returns {string}
+ */
+const sanitizeQueryValue = value => UNSAFE_CHARS_REGEX.test(value) ? stripHtml(value) : value;
+
+/**
+ * Sanitizes a link which was received from an external source (e.g. deep links or push messages)
+ * before it's passed to the router. HTML markup is removed from the path, query and hash to prevent
+ * that it's rendered somewhere within the app. Links with a script protocol are rejected.
+ * Links without suspicious content are returned unchanged.
+ * @param {string} link The link to sanitize.
+ * @returns {string} The sanitized link or an empty string when the link was rejected.
+ */
+export const sanitizeLink = link => {
+  if (typeof link !== 'string' || link === '') {
+    return '';
+  }
+  if (UNSAFE_PROTOCOL_REGEX.test(link)) {
+    logger.warn('sanitizeLink: Rejected link with unsafe protocol', link);
+    return '';
+  }
+  const hashIndex = link.indexOf('#');
+  const beforeHash = hashIndex === -1 ? link : link.slice(0, hashIndex);
+  const hash = hashIndex === -1 ? null : link.slice(hashIndex + 1);
+  const queryIndex = beforeHash.indexOf('?');
+  const base = queryIndex === -1 ? beforeHash : beforeHash.slice(0, queryIndex);
+  const query = queryIndex === -1 ? null : beforeHash.slice(queryIndex + 1);
+  let sanitized = base.split('/').map(sanitizeUriComponent).join('/');
+  if (query !== null) {
+    const params = new URLSearchParams(query);
+    const sanitizedParams = new URLSearchParams();
+    let modified = false;
+    params.forEach((value, key) => {
+      const sanitizedKey = sanitizeQueryValue(key);
+      const sanitizedValue = sanitizeQueryValue(value);
+      modified = modified || sanitizedKey !== key || sanitizedValue !== value;
+      sanitizedParams.append(sanitizedKey, sanitizedValue);
+    });
+    sanitized += `?${modified ? sanitizedParams.toString() : query}`;
+  }
+  if (hash !== null) {
+    sanitized += `#${sanitizeUriComponent(hash)}`;
+  }
+  if (sanitized !== link) {
+    logger.warn('sanitizeLink: Removed unsafe content from link', link);
+  }
+  return sanitized;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.32.0-beta.20",
+  "version": "7.32.0-beta.21",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.32.0-beta.20",
+    "@shopgate/pwa-benchmark": "7.32.0-beta.21",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -40,7 +40,7 @@
     "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.32.0-beta.20",
+    "@shopgate/pwa-core": "7.32.0-beta.21",
     "@types/lodash": "^4.17.24",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",

package/subscriptions/router.js

@@ -21,6 +21,7 @@ import { navigate$, userDidLogin$, appWillStart$, windowOpenOverride$ } from "..
 import { isUserLoggedIn } from "../selectors/user";
 import { getIsConnected } from "../selectors/client";
 import { INDEX_PATH } from "../constants/RoutePaths";
+import { sanitizeLink } from "../helpers/router";
 import appConfig from "../helpers/config";
 import authRoutes from "../collections/AuthRoutes";
 import ToastProvider from "../providers/toast";
@@ -108,6 +109,10 @@ export default function routerSubscriptions(subscribe) {
         }
       case HISTORY_RESET_TO:
         {
+          const sanitizedResetToPathname = sanitizeLink(String(resetToPathname || ''));
+          if (!sanitizedResetToPathname) {
+            return;
+          }
           await router.pop({
             steps: historyLength - 1,
             state: routeState,
@@ -115,7 +120,7 @@ export default function routerSubscriptions(subscribe) {
             emitAfter: false
           });
           await router.replace({
-            pathname: resetToPathname,
+            pathname: sanitizedResetToPathname,
             state: routeState
           });
           return;
@@ -124,6 +129,13 @@ export default function routerSubscriptions(subscribe) {
         break;
     }
 
+    // Remove HTML markup from the location (e.g. within query parameters of links from CMS content)
+    // to prevent that it's rendered within pages or sent within requests. Links with a script
+    // protocol are rejected.
+    if (location) {
+      location = sanitizeLink(String(location));
+    }
+
     // Remove trailing slashes from internal links, since they might break the routing mechanism.
     // External links are treated as valid, since we don't know about the requirements at the
     // 3rd party server (e.g. google maps links might require trailing slashes).
@@ -331,9 +343,10 @@ export default function routerSubscriptions(subscribe) {
      * so that the router can decide how to handle the URL.
      */
     Linking.addEventListener('windowOpenRequested', event => {
-      const {
-        targetUrl
-      } = event.detail;
+      const targetUrl = sanitizeLink(String(event.detail?.targetUrl || ''));
+      if (!targetUrl) {
+        return;
+      }
       dispatch(historyPush({
         pathname: targetUrl,
         state: {}
@@ -371,9 +384,10 @@ export default function routerSubscriptions(subscribe) {
     action,
     dispatch
   }) => {
-    if (action.pathname) {
+    const pathname = sanitizeLink(String(action.pathname || ''));
+    if (pathname) {
       dispatch(historyPush({
-        pathname: action.pathname
+        pathname
       }));
     }
   });