@shopgate/pwa-common 7.32.0-beta.9 → 7.32.1-beta.1

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/components/Swiper/index.js

@@ -11,6 +11,9 @@ import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import SwiperItem from "./components/SwiperItem";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const INSET_LEFT = 'var(--swiper-pagination-inset-left, 0px)';
+const INSET_RIGHT = 'var(--swiper-pagination-inset-right, 0px)';
+const INSET_WIDTH = `calc(100% - ${INSET_LEFT} - ${INSET_RIGHT})`;
 const useStyles = makeStyles()(theme => ({
   container: {
     position: 'relative',
@@ -18,6 +21,8 @@ const useStyles = makeStyles()(theme => ({
     '&.pagination-below': {
       '& .swiper-pagination.swiper-pagination-bullets': {
         '--swiper-pagination-bottom': 0,
+        '--swiper-pagination-inset-left': '0px',
+        '--swiper-pagination-inset-right': '0px',
         position: 'relative',
         height: 32,
         lineHeight: '40px'
@@ -47,7 +52,7 @@ const useStyles = makeStyles()(theme => ({
     '& .swiper-pagination-fraction': {
       top: 'var(--swiper-pagination-fraction-top-offset, 4px)',
       left: 'auto',
-      right: 0,
+      right: INSET_RIGHT,
       bottom: 'auto',
       fontSize: theme.typography.caption.fontSize,
       background: theme.components.swiper.paginationFractionBackground,
@@ -58,7 +63,16 @@ const useStyles = makeStyles()(theme => ({
       margin: '4px 16px',
       transition: 'opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1)'
     },
-    '& .swiper-pagination-progressbar': {
+    '&& .swiper-pagination-bullets': {
+      left: INSET_LEFT,
+      width: INSET_WIDTH
+    },
+    '&& .swiper-pagination-bullets.swiper-pagination-bullets-dynamic': {
+      left: `calc(50% + (${INSET_LEFT} - ${INSET_RIGHT}) / 2)`
+    },
+    '&& .swiper-pagination-progressbar': {
+      left: INSET_LEFT,
+      width: INSET_WIDTH,
       background: theme.components.swiper.paginationProgressbarBackground,
       '& .swiper-pagination-progressbar-fill': {
         background: theme.components.swiper.paginationProgressbarActiveColor

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/mocks/mockRenderOptions.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+const options = {
+  context: {
+    i18n: () => ({
+      // eslint-disable-next-line no-underscore-dangle
+      __(input) {
+        if (input) {
+          return input;
+        }
+        return '';
+      },
+      _p: () => 'p',
+      _d: () => 'd',
+      _n: () => 'n'
+    })
+  },
+  childContextTypes: {
+    i18n: PropTypes.func
+  }
+};
+export default options;

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.9",
+  "version": "7.32.1-beta.1",
   "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.9",
+    "@shopgate/pwa-benchmark": "7.32.1-beta.1",
     "@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.9",
+    "@shopgate/pwa-core": "7.32.1-beta.1",
     "@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
       }));
     }
   });

package/action-creators/app/spec.js

@@ -1,96 +0,0 @@
-import { APP_WILL_START, APP_DID_START, PWA_DID_APPEAR, PWA_DID_DISAPPEAR, WILL_REGISTER_LINK_EVENTS, DID_REGISTER_LINK_EVENTS, OPEN_DEEP_LINK, OPEN_PUSH_NOTIFICATION, OPEN_UNIVERSAL_LINK } from "../../constants/ActionTypes";
-import { appWillStart, appDidStart, pwaDidAppear, pwaDidDisappear, willRegisterLinkEvents, didRegisterLinkEvents, openDeepLink, openPushNotification, openUniversalLink } from "./index";
-const dataMock = {
-  some: 'data'
-};
-describe('Action Creators: app', () => {
-  describe('appWillStart()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: APP_WILL_START,
-        location: dataMock
-      };
-      expect(appWillStart(dataMock)).toEqual(expected);
-    });
-  });
-  describe('appDidStart()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: APP_DID_START
-      };
-      expect(appDidStart()).toEqual(expected);
-    });
-  });
-  describe('pwaDidAppear()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: PWA_DID_APPEAR
-      };
-      expect(pwaDidAppear()).toEqual(expected);
-    });
-  });
-  describe('pwaDidDisappear()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: PWA_DID_DISAPPEAR
-      };
-      expect(pwaDidDisappear()).toEqual(expected);
-    });
-  });
-  describe('willRegisterLinkEvents()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: WILL_REGISTER_LINK_EVENTS
-      };
-      expect(willRegisterLinkEvents()).toEqual(expected);
-    });
-  });
-  describe('didRegisterLinkEvents()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: DID_REGISTER_LINK_EVENTS
-      };
-      expect(didRegisterLinkEvents()).toEqual(expected);
-    });
-  });
-  describe('openDeepLink()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: OPEN_DEEP_LINK,
-        payload: dataMock
-      };
-      expect(openDeepLink(dataMock)).toEqual(expected);
-    });
-  });
-  describe('openPushNotification()', () => {
-    const notificationId = 'abc123';
-    const link = '/link/to/somewhere';
-    it('should work as expected', () => {
-      const expected = {
-        type: OPEN_PUSH_NOTIFICATION,
-        notificationId,
-        link
-      };
-      expect(openPushNotification(notificationId, link)).toEqual(expected);
-    });
-    it('should work as expected when the link is empty', () => {
-      const expected = {
-        type: OPEN_PUSH_NOTIFICATION,
-        notificationId,
-        link: ''
-      };
-      expect(openPushNotification(notificationId)).toEqual(expected);
-    });
-  });
-  describe('openUniversalLink()', () => {
-    const expected = {
-      type: OPEN_UNIVERSAL_LINK,
-      payload: {
-        link: 'https://testshop.shopgate.com/item/313131313132',
-        wasOpenedFromSearchIndex: true,
-        linkSerial: 1003
-      }
-    };
-    expect(openUniversalLink(expected.payload)).toEqual(expected);
-  });
-});

