@shopgate/pwa-common 7.34.0-beta.1 → 7.34.0-beta.3

package/components/HtmlSanitizer/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { embeddedMedia, configuration } from '@shopgate/engage/core/collections';
 import { CONFIGURATION_COLLECTION_KEY_UNIVERSAL_LINK_HANDLER } from '@shopgate/engage/core/constants';
+import SafeHtml from '@shopgate/engage/components/SafeHtml';
 import EmbeddedMedia from "../EmbeddedMedia";
 import parseHTML from "../../helpers/html/parseHTML";
 import connect from "./connector";
@@ -132,17 +133,15 @@ let HtmlSanitizer = /*#__PURE__*/function (_Component) {
       comfortCookiesAccepted: this.props.comfortCookiesAccepted,
       statisticsCookiesAccepted: this.props.statisticsCookiesAccepted
     };
-    const innerHTML = {
-      __html: parseHTML(this.props.children, this.props.decode, this.props.settings, this.props.processStyles, cookieConsentSettings)
-    };
+    const html = parseHTML(this.props.children, this.props.decode, this.props.settings, this.props.processStyles, cookieConsentSettings, this.props.allowScripts);
     const {
       wrapper: Wrapper
     } = this.props;
     return /*#__PURE__*/_jsx(Wrapper, {
       cookieConsentSettings: cookieConsentSettings,
-      children: /*#__PURE__*/_jsx("div", {
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: innerHTML,
+      children: /*#__PURE__*/_jsx(SafeHtml, {
+        profile: this.props.allowScripts ? 'trusted' : 'rich',
+        html: html,
         ref: this.htmlContainer,
         className: classNames(this.props.className, 'common__html-sanitizer'),
         onClickCapture: this.handleClick
@@ -152,6 +151,7 @@ let HtmlSanitizer = /*#__PURE__*/function (_Component) {
   return HtmlSanitizer;
 }(Component);
 HtmlSanitizer.defaultProps = {
+  allowScripts: false,
   children: '',
   className: '',
   decode: false,

package/components/Icon/index.d.ts

@@ -1,6 +1,6 @@
 export interface IconProps {
     /**
-     * Raw SVG markup string that will be injected into the <svg>.
+     * SVG markup that is sanitized and rendered inside the <svg>.
      */
     content: string;
     /**
@@ -26,7 +26,7 @@ export interface IconProps {
 /**
  * The Icon component.
  *
- * Renders an inline SVG icon using injected SVG markup.
+ * Renders an inline SVG icon using sanitized SVG markup.
  *
  * Provides basic styling via `currentColor` and supports size and color
  * overrides through props while allowing external class-based overrides.

package/components/Icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,gCAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,gCAiBX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Icon/index.js

@@ -1,4 +1,5 @@
 import { makeStyles } from '@shopgate/engage/styles';
+import SafeHtml from '@shopgate/engage/components/SafeHtml';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
@@ -10,7 +11,7 @@ const useStyles = makeStyles()({
 /**
  * The Icon component.
  *
- * Renders an inline SVG icon using injected SVG markup.
+ * Renders an inline SVG icon using sanitized SVG markup.
  *
  * Provides basic styling via `currentColor` and supports size and color
  * overrides through props while allowing external class-based overrides.
@@ -26,15 +27,13 @@ const Icon = ({
     cx,
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx("svg", {
+  return /*#__PURE__*/_jsx(SafeHtml, {
+    as: "svg",
+    profile: "svg",
+    html: content,
     className: cx(classes.root, 'common__icon', className),
     viewBox: viewBox,
-    xmlns: "http://www.w3.org/2000/svg"
-    // eslint-disable-next-line react/no-danger
-    ,
-    dangerouslySetInnerHTML: {
-      __html: content
-    },
+    xmlns: "http://www.w3.org/2000/svg",
     style: {
       fontSize: size,
       fill: color

package/helpers/html/parseHTML.js

@@ -16,9 +16,10 @@ import decodeHTML from "./decodeHTML";
  * are accepted.
  * @param {boolean} [cookieConsentSettings.statisticsCookiesAccepted] Whether statistics cookies
  * are accepted.
+ * @param {boolean} [executeScripts=true] When false, scripts are removed without running them.
  * @returns {string} The HTML without any script tags.
  */
-const parseHTML = (html, decode, settings, processStyles = false, cookieConsentSettings = {}) => {
+const parseHTML = (html, decode, settings, processStyles = false, cookieConsentSettings = {}, executeScripts = true) => {
   const id = CryptoJs.MD5(JSON.stringify(settings)).toString();
   const container = getDOMContainer(`html-sanitizer-${id}`);
   const cookieConsent = {
@@ -61,16 +62,17 @@ const parseHTML = (html, decode, settings, processStyles = false, cookieConsentS
       }
       return externalScripts;
     };
+    if (executeScripts) {
+      // A collection of all the inline script tags.
+      inlineScripts = getInlineScripts(dom.childNodes);
+      // A collection of all the external script tags.
+      externalScripts = getExternalScripts(dom.childNodes, handleOnload);
 
-    // A collection of all the inline script tags.
-    inlineScripts = getInlineScripts(dom.childNodes);
-    // A collection of all the external script tags.
-    externalScripts = getExternalScripts(dom.childNodes, handleOnload);
-
-    // Append the external scripts.
-    externalScripts.forEach(scriptTag => {
-      container.appendChild(scriptTag);
-    });
+      // Append the external scripts.
+      externalScripts.forEach(scriptTag => {
+        container.appendChild(scriptTag);
+      });
+    }
     if (processStyles) {
       getStyles(dom).forEach(style => container.appendChild(style));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.34.0-beta.1",
+  "version": "7.34.0-beta.3",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -44,7 +44,7 @@
     "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.34.0-beta.1",
+    "@shopgate/pwa-core": "7.34.0-beta.3",
     "@types/lodash": "^4.17.25",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.18.1",