fix: 🐛 security improvements

The servers listen only on specific IP. The create template is updated
for whitelisting CORS request by origin. The possibilites XSS
vulnerability is fixed for playground page and in plugin custom element.

docs/docs/merkur-cli.md

@@ -70,6 +70,9 @@ export default function ({ cliConfig, emitter,  }) {
       origin: 'http://localhost:4444'
     },
     HMR: true,
+    constant: {
+      HOST: 'localhost',
+    }
     onCliConfig, Function, //extending hook for cli config,
     onMerkurConfig: Function, // extending hook for merkur config,
     onTaskConfig: Function, // extending hook for task config,

packages/cli/src/devServer.mjs

@@ -9,6 +9,10 @@ import express from 'express';
 import { createLogger } from './logger.mjs';
 import { COMMAND_NAME } from './commands/constant.mjs';
 
+function escapeToJSON(object) {
+  return JSON.stringify(object).replace(/<\/script/gi, '<\\/script');
+}
+
 function asyncMiddleware(fn) {
   return (req, res, next) => {
     Promise.resolve(fn(req, res, next)).catch(next);
@@ -135,6 +139,7 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
               merkurConfig,
               devClient,
               html,
+              escapeToJSON,
             }),
           );
         }),
@@ -167,7 +172,7 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
           },
         });
       })
-      .listen(port, () => {
+      .listen({ port, host: merkurConfig.constant.HOST }, () => {
         logger.info(`Playground: ${chalk.green(`${protocol}//${host}`)}`);
         resolve(app);
       });

packages/cli/src/merkurConfig.mjs

@@ -253,8 +253,20 @@ emitter.on(
     return merkurConfig;
   },
 );
-emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function devServer({ merkurConfig }) {
-  merkurConfig.HMR = merkurConfig?.HMR ?? true;
+
+emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function hmr({ merkurConfig }) {
+  merkurConfig.HMR = merkurConfig.HMR ?? true;
+
+  return merkurConfig;
+});
+
+emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function constant({ merkurConfig }) {
+  merkurConfig.constant = {
+    ...{
+      HOST: 'localhost',
+    },
+    ...merkurConfig.constant,
+  };
 
   return merkurConfig;
 });

packages/cli/src/templates/body.ejs

@@ -5,7 +5,7 @@
 <div class="merkur-view"><%- html %></div>
 <script>
   window.addEventListener('load', function () {
-    __merkur__.create(<%- JSON.stringify(widgetProperties) %>)
+    __merkur__.create(<%- escapeToJSON(widgetProperties) %>)
       .then(function (widget) {
         widget.containerSelector = '.merkur-view';
         if (widget?.slot?.headline) {

packages/cli/src/templates/head.ejs

@@ -1,8 +1,8 @@
 <script>
   window.__merkur_dev__ = window.__merkur_dev__ || {};
-  window.__merkur_dev__.merkurConfig = <%- JSON.stringify(merkurConfig) %>;
-   window.__merkur_dev__.assets = <%- JSON.stringify(assets) %>;
-  window.__merkur_dev__.widgetProperties = <%- JSON.stringify(widgetProperties) %>;
+  window.__merkur_dev__.merkurConfig = <%- escapeToJSON(merkurConfig) %>;
+   window.__merkur_dev__.assets = <%- escapeToJSON(assets) %>;
+  window.__merkur_dev__.widgetProperties = <%- escapeToJSON(widgetProperties) %>;
   <%- devClient %>
 </script>
 <% assets.forEach((asset)=> { %>

packages/cli/src/websocket.mjs

@@ -16,6 +16,7 @@ export async function runSocketServer({ merkurConfig, context }) {
   try {
     const server = new WebSocketServer({
       port: merkurConfig.socketServer.port,
+      host: merkurConfig.constant.HOST,
     });
 
     server.on('connection', function connection(ws) {

packages/cli/types.d.ts

@@ -68,8 +68,13 @@ export interface WidgetServer {
   clusters: number;
 }
 
+export interface Constant {
+  HOST: string;
+}
+
 export interface MerkurConfig {
   HMR: boolean;
+  constant: Constant;
   cliConfig: CLIConfig;
   extends: Extend[];
   task: {

packages/create-widget/template/server/app.js

@@ -7,7 +7,9 @@ const morgan = require('morgan');
 
 const { resolveConfig } = require('@merkur/cli/server');
 
-const { merkurConfig } = resolveConfig();
+const {
+  merkurConfig: { widgetServer, devServer },
+} = resolveConfig();
 
 const {
   apiErrorMiddleware,
@@ -38,18 +40,17 @@ app
       crossOriginEmbedderPolicy: false,
     }),
   )
-  .use(cors())
-  .use(compression())
   .use(
-    merkurConfig.widgetServer.staticPath,
-    express.static(merkurConfig.widgetServer.staticFolder),
+    cors({
+      origin: devServer.origin,
+      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
+    }),
   )
+  .use(compression())
+  .use(widgetServer.staticPath, express.static(widgetServer.staticFolder))
   .use(
-    merkurConfig.widgetServer.staticPath,
-    expressStaticGzip(
-      merkurConfig.widgetServer.staticFolder,
-      expressStaticConfig,
-    ),
+    widgetServer.staticPath,
+    expressStaticGzip(widgetServer.staticFolder, expressStaticConfig),
   )
   .use(widgetAPI.router)
   .use(error.router)

packages/create-widget/template/server/server.js

@@ -6,7 +6,7 @@ const { merkurConfig } = resolveConfig();
 
 const { app } = require('./app');
 
-const { widgetServer } = merkurConfig;
+const { widgetServer, constant } = merkurConfig;
 
 process.on('uncaughtException', (error) => {
   console.error(error);
@@ -17,7 +17,7 @@ process.on('unhandledRejection', (error) => {
 });
 
 if (!widgetServer.clusters || !cluster.isMaster) {
-  const server = app.listen(widgetServer.port);
+  const server = app.listen({ port: widgetServer.port, host: constant.HOST });
 
   const handleExit = () => {
     server.close(() => {

packages/integration-custom-element/cli/index.mjs

@@ -47,14 +47,15 @@ export function merkurCustomElementCssBundlePlugin({ cliConfig, config }) {
                 encoding: 'utf8',
                 flag: 'r',
               });
-              css = css.replace(/\n/g, ' ');
+              css = JSON.stringify(css.replace(/\n/g, ' '));
 
               let js = fs.readFileSync(`${projectFolder}/${key}`, {
                 encoding: 'utf8',
                 flag: 'r',
               });
-              js = js.replace('{__bundle__:""}', `\`${css}\``);
-              js = js.replace('{ __bundle__: "" };', `\`${css}\``);
+
+              js = js.replace('{__bundle__:""}', `${css}`);
+              js = js.replace('{ __bundle__: "" };', `${css}`);
 
               fs.writeFileSync(`${projectFolder}/${key}`, js);
             } catch (error) {