@commercetools-frontend/mc-html-template 21.4.0 → 21.5.0

package/README.md

@@ -4,7 +4,7 @@
   <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-html-template"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-html-template" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-html-template"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-html-template/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/mc-html-template"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/mc-html-template" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/main/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
 </p>
 
-This package contains utils and scripts related to the `index.html` for a MC application in production.
+This package contains utils and scripts related to the `index.html` for a Custom Application.
 
 ## Install
 
@@ -14,13 +14,25 @@ $ npm install --save @commercetools-frontend/mc-html-template
 
 ## API
 
-#### `generateTemplate({ cssChunks: Array<cssPath>, scriptChunks: Array<scriptPath> }): String`
+### `generateTemplate`
 
-This method will return the compiled HTML document with the CSS/JS scripts injected.
+This method will return the template HTML document with the provided CSS/JS scripts injected.
 
 > NOTE that the HTML document will still have the **placeholders** (see `replaceHtmlPlaceholders`)
 
-#### `replaceHtmlPlaceholders(html: String, { env: Object, headers: Object, cliFlags: Object }): String`
+```ts
+type TGenerateTemplateOptions = {
+  cssImports?: string[];
+  scriptImports?: string[];
+};
+
+function generateTemplate({
+  cssImports = [],
+  scriptImports = [],
+}: TGenerateTemplateOptions);
+```
+
+### `replaceHtmlPlaceholders`
 
 This method will replace the **placeholders** defined in the HTML document based on the application config.
 
@@ -37,7 +49,35 @@ At the moment we define the following placeholders:
 - `__GTM_SCRIPT__`: the actual GTM script, in case the `trackingGtm` is defined in the `additionalEnv` property of the application config
 - `__CSP__`: the generated `Content-Security-Policy` directives, defined as an HTML meta tag
 
-#### `processHeaders(applicationConfig: Object, { env: Object, headers: Object }): Object`
+```ts
+type TReplaceHtmlPlaceholdersOptions = {
+  env: ApplicationRuntimeConfig['env'];
+  headers: Record<string, string | undefined>;
+};
+
+function replaceHtmlPlaceholders(
+  indexHtmlContent: string,
+  options: TReplaceHtmlPlaceholdersOptions
+): string;
+```
+
+### `compileHtml`
+
+This method will compile the template HTML document.
+
+```ts
+type TCompileHtmlResult = {
+  env: ApplicationRuntimeConfig['env'];
+  headers: Record<string, string | undefined>;
+  indexHtmlContent: string;
+};
+
+async function compileHtml(
+  indexHtmlTemplatePath: string
+): Promise<TCompileHtmlResult>;
+```
+
+### `processHeaders`
 
 This method will return the security headers to be used on the server response, serving the `index.html`.
 