package/action-creators/client/spec.js

@@ -1,44 +0,0 @@
-import { requestClientInformation, receiveClientInformation, errorClientInformation, receiveClientConnectivity } from "./index";
-import { REQUEST_CLIENT_INFORMATION, RECEIVE_CLIENT_INFORMATION, ERROR_CLIENT_INFORMATION, RECEIVE_CLIENT_CONNECTIVITY } from "../../constants/ActionTypes";
-describe('Action Creators: client', () => {
-  describe('requestClientInformation()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: REQUEST_CLIENT_INFORMATION
-      };
-      expect(requestClientInformation()).toEqual(expected);
-    });
-  });
-  describe('receiveClientInformation()', () => {
-    it('should work as expected', () => {
-      const data = {
-        some: 'data'
-      };
-      const expected = {
-        type: RECEIVE_CLIENT_INFORMATION,
-        data
-      };
-      expect(receiveClientInformation(data)).toEqual(expected);
-    });
-  });
-  describe('errorClientInformation()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: ERROR_CLIENT_INFORMATION
-      };
-      expect(errorClientInformation()).toEqual(expected);
-    });
-  });
-  describe('receiveClientConnectivity()', () => {
-    it('should work as expected', () => {
-      const data = {
-        some: 'data'
-      };
-      const expected = {
-        type: RECEIVE_CLIENT_CONNECTIVITY,
-        data
-      };
-      expect(receiveClientConnectivity(data)).toEqual(expected);
-    });
-  });
-});

package/action-creators/menu/spec.js

