@commercetools-frontend/mc-html-template 20.10.3 → 20.12.0

package/README.md

@@ -20,7 +20,7 @@ This method will return the compiled HTML document with the CSS/JS scripts injec
 
 > NOTE that the HTML document will still have the **placeholders** (see `replaceHtmlPlaceholders`)
 
-#### `replaceHtmlPlaceholders(html: String, env: Object): String`
+#### `replaceHtmlPlaceholders(html: String, { env: Object, headers: Object, cliFlags: Object }): String`
 
 This method will replace the **placeholders** defined in the HTML document based on the application config.
 
@@ -35,6 +35,7 @@ At the moment we define the following placeholders:
 - `__APP_ENVIRONMENT__`: the sanitized application config environment, which will be available at the global variable `window.app`
 - `__DATALAYER_JS__`: the initial configuration for GTM, in case the `trackingGtm` is defined in the `additionalEnv` property of the application config
 - `__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`
 

package/build/compile-html.js

@@ -10,11 +10,15 @@ const processHeaders = require('./process-headers');
 
 const replaceHtmlPlaceholders = require('./utils/replace-html-placeholders');
 
-module.exports = async function compileHtml(indexHtmlTemplatePath) {
+module.exports = async function compileHtml(indexHtmlTemplatePath, cliFlags) {
   const applicationConfig = processConfig();
   const compiledHeaders = processHeaders(applicationConfig);
   const indexHtmlTemplateContent = fs.readFileSync(indexHtmlTemplatePath, 'utf8');
-  const indexHtmlContent = replaceHtmlPlaceholders(indexHtmlTemplateContent, applicationConfig.env);
+  const indexHtmlContent = replaceHtmlPlaceholders(indexHtmlTemplateContent, {
+    env: applicationConfig.env,
+    headers: compiledHeaders,
+    cliFlags
+  });
   return {
     env: applicationConfig.env,
     headers: compiledHeaders,

package/build/generate-template.js

@@ -17,6 +17,7 @@ module.exports = function generateTemplate({
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <meta name="referrer" content="no-referrer">
+    <meta http-equiv="Content-Security-Policy" content="__CSP__">
     <link rel="preconnect" href="__CDN_URL__">
     <link rel="preconnect" href="__MC_API_URL__">
     <!-- Fav and touch icons -->

package/build/process-headers.js

@@ -16,6 +16,10 @@ var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+const {
+  HTTP_SECURITY_HEADERS
+} = require('@commercetools-frontend/constants');
+
 const createAssetHash = require('./utils/create-asset-hash');
 
 const sanitizeAppEnvironment = require('./utils/sanitize-app-environment');
@@ -46,7 +50,7 @@ const toStructuredHeaderString = (directives = {}) => {
 };
 
 const processHeaders = applicationConfig => {
-  var _context4, _context5, _context6, _applicationConfig$he, _context7;
+  var _context4, _context5, _context6, _applicationConfig$he;
 
   const 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
@@ -89,16 +93,20 @@ const processHeaders = applicationConfig => {
   ); // Recursively merge the directives
 
   const mergedCsp = mergeCspDirectives(cspDirectives, (_applicationConfig$he = applicationConfig.headers.csp) !== null && _applicationConfig$he !== void 0 ? _applicationConfig$he : {});
-  return {
-    'Strict-Transport-Security': (0, _concat.default)(_context7 = ['max-age=31536000']).call(_context7, applicationConfig.headers.strictTransportSecurity || []).join('; '),
-    'X-XSS-Protection': '1; mode=block',
-    'X-Content-Type-Options': 'nosniff',
-    'X-Frame-Options': 'DENY',
-    'Referrer-Policy': 'same-origin',
+  return { // Default security headers.
+    ...HTTP_SECURITY_HEADERS,
+    // The `Content-Security-Policy` header is always generated
+    // based on the Custom Application config.
     'Content-Security-Policy': toHeaderString(mergedCsp),
+    // Allow to extend the `Strict-Transport-Security` header.
+    ...(applicationConfig.headers.strictTransportSecurity && {
+      'Strict-Transport-Security': [HTTP_SECURITY_HEADERS['Strict-Transport-Security'], ...applicationConfig.headers.strictTransportSecurity].join('; ')
+    }),
+    // Allow to extend the `Feature-Policy` header.
     ...(applicationConfig.headers.featurePolicies && {
       'Feature-Policy': toHeaderString(applicationConfig.headers.featurePolicies)
     }),
+    // Allow to extend the `Permissions-Policy` header.
     ...(applicationConfig.headers.permissionsPolicies && {
       'Permissions-Policy': toStructuredHeaderString(applicationConfig.headers.permissionsPolicies)
     })

package/build/utils/replace-html-placeholders.js

@@ -16,7 +16,7 @@ const getGtmTrackingScript = gtmId => {
   `;
 };
 
-const replaceHtmlPlaceholders = (indexHtmlContent, config) => indexHtmlContent.replace(new RegExp('__CDN_URL__', 'g'), config.cdnUrl ? // Ensure there is a trailing slash
-`${trimTrailingSlash(config.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(config.mcApiUrl)).replace(new RegExp('__APP_ENVIRONMENT__', 'g'), sanitizeAppEnvironment(config)).replace(new RegExp('__GTM_SCRIPT__', 'g'), getGtmTrackingScript(config.trackingGtm)).replace(new RegExp('__DATALAYER_JS__', 'g'), htmlScripts.dataLayer).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), htmlScripts.loadingScreen).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), htmlStyles.loadingScreen);
+const replaceHtmlPlaceholders = (indexHtmlContent, options) => indexHtmlContent.replace(new RegExp('__CSP__', 'g'), options.headers && options.cliFlags && options.cliFlags.inlineCsp ? options.headers['Content-Security-Policy'] : '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ? // Ensure there is a trailing slash
+`${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APP_ENVIRONMENT__', 'g'), sanitizeAppEnvironment(options.env)).replace(new RegExp('__GTM_SCRIPT__', 'g'), getGtmTrackingScript(options.env.trackingGtm)).replace(new RegExp('__DATALAYER_JS__', 'g'), htmlScripts.dataLayer).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), htmlScripts.loadingScreen).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), htmlStyles.loadingScreen);
 
 module.exports = replaceHtmlPlaceholders;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-html-template",
-  "version": "20.10.3",
+  "version": "20.12.0",
   "description": "Everything related to render the index.html for a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -11,7 +11,6 @@
   "homepage": "https://docs.commercetools.com/custom-applications",
   "keywords": ["javascript", "frontend", "react", "toolkit"],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
@@ -26,22 +25,23 @@
     "README.md"
   ],
   "scripts": {
-    "prebuild": "rimraf build/**",
-    "build": "babel src --out-dir build",
+    "build": "rimraf build && babel src --out-dir build",
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
     "@babel/runtime": "7.15.4",
     "@babel/runtime-corejs3": "7.15.4",
-    "@commercetools-frontend/application-config": "20.10.3",
-    "core-js": "3.18.2",
+    "@commercetools-frontend/application-config": "20.12.0",
+    "@commercetools-frontend/constants": "20.12.0",
+    "core-js": "3.19.0",
     "serialize-javascript": "6.0.0",
     "uglify-es": "3.3.9",
     "uglifycss": "0.0.29"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.15.8",
-    "@babel/preset-env": "7.15.8"
+    "@babel/preset-env": "7.15.8",
+    "rimraf": "3.0.2"
   },
   "engines": {
     "node": ">=12 || >=14"