@@ -57,6 +97,12 @@ The return value of the `processHeaders` function contains the following ready-t
 }
 ```
 
+```ts
+function processHeaders(
+  applicationConfig: ApplicationRuntimeConfig
+): Record<string, string | undefined>;
+```
+
 ## Bundler entry points
 
 The package exposes some special entry points used by specific bundlers to use the HTML template.

package/dist/commercetools-frontend-mc-html-template.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/commercetools-frontend-mc-html-template.cjs.dev.js

@@ -0,0 +1,255 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var fs = require('fs');
+var applicationConfig = require('@commercetools-frontend/application-config');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Object$assign = require('@babel/runtime-corejs3/core-js-stable/object/assign');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var constants = require('@commercetools-frontend/constants');
+var crypto = require('crypto');
+var serialize = require('serialize-javascript');
+var generateTemplate = require('./generate-template-211c0b41.cjs.dev.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Object$assign__default = /*#__PURE__*/_interopDefault(_Object$assign);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var crypto__default = /*#__PURE__*/_interopDefault(crypto);
+var serialize__default = /*#__PURE__*/_interopDefault(serialize);
+
+function createAssetHash(content) {
+  var sha256Hash = crypto__default["default"].createHash('sha256').update(content).digest('base64');
+  /**
+   * NOTE:
+   *   We prefix the hash function type as the browser
+   *   needs it when validating the contents of a script against
+   *   CSP headers sent.
+   *   For more information head to: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Sources
+   */
+
+  return "sha256-".concat(sha256Hash);
+}
+
+var sanitizeAppEnvironment = function sanitizeAppEnvironment(env) {
+  return serialize__default["default"](env, {
+    isJSON: true
+  });
+};
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+var htmlScripts$1 = {
+  "dataLayer": "window.dataLayer=[{\"gtm.start\":(new Date).getTime(),event:\"gtm.js\"}];",
+  "loadingScreen": "window.onAppLoaded=function(){const e=document.querySelector(\"#app-loader\");e&&e.parentNode.removeChild(e)},setTimeout(function(){const e=document.querySelector(\".loading-screen\");e&&e.classList.remove(\"loading-screen--hidden\")},250),setTimeout(function(){const e=document.querySelector(\".long-loading-notice\");e&&e.classList.remove(\"long-loading-notice--hidden\")},2e3);",
+  "publicPath": "window.__dynamicImportHandler__=function(n){return window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n.replace(/^(\\.\\/)?/,\"\")},window.__dynamicImportPreload__=function(n){return n.map(n=>window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n)};"
+};
+
+var toArray = function toArray(value) {
+  return _Array$isArray__default["default"](value) ? value : [value];
+};
+
+var mergeCspDirectives = function mergeCspDirectives() {
+  for (var _len = arguments.length, directives = new Array(_len), _key = 0; _key < _len; _key++) {
+    directives[_key] = arguments[_key];
+  }
+
+  return _reduceInstanceProperty__default["default"](directives).call(directives, function (mergedCsp, csp) {
+    var _context;
+
+    return _Object$assign__default["default"](mergedCsp, _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](csp)).call(_context, function (acc, directiveKey) {
+      var _context2;
+
+      return _Object$assign__default["default"](acc, _defineProperty({}, directiveKey, _concatInstanceProperty__default["default"](_context2 = []).call(_context2, _toConsumableArray(toArray(mergedCsp[directiveKey] ? mergedCsp[directiveKey] : [])), _toConsumableArray(toArray(csp[directiveKey])))));
+    }, {}));
+  }, {});
+};
+
+var toHeaderString = function toHeaderString() {
+  var _context3;
+
+  var directives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](directives)).call(_context3, function (_ref) {
+    var _context4;
+
+    var _ref2 = _slicedToArray(_ref, 2),
+        directive = _ref2[0],
+        value = _ref2[1];
+
+    return _concatInstanceProperty__default["default"](_context4 = "".concat(directive, " ")).call(_context4, _Array$isArray__default["default"](value) ? value.join(' ') : value);
+  }).join('; ');
+};
+
+var toStructuredHeaderString = function toStructuredHeaderString() {
+  var _context5;
+
+  var directives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _mapInstanceProperty__default["default"](_context5 = _Object$entries__default["default"](directives)).call(_context5, function (_ref3) {
+    var _context6;
+
+    var _ref4 = _slicedToArray(_ref3, 2),
+        directive = _ref4[0],
+        value = _ref4[1];
+
+    return _concatInstanceProperty__default["default"](_context6 = "".concat(directive, "=")).call(_context6, _Array$isArray__default["default"](value) ? value.join(' ') : value);
+  }).join(', ');
+};
+
+var processHeaders = function processHeaders(applicationConfig) {
+  var _context7, _context8, _context9, _applicationConfig$he, _applicationConfig$he2, _applicationConfig$he3, _context10, _applicationConfig$he4, _applicationConfig$he5;
+
+  var isMcDevEnv = applicationConfig.env.env === 'development'; // List hashes for injected inline scripts.
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+
+  var htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash("window.app = ".concat(sanitizeAppEnvironment(applicationConfig.env), ";")), createAssetHash(htmlScripts$1.publicPath), createAssetHash(htmlScripts$1.dataLayer)]; // // List hashes for injected inline styles.
+  // // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+  // const htmlStylesHashes = [createAssetHash(htmlStyles.loadingScreen)];
+
+  /**
+   * Content Security Policy (CSP)
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+   */
+
+  var cspDirectives = _Object$assign__default["default"]({
+    'default-src': "'none'",
+    'script-src': _concatInstanceProperty__default["default"](_context7 = ["'self'", 'www.googletagmanager.com/gtm.js', 'www.google-analytics.com/analytics.js']).call(_context7, isMcDevEnv ? // Allow webpack to load source maps on runtime when errors occur
+    // using script tags
+    ['localhost:*', "'unsafe-inline'"] : _mapInstanceProperty__default["default"](htmlScriptsHashes).call(htmlScriptsHashes, function (assetHash) {
+      return "'".concat(assetHash, "'");
+    })),
+    'connect-src': _concatInstanceProperty__default["default"](_context8 = ["'self'", 'app.launchdarkly.com', 'clientstream.launchdarkly.com', 'events.launchdarkly.com', 'app.getsentry.com', // Match all attempts to load from any subdomain of `sentry.io`
+    '*.sentry.io', 'www.google-analytics.com']).call(_context8, isMcDevEnv ? ['ws:', 'localhost:8080', 'webpack-internal:'] : []),
+    'img-src': ['*', 'data:'],
+    'style-src': _concatInstanceProperty__default["default"](_context9 = ["'self'", 'fonts.googleapis.com', 'data:']).call(_context9, // TODO: investigate what needs to be done to avoid unsafe-inline styles
+    // https://github.com/commercetools/merchant-center-frontend/pull/5223#discussion_r210367636
+    ["'unsafe-inline'"] // TODO: enable this once we can avoid unsafe-inline
+    // htmlStylesHashes.map(assetHash => `'${assetHash}'`)
+    ),
+    'font-src': ["'self'", 'fonts.gstatic.com', 'data:']
+  }, isMcDevEnv ? {
+    // NOTE: use this instead of `upgrade-insecure-requests` for local
+    // development to avoid `http://localhost` requests to be redirected
+    // to https.
+    'block-all-mixed-content': ''
+  } : {
+    // NOTE: prefer this over `block-all-mixed-content`.
+    // https://youtu.be/j-0Bj40juMI?t=11m47s
+    'upgrade-insecure-requests': ''
+  } // NOTE: we might want to define further policies in the future, for example
+  // - `require-sri-for style script` (at the moment not possible because
+  //   GTM and Intercom scripts are apparently not meant for this)
+  ); // Recursively merge the directives
+
+
+  var mergedCsp = mergeCspDirectives(cspDirectives, (_applicationConfig$he = (_applicationConfig$he2 = applicationConfig.headers) === null || _applicationConfig$he2 === void 0 ? void 0 : _applicationConfig$he2.csp) !== null && _applicationConfig$he !== void 0 ? _applicationConfig$he : {});
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, constants.HTTP_SECURITY_HEADERS), {}, {
+    // The `Content-Security-Policy` header is always generated
+    // based on the Custom Application config.
+    'Content-Security-Policy': toHeaderString(mergedCsp)
+  }, ((_applicationConfig$he3 = applicationConfig.headers) === null || _applicationConfig$he3 === void 0 ? void 0 : _applicationConfig$he3.strictTransportSecurity) && {
+    'Strict-Transport-Security': _concatInstanceProperty__default["default"](_context10 = [constants.HTTP_SECURITY_HEADERS['Strict-Transport-Security']]).call(_context10, _toConsumableArray(applicationConfig.headers.strictTransportSecurity)).join('; ')
+  }), ((_applicationConfig$he4 = applicationConfig.headers) === null || _applicationConfig$he4 === void 0 ? void 0 : _applicationConfig$he4.featurePolicies) && {
+    'Feature-Policy': toHeaderString(applicationConfig.headers.featurePolicies)
+  }), ((_applicationConfig$he5 = applicationConfig.headers) === null || _applicationConfig$he5 === void 0 ? void 0 : _applicationConfig$he5.permissionsPolicies) && {
+    'Permissions-Policy': toStructuredHeaderString(applicationConfig.headers.permissionsPolicies)
+  });
+};
+
+var htmlScripts = {
+  "dataLayer": "window.dataLayer=[{\"gtm.start\":(new Date).getTime(),event:\"gtm.js\"}];",
+  "loadingScreen": "window.onAppLoaded=function(){const e=document.querySelector(\"#app-loader\");e&&e.parentNode.removeChild(e)},setTimeout(function(){const e=document.querySelector(\".loading-screen\");e&&e.classList.remove(\"loading-screen--hidden\")},250),setTimeout(function(){const e=document.querySelector(\".long-loading-notice\");e&&e.classList.remove(\"long-loading-notice--hidden\")},2e3);",
+  "publicPath": "window.__dynamicImportHandler__=function(n){return window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n.replace(/^(\\.\\/)?/,\"\")},window.__dynamicImportPreload__=function(n){return n.map(n=>window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n)};"
+}; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+
+var htmlStyles = {
+  "loadingScreen": ".loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}.loading-screen--hidden{display:none}.loading-screen>*+*{margin:24px 0 0}.loading-spinner{width:32px;height:32px}.long-loading-notice{color:#999;font-family:'Open Sans',sans-serif;font-size:12px}.long-loading-notice--hidden{visibility:hidden}.loading-spinner-circle{fill:#213c45;opacity:.2}@keyframes loading-spinner-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading-spinner-pointer{transform-origin:20px 20px 0;animation:loading-spinner-animation .5s infinite linear}"
+};
+
+var trimTrailingSlash = function trimTrailingSlash(value) {
+  return value.replace(/\/$/, '');
+};
+
+var getGtmTrackingScript = function getGtmTrackingScript(gtmId) {
+  if (!gtmId) return '';
+  var url = "https://www.googletagmanager.com/gtm.js?id=".concat(gtmId);
+  return "\n<script async type=\"text/javascript\" src=\"".concat(url, "\" referrerpolicy=\"no-referrer\"></script>\n  ");
+};
+
+var replaceHtmlPlaceholders = function replaceHtmlPlaceholders(indexHtmlContent, options) {
+  var _options$headers$Cont, _options$headers;
+
+  return indexHtmlContent.replace(new RegExp('__CSP__', 'g'), (_options$headers$Cont = (_options$headers = options.headers) === null || _options$headers === void 0 ? void 0 : _options$headers['Content-Security-Policy']) !== null && _options$headers$Cont !== void 0 ? _options$headers$Cont : '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ? // Ensure there is a trailing slash
+  "".concat(trimTrailingSlash(options.env.cdnUrl), "/") : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), sanitizeAppEnvironment(options.env)).replace(new RegExp('__GTM_SCRIPT__', 'g'), getGtmTrackingScript(options.env.trackingGtm)).replace(new RegExp('__DATALAYER_JS__', 'g'), "<script>".concat(htmlScripts.dataLayer, "</script>")).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), "<script>".concat(htmlScripts.loadingScreen, "</script>")).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), "<style>".concat(htmlStyles.loadingScreen, "</style>"));
+};
+
+function compileHtml(_x) {
+  return _compileHtml.apply(this, arguments);
+}
+
+function _compileHtml() {
+  _compileHtml = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(indexHtmlTemplatePath) {
+    var applicationConfig$1, compiledHeaders, indexHtmlTemplateContent, indexHtmlContent;
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            applicationConfig$1 = applicationConfig.processConfig();
+            compiledHeaders = processHeaders(applicationConfig$1);
+            indexHtmlTemplateContent = fs__default["default"].readFileSync(indexHtmlTemplatePath, 'utf8');
+            indexHtmlContent = replaceHtmlPlaceholders(indexHtmlTemplateContent, {
+              env: applicationConfig$1.env,
+              headers: compiledHeaders
+            });
+            return _context.abrupt("return", {
+              env: applicationConfig$1.env,
+              headers: compiledHeaders,
+              indexHtmlContent: indexHtmlContent
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _compileHtml.apply(this, arguments);
+}
+
+exports.generateTemplate = generateTemplate.generateTemplate;
+exports.compileHtml = compileHtml;
+exports.processHeaders = processHeaders;
+exports.replaceHtmlPlaceholders = replaceHtmlPlaceholders;

package/dist/commercetools-frontend-mc-html-template.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-frontend-mc-html-template.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-frontend-mc-html-template.cjs.dev.js");
+}

package/dist/commercetools-frontend-mc-html-template.cjs.prod.js

@@ -0,0 +1,255 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var fs = require('fs');
+var applicationConfig = require('@commercetools-frontend/application-config');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _Object$assign = require('@babel/runtime-corejs3/core-js-stable/object/assign');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var constants = require('@commercetools-frontend/constants');
+var crypto = require('crypto');
+var serialize = require('serialize-javascript');
+var generateTemplate = require('./generate-template-600664a1.cjs.prod.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _Object$assign__default = /*#__PURE__*/_interopDefault(_Object$assign);
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var crypto__default = /*#__PURE__*/_interopDefault(crypto);
+var serialize__default = /*#__PURE__*/_interopDefault(serialize);
+
+function createAssetHash(content) {
+  var sha256Hash = crypto__default["default"].createHash('sha256').update(content).digest('base64');
+  /**
+   * NOTE:
+   *   We prefix the hash function type as the browser
+   *   needs it when validating the contents of a script against
+   *   CSP headers sent.
+   *   For more information head to: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Sources
+   */
+
+  return "sha256-".concat(sha256Hash);
+}
+
+var sanitizeAppEnvironment = function sanitizeAppEnvironment(env) {
+  return serialize__default["default"](env, {
+    isJSON: true
+  });
+};
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+var htmlScripts$1 = {
+  "dataLayer": "window.dataLayer=[{\"gtm.start\":(new Date).getTime(),event:\"gtm.js\"}];",
+  "loadingScreen": "window.onAppLoaded=function(){const e=document.querySelector(\"#app-loader\");e&&e.parentNode.removeChild(e)},setTimeout(function(){const e=document.querySelector(\".loading-screen\");e&&e.classList.remove(\"loading-screen--hidden\")},250),setTimeout(function(){const e=document.querySelector(\".long-loading-notice\");e&&e.classList.remove(\"long-loading-notice--hidden\")},2e3);",
+  "publicPath": "window.__dynamicImportHandler__=function(n){return window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n.replace(/^(\\.\\/)?/,\"\")},window.__dynamicImportPreload__=function(n){return n.map(n=>window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n)};"
+};
+
+var toArray = function toArray(value) {
+  return _Array$isArray__default["default"](value) ? value : [value];
+};
+
+var mergeCspDirectives = function mergeCspDirectives() {
+  for (var _len = arguments.length, directives = new Array(_len), _key = 0; _key < _len; _key++) {
+    directives[_key] = arguments[_key];
+  }
+
+  return _reduceInstanceProperty__default["default"](directives).call(directives, function (mergedCsp, csp) {
+    var _context;
+
+    return _Object$assign__default["default"](mergedCsp, _reduceInstanceProperty__default["default"](_context = _Object$keys__default["default"](csp)).call(_context, function (acc, directiveKey) {
+      var _context2;
+
+      return _Object$assign__default["default"](acc, _defineProperty({}, directiveKey, _concatInstanceProperty__default["default"](_context2 = []).call(_context2, _toConsumableArray(toArray(mergedCsp[directiveKey] ? mergedCsp[directiveKey] : [])), _toConsumableArray(toArray(csp[directiveKey])))));
+    }, {}));
+  }, {});
+};
+
+var toHeaderString = function toHeaderString() {
+  var _context3;
+
+  var directives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _mapInstanceProperty__default["default"](_context3 = _Object$entries__default["default"](directives)).call(_context3, function (_ref) {
+    var _context4;
+
+    var _ref2 = _slicedToArray(_ref, 2),
+        directive = _ref2[0],
+        value = _ref2[1];
+
+    return _concatInstanceProperty__default["default"](_context4 = "".concat(directive, " ")).call(_context4, _Array$isArray__default["default"](value) ? value.join(' ') : value);
+  }).join('; ');
+};
+
+var toStructuredHeaderString = function toStructuredHeaderString() {
+  var _context5;
+
+  var directives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _mapInstanceProperty__default["default"](_context5 = _Object$entries__default["default"](directives)).call(_context5, function (_ref3) {
+    var _context6;
+
+    var _ref4 = _slicedToArray(_ref3, 2),
+        directive = _ref4[0],
+        value = _ref4[1];
+
+    return _concatInstanceProperty__default["default"](_context6 = "".concat(directive, "=")).call(_context6, _Array$isArray__default["default"](value) ? value.join(' ') : value);
+  }).join(', ');
+};
+
+var processHeaders = function processHeaders(applicationConfig) {
+  var _context7, _context8, _context9, _applicationConfig$he, _applicationConfig$he2, _applicationConfig$he3, _context10, _applicationConfig$he4, _applicationConfig$he5;
+
+  var isMcDevEnv = applicationConfig.env.env === 'development'; // List hashes for injected inline scripts.
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+
+  var htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash("window.app = ".concat(sanitizeAppEnvironment(applicationConfig.env), ";")), createAssetHash(htmlScripts$1.publicPath), createAssetHash(htmlScripts$1.dataLayer)]; // // List hashes for injected inline styles.
+  // // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+  // const htmlStylesHashes = [createAssetHash(htmlStyles.loadingScreen)];
+
+  /**
+   * Content Security Policy (CSP)
+   * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+   */
+
+  var cspDirectives = _Object$assign__default["default"]({
+    'default-src': "'none'",
+    'script-src': _concatInstanceProperty__default["default"](_context7 = ["'self'", 'www.googletagmanager.com/gtm.js', 'www.google-analytics.com/analytics.js']).call(_context7, isMcDevEnv ? // Allow webpack to load source maps on runtime when errors occur
+    // using script tags
+    ['localhost:*', "'unsafe-inline'"] : _mapInstanceProperty__default["default"](htmlScriptsHashes).call(htmlScriptsHashes, function (assetHash) {
+      return "'".concat(assetHash, "'");
+    })),
+    'connect-src': _concatInstanceProperty__default["default"](_context8 = ["'self'", 'app.launchdarkly.com', 'clientstream.launchdarkly.com', 'events.launchdarkly.com', 'app.getsentry.com', // Match all attempts to load from any subdomain of `sentry.io`
+    '*.sentry.io', 'www.google-analytics.com']).call(_context8, isMcDevEnv ? ['ws:', 'localhost:8080', 'webpack-internal:'] : []),
+    'img-src': ['*', 'data:'],
+    'style-src': _concatInstanceProperty__default["default"](_context9 = ["'self'", 'fonts.googleapis.com', 'data:']).call(_context9, // TODO: investigate what needs to be done to avoid unsafe-inline styles
+    // https://github.com/commercetools/merchant-center-frontend/pull/5223#discussion_r210367636
+    ["'unsafe-inline'"] // TODO: enable this once we can avoid unsafe-inline
+    // htmlStylesHashes.map(assetHash => `'${assetHash}'`)
+    ),
+    'font-src': ["'self'", 'fonts.gstatic.com', 'data:']
+  }, isMcDevEnv ? {
+    // NOTE: use this instead of `upgrade-insecure-requests` for local
+    // development to avoid `http://localhost` requests to be redirected
+    // to https.
+    'block-all-mixed-content': ''
+  } : {
+    // NOTE: prefer this over `block-all-mixed-content`.
+    // https://youtu.be/j-0Bj40juMI?t=11m47s
+    'upgrade-insecure-requests': ''
+  } // NOTE: we might want to define further policies in the future, for example
+  // - `require-sri-for style script` (at the moment not possible because
+  //   GTM and Intercom scripts are apparently not meant for this)
+  ); // Recursively merge the directives
+
+
+  var mergedCsp = mergeCspDirectives(cspDirectives, (_applicationConfig$he = (_applicationConfig$he2 = applicationConfig.headers) === null || _applicationConfig$he2 === void 0 ? void 0 : _applicationConfig$he2.csp) !== null && _applicationConfig$he !== void 0 ? _applicationConfig$he : {});
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, constants.HTTP_SECURITY_HEADERS), {}, {
+    // The `Content-Security-Policy` header is always generated
+    // based on the Custom Application config.
+    'Content-Security-Policy': toHeaderString(mergedCsp)
+  }, ((_applicationConfig$he3 = applicationConfig.headers) === null || _applicationConfig$he3 === void 0 ? void 0 : _applicationConfig$he3.strictTransportSecurity) && {
+    'Strict-Transport-Security': _concatInstanceProperty__default["default"](_context10 = [constants.HTTP_SECURITY_HEADERS['Strict-Transport-Security']]).call(_context10, _toConsumableArray(applicationConfig.headers.strictTransportSecurity)).join('; ')
+  }), ((_applicationConfig$he4 = applicationConfig.headers) === null || _applicationConfig$he4 === void 0 ? void 0 : _applicationConfig$he4.featurePolicies) && {
+    'Feature-Policy': toHeaderString(applicationConfig.headers.featurePolicies)
+  }), ((_applicationConfig$he5 = applicationConfig.headers) === null || _applicationConfig$he5 === void 0 ? void 0 : _applicationConfig$he5.permissionsPolicies) && {
+    'Permissions-Policy': toStructuredHeaderString(applicationConfig.headers.permissionsPolicies)
+  });
+};
+
+var htmlScripts = {
+  "dataLayer": "window.dataLayer=[{\"gtm.start\":(new Date).getTime(),event:\"gtm.js\"}];",
+  "loadingScreen": "window.onAppLoaded=function(){const e=document.querySelector(\"#app-loader\");e&&e.parentNode.removeChild(e)},setTimeout(function(){const e=document.querySelector(\".loading-screen\");e&&e.classList.remove(\"loading-screen--hidden\")},250),setTimeout(function(){const e=document.querySelector(\".long-loading-notice\");e&&e.classList.remove(\"long-loading-notice--hidden\")},2e3);",
+  "publicPath": "window.__dynamicImportHandler__=function(n){return window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n.replace(/^(\\.\\/)?/,\"\")},window.__dynamicImportPreload__=function(n){return n.map(n=>window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n)};"
+}; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+
+var htmlStyles = {
+  "loadingScreen": ".loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}.loading-screen--hidden{display:none}.loading-screen>*+*{margin:24px 0 0}.loading-spinner{width:32px;height:32px}.long-loading-notice{color:#999;font-family:'Open Sans',sans-serif;font-size:12px}.long-loading-notice--hidden{visibility:hidden}.loading-spinner-circle{fill:#213c45;opacity:.2}@keyframes loading-spinner-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading-spinner-pointer{transform-origin:20px 20px 0;animation:loading-spinner-animation .5s infinite linear}"
+};
+
+var trimTrailingSlash = function trimTrailingSlash(value) {
+  return value.replace(/\/$/, '');
+};
+
+var getGtmTrackingScript = function getGtmTrackingScript(gtmId) {
+  if (!gtmId) return '';
+  var url = "https://www.googletagmanager.com/gtm.js?id=".concat(gtmId);
+  return "\n<script async type=\"text/javascript\" src=\"".concat(url, "\" referrerpolicy=\"no-referrer\"></script>\n  ");
+};
+
+var replaceHtmlPlaceholders = function replaceHtmlPlaceholders(indexHtmlContent, options) {
+  var _options$headers$Cont, _options$headers;
+
+  return indexHtmlContent.replace(new RegExp('__CSP__', 'g'), (_options$headers$Cont = (_options$headers = options.headers) === null || _options$headers === void 0 ? void 0 : _options$headers['Content-Security-Policy']) !== null && _options$headers$Cont !== void 0 ? _options$headers$Cont : '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ? // Ensure there is a trailing slash
+  "".concat(trimTrailingSlash(options.env.cdnUrl), "/") : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), sanitizeAppEnvironment(options.env)).replace(new RegExp('__GTM_SCRIPT__', 'g'), getGtmTrackingScript(options.env.trackingGtm)).replace(new RegExp('__DATALAYER_JS__', 'g'), "<script>".concat(htmlScripts.dataLayer, "</script>")).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), "<script>".concat(htmlScripts.loadingScreen, "</script>")).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), "<style>".concat(htmlStyles.loadingScreen, "</style>"));
+};
+
+function compileHtml(_x) {
+  return _compileHtml.apply(this, arguments);
+}
+
+function _compileHtml() {
+  _compileHtml = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(indexHtmlTemplatePath) {
+    var applicationConfig$1, compiledHeaders, indexHtmlTemplateContent, indexHtmlContent;
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            applicationConfig$1 = applicationConfig.processConfig();
+            compiledHeaders = processHeaders(applicationConfig$1);
+            indexHtmlTemplateContent = fs__default["default"].readFileSync(indexHtmlTemplatePath, 'utf8');
+            indexHtmlContent = replaceHtmlPlaceholders(indexHtmlTemplateContent, {
+              env: applicationConfig$1.env,
+              headers: compiledHeaders
+            });
+            return _context.abrupt("return", {
+              env: applicationConfig$1.env,
+              headers: compiledHeaders,
+              indexHtmlContent: indexHtmlContent
+            });
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _compileHtml.apply(this, arguments);
+}
+
+exports.generateTemplate = generateTemplate.generateTemplate;
+exports.compileHtml = compileHtml;
+exports.processHeaders = processHeaders;
+exports.replaceHtmlPlaceholders = replaceHtmlPlaceholders;