@commercetools-frontend/mc-html-template 27.12.0 → 27.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-frontend-mc-html-template.cjs.dev.js +23 -9
  2. package/dist/commercetools-frontend-mc-html-template.cjs.prod.js +23 -9
  3. package/dist/commercetools-frontend-mc-html-template.esm.js +22 -8
  4. package/package.json +3 -3
package/dist/commercetools-frontend-mc-html-template.cjs.dev.js CHANGED
@@ -22,8 +22,8 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
22
22
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
23
23
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
24
24
  var constants = require('@commercetools-frontend/constants');
25
- var crypto = require('crypto');
26
25
  var serialize = require('serialize-javascript');
26
+ var crypto = require('crypto');
27
27
  var generateTemplate = require('./generate-template-b3aafc6f.cjs.dev.js');
28
28
 
29
29
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -44,8 +44,26 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
44
44
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
45
45
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
46
46
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
47
- var crypto__default = /*#__PURE__*/_interopDefault(crypto);
48
47
  var serialize__default = /*#__PURE__*/_interopDefault(serialize);
48
+ var crypto__default = /*#__PURE__*/_interopDefault(crypto);
49
+
50
+ const sanitizeAppEnvironment = env => serialize__default["default"](env, {
51
+ isJSON: true
52
+ });
53
+
54
+ /**
55
+ * Composes the body of the inline script that publishes the application
56
+ * environment to the client.
57
+ *
58
+ * This exists so `process-headers` and `replace-html-placeholders` cannot
59
+ * disagree. The script is allowed by a SHA-256 hash in `script-src`, and that
60
+ * hash is computed over the very bytes this returns. Composing the body at each
61
+ * call site instead means any edit has to land in both, and a miss silently
62
+ * CSP-blocks the only script that defines `window.app`.
63
+ */
64
+ const createApplicationEnvironmentScript = env => {
65
+ return `window.app = ${sanitizeAppEnvironment(env)};`;
66
+ };
49
67
 
50
68
  function createAssetHash(content) {
51
69
  const sha256Hash = crypto__default["default"].createHash('sha256').update(content).digest('base64');
@@ -60,10 +78,6 @@ function createAssetHash(content) {
60
78
  return `sha256-${sha256Hash}`;
61
79
  }
62
80
 
63
- const sanitizeAppEnvironment = env => serialize__default["default"](env, {
64
- isJSON: true
65
- });
66
-
67
81
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
82
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
83
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
@@ -114,7 +128,7 @@ const processHeaders = applicationConfig => {
114
128
 
115
129
  // List hashes for injected inline scripts.
116
130
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
117
- const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(`window.app = ${sanitizeAppEnvironment(applicationConfig.env)};`), createAssetHash(htmlScripts$1.publicPath)];
131
+ const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(createApplicationEnvironmentScript(applicationConfig.env)), createAssetHash(htmlScripts$1.publicPath)];
118
132
 
119
133
  // // List hashes for injected inline styles.
120
134
  // // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
@@ -173,12 +187,12 @@ const htmlScripts = {
173
187
  "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)};"
174
188
  }; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
175
189
  const htmlStyles = {
176
- "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:120px;height:18px;border-radius:4px;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
190
+ "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
177
191
  };
178
192
  const trimTrailingSlash = value => value.replace(/\/$/, '');