@@ -1,37 +0,0 @@
-import { REQUEST_MENU, RECEIVE_MENU, ERROR_MENU } from "../../constants/ActionTypes";
-import { requestMenu, receiveMenu, errorMenu } from "./index";
-const entries = [{
-  url: '/',
-  label: 'Page Label'
-}];
-const id = 'quicklinks';
-describe('Action Creators: menu', () => {
-  describe('requestMenu()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: REQUEST_MENU,
-        id
-      };
-      expect(requestMenu(id)).toEqual(expected);
-    });
-  });
-  describe('receiveMenu()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: RECEIVE_MENU,
-        id,
-        entries
-      };
-      expect(receiveMenu(id, entries)).toEqual(expected);
-    });
-  });
-  describe('errorMenu()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: ERROR_MENU,
-        id
-      };
-      expect(errorMenu(id)).toEqual(expected);
-    });
-  });
-});

package/action-creators/modal/spec.js

@@ -1,26 +0,0 @@
-import { CREATE_MODAL, REMOVE_MODAL } from "../../constants/ActionTypes";
-import { createModal, removeModal } from "./index";
-const options = {
-  some: 'data'
-};
-const id = 'modalId';
-describe('Action Creators: modal', () => {
-  describe('createModal()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: CREATE_MODAL,
-        options
-      };
-      expect(createModal(options)).toEqual(expected);
-    });
-  });
-  describe('removeModal()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: REMOVE_MODAL,
-        id
-      };
-      expect(removeModal(id)).toEqual(expected);
-    });
-  });
-});

package/action-creators/page/spec.js

@@ -1,38 +0,0 @@
-import { REQUEST_PAGE_CONFIG, RECEIVE_PAGE_CONFIG, ERROR_PAGE_CONFIG } from "../../constants/ActionTypes";
-import { requestPageConfig, receivePageConfig, errorPageConfig } from "./index";
-const pageId = 'index';
-const config = {
-  some: 'data'
-};
-describe('Action Creators: page', () => {
-  describe('requestPageConfig()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: REQUEST_PAGE_CONFIG,
-        pageId
-      };
-      expect(requestPageConfig(pageId)).toEqual(expected);
-    });
-  });
-  describe('receivePageConfig()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: RECEIVE_PAGE_CONFIG,
-        pageId,
-        config
-      };
-      expect(receivePageConfig(pageId, config)).toEqual(expected);
-    });
-  });
-  describe('errorPageConfig()', () => {
-    it('should work as expected', () => {
-      const errorCode = 'error';
-      const expected = {
-        type: ERROR_PAGE_CONFIG,
-        errorCode,
-        pageId
-      };
-      expect(errorPageConfig(pageId, errorCode)).toEqual(expected);
-    });
-  });
-});

package/action-creators/url/spec.js

@@ -1,45 +0,0 @@
-import { RECEIVE_URL, REQUEST_URL, ERROR_URL } from "../../constants/ActionTypes";
-import { receiveUrl, requestUrl, errorUrl } from "./index";
-const url = 'https://www.myshop.com/checkout';
-const urlType = 'checkout';
-const expires = 123456;
-describe('Action Creators: url', () => {
-  describe('receiveUrl()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: RECEIVE_URL,
-        url,
-        urlType,
-        expires
-      };
-      expect(receiveUrl(urlType, url, expires)).toEqual(expected);
-    });
-    it('should work as expected when no expires parameter is passed', () => {
-      const expected = {
-        type: RECEIVE_URL,
-        url,
-        urlType,
-        expires: null
-      };
-      expect(receiveUrl(urlType, url)).toEqual(expected);
-    });
-  });
-  describe('requestUrl()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: REQUEST_URL,
-        urlType
-      };
-      expect(requestUrl(urlType)).toEqual(expected);
-    });
-  });
-  describe('errorUrl()', () => {
-    it('should work as expected', () => {
-      const expected = {
-        type: ERROR_URL,
-        urlType
-      };
-      expect(errorUrl(urlType)).toEqual(expected);
-    });
-  });
-});