179
193
  const replaceHtmlPlaceholders = (indexHtmlContent, options) => indexHtmlContent.replace(new RegExp('__CSP__', 'g'), options.headers?.['Content-Security-Policy'] ?? '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ?
180
194
  // Ensure there is a trailing slash
181
- `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>window.app = ${sanitizeAppEnvironment(options.env)};</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
195
+ `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>${createApplicationEnvironmentScript(options.env)}</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
182
196
 
183
197
  async function compileHtml(indexHtmlTemplatePath) {
184
198
  const applicationConfig$1 = await applicationConfig.processConfig();
package/dist/commercetools-frontend-mc-html-template.cjs.prod.js CHANGED
@@ -22,8 +22,8 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
22
22
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
23
23
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
24
24
  var constants = require('@commercetools-frontend/constants');
25
- var crypto = require('crypto');
26
25
  var serialize = require('serialize-javascript');
26
+ var crypto = require('crypto');
27
27
  var generateTemplate = require('./generate-template-6b1ad7e7.cjs.prod.js');
28
28
 
29
29
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -44,8 +44,26 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
44
44
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
45
45
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
46
46
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
47
- var crypto__default = /*#__PURE__*/_interopDefault(crypto);
48
47
  var serialize__default = /*#__PURE__*/_interopDefault(serialize);
48
+ var crypto__default = /*#__PURE__*/_interopDefault(crypto);
49
+
50
+ const sanitizeAppEnvironment = env => serialize__default["default"](env, {
51
+ isJSON: true
52
+ });
53
+
54
+ /**
55
+ * Composes the body of the inline script that publishes the application
56
+ * environment to the client.
57
+ *
58
+ * This exists so `process-headers` and `replace-html-placeholders` cannot
59
+ * disagree. The script is allowed by a SHA-256 hash in `script-src`, and that
60
+ * hash is computed over the very bytes this returns. Composing the body at each
61
+ * call site instead means any edit has to land in both, and a miss silently
62
+ * CSP-blocks the only script that defines `window.app`.
63
+ */
64
+ const createApplicationEnvironmentScript = env => {
65
+ return `window.app = ${sanitizeAppEnvironment(env)};`;
66
+ };
49
67
 
50
68
  function createAssetHash(content) {
51
69
  const sha256Hash = crypto__default["default"].createHash('sha256').update(content).digest('base64');
@@ -60,10 +78,6 @@ function createAssetHash(content) {
60
78
  return `sha256-${sha256Hash}`;
61
79
  }
62
80
 
63
- const sanitizeAppEnvironment = env => serialize__default["default"](env, {
64
- isJSON: true
65
- });
66
-
67
81
  function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
68
82
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
69
83
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
@@ -114,7 +128,7 @@ const processHeaders = applicationConfig => {
114
128
 
115
129
  // List hashes for injected inline scripts.
116
130
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
117
- const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(`window.app = ${sanitizeAppEnvironment(applicationConfig.env)};`), createAssetHash(htmlScripts$1.publicPath)];
131
+ const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(createApplicationEnvironmentScript(applicationConfig.env)), createAssetHash(htmlScripts$1.publicPath)];
118
132
 
119
133
  // // List hashes for injected inline styles.
120
134
  // // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
@@ -173,12 +187,12 @@ const htmlScripts = {
173
187
  "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)};"
174
188
  }; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
175
189
  const htmlStyles = {
176
- "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:120px;height:18px;border-radius:4px;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
190
+ "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
177
191
  };
178
192
  const trimTrailingSlash = value => value.replace(/\/$/, '');
179
193
  const replaceHtmlPlaceholders = (indexHtmlContent, options) => indexHtmlContent.replace(new RegExp('__CSP__', 'g'), options.headers?.['Content-Security-Policy'] ?? '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ?
180
194
  // Ensure there is a trailing slash
181
- `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>window.app = ${sanitizeAppEnvironment(options.env)};</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
195
+ `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>${createApplicationEnvironmentScript(options.env)}</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
182
196
 
183
197
  async function compileHtml(indexHtmlTemplatePath) {
184
198
  const applicationConfig$1 = await applicationConfig.processConfig();
package/dist/commercetools-frontend-mc-html-template.esm.js CHANGED
@@ -18,10 +18,28 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
18
18
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
19
19
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
20
20
  import { HTTP_SECURITY_HEADER_KEYS, HTTP_SECURITY_HEADERS } from '@commercetools-frontend/constants';
21
- import crypto from 'crypto';
22
21
  import serialize from 'serialize-javascript';
22
+ import crypto from 'crypto';
23
23
  export { g as generateTemplate } from './generate-template-396e70e6.esm.js';
24
24
 
25
+ const sanitizeAppEnvironment = env => serialize(env, {
26
+ isJSON: true
27
+ });
28
+
29
+ /**
30
+ * Composes the body of the inline script that publishes the application
31
+ * environment to the client.
32
+ *
33
+ * This exists so `process-headers` and `replace-html-placeholders` cannot
34
+ * disagree. The script is allowed by a SHA-256 hash in `script-src`, and that
35
+ * hash is computed over the very bytes this returns. Composing the body at each
36
+ * call site instead means any edit has to land in both, and a miss silently
37
+ * CSP-blocks the only script that defines `window.app`.
38
+ */
39
+ const createApplicationEnvironmentScript = env => {
40
+ return `window.app = ${sanitizeAppEnvironment(env)};`;
41
+ };
42
+
25
43
  function createAssetHash(content) {
26
44
  const sha256Hash = crypto.createHash('sha256').update(content).digest('base64');
27
45
 
@@ -35,10 +53,6 @@ function createAssetHash(content) {
35
53
  return `sha256-${sha256Hash}`;
36
54
  }
37
55
 
38
- const sanitizeAppEnvironment = env => serialize(env, {
39
- isJSON: true
40
- });
41
-
42
56
  function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
43
57
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
44
58
  // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
@@ -89,7 +103,7 @@ const processHeaders = applicationConfig => {
89
103
 
90
104
  // List hashes for injected inline scripts.
91
105
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
92
- const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(`window.app = ${sanitizeAppEnvironment(applicationConfig.env)};`), createAssetHash(htmlScripts$1.publicPath)];
106
+ const htmlScriptsHashes = [createAssetHash(htmlScripts$1.loadingScreen), createAssetHash(createApplicationEnvironmentScript(applicationConfig.env)), createAssetHash(htmlScripts$1.publicPath)];
93
107
 
94
108
  // // List hashes for injected inline styles.
95
109
  // // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
@@ -148,12 +162,12 @@ const htmlScripts = {
148
162
  "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)};"
149
163
  }; // https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
150
164
  const htmlStyles = {
151
- "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:120px;height:18px;border-radius:4px;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
165
+ "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}html,body{margin:0;padding:0}.loading-skeleton{display:grid;grid-template-rows:auto 56px 1fr;grid-template-columns:min-content 1fr;height:100vh;width:100vw}.loading-skeleton--hidden{display:none}.loading-skeleton__sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;white-space:nowrap}.loading-skeleton__sidebar{display:flex;flex-direction:column;grid-row:2 / 4;grid-column:1 / 2;width:80px;background:hsl(240,66%,19%)}.loading-skeleton--menu-expanded .loading-skeleton__sidebar{width:256px}.loading-skeleton--no-navbar .loading-skeleton__sidebar{display:none}.loading-skeleton__navbar-header{display:flex;justify-content:center;align-items:center;padding:16px;height:56px}.loading-skeleton__navbar-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:24px;padding:16px}.loading-skeleton__navbar-footer{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px 0}.loading-skeleton--menu-expanded .loading-skeleton__navbar-footer{padding:16px 58px}.loading-skeleton__navbar-footer::before{content:'';position:absolute;top:0;width:calc(100% - 2 * 16px);height:1px;background:rgba(255,255,255,0.5)}.loading-skeleton__group{width:100%}.loading-skeleton__item{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;height:48px}.loading-skeleton--menu-expanded .loading-skeleton__item--narrow{padding:12px 28px}.loading-skeleton__icon{width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__title{display:none;flex:1;height:18px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton--menu-expanded .loading-skeleton__title{display:block}.loading-skeleton__expander{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,0.2)}.loading-skeleton__header{display:flex;justify-content:flex-end;align-items:center;grid-row:2 / 3;grid-column:2 / 3;padding:0 40px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.15)}.loading-skeleton__header-placeholder{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.08)}.loading-skeleton__content{display:flex;justify-content:center;align-items:center;grid-row:3 / 4;grid-column:2 / 3}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}}"
152
166
  };
153
167
  const trimTrailingSlash = value => value.replace(/\/$/, '');
154
168
  const replaceHtmlPlaceholders = (indexHtmlContent, options) => indexHtmlContent.replace(new RegExp('__CSP__', 'g'), options.headers?.['Content-Security-Policy'] ?? '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ?
155
169
  // Ensure there is a trailing slash
156
- `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>window.app = ${sanitizeAppEnvironment(options.env)};</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
170
+ `${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), `<script>${createApplicationEnvironmentScript(options.env)}</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
157
171
 
158
172
  async function compileHtml(indexHtmlTemplatePath) {
159
173
  const applicationConfig = await processConfig();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/mc-html-template",
3
- "version": "27.12.0",
3
+ "version": "27.14.0",
4
4
  "description": "Everything related to render the index.html for a MC application",
5
5
  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
6
6
  "repository": {
@@ -41,8 +41,8 @@
41
41
  "serialize-javascript": "7.1.0",
42
42
  "uglify-js": "3.19.3",
43
43
  "uglifycss": "0.0.29",
44
- "@commercetools-frontend/application-config": "^27.12.0",
45
- "@commercetools-frontend/constants": "^27.12.0"
44
+ "@commercetools-frontend/application-config": "^27.14.0",
45
+ "@commercetools-frontend/constants": "^27.14.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@tsconfig/node24": "^24.0.0",