From a4e21db31f33e39aa0d20b135f79899601ae9444 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Mon, 16 May 2022 16:44:25 +0200
Subject: [PATCH 1/2] deps: bump dependencies

- diagram-js@8.2.2
- min-dom@3.2.0
---
 package-lock.json | 23 ++++++++++++-----------
 package.json      |  4 ++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7633ecb8..e8da4e69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3333,16 +3333,16 @@
       "dev": true
     },
     "diagram-js": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.2.0.tgz",
-      "integrity": "sha512-nbT6GSEbbKEVP8C4K8Olctsb5kgoDA/K+xuDZ3pnkkkmJwNW0hEyrVQGtwyYVldyUCoGFR7DI8NBJxNhleRgtg==",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.2.2.tgz",
+      "integrity": "sha512-oWNMCifIStXn89+G4l+ydfWy3p3dtAvvoO1vVieiCUPjUXwi/s1LEcgw6F6dYCUpwKvZJq4Da0i3dJKNJ8I9yg==",
       "requires": {
         "css.escape": "^1.5.1",
         "didi": "^5.2.1",
         "hammerjs": "^2.0.1",
         "inherits": "^2.0.4",
         "min-dash": "^3.5.2",
-        "min-dom": "^3.1.3",
+        "min-dom": "^3.2.0",
         "object-refs": "^0.3.0",
         "path-intersection": "^2.2.1",
         "tiny-svg": "^2.2.2"
@@ -3432,9 +3432,9 @@
       "dev": true
     },
     "domify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.0.tgz",
-      "integrity": "sha1-EUg2F/dk+GlZdbS9x5sU8IA7Yps="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.1.tgz",
+      "integrity": "sha512-x18nuiDHMCZGXr4KJSRMf/TWYtiaRo6RX8KN9fEbW54mvbQ6pieUuerC2ahBg+kEp1wycFj8MPUI0WkIOw5E9w=="
     },
     "duplexer": {
       "version": "0.1.1",
@@ -7365,14 +7365,15 @@
       "integrity": "sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg=="
     },
     "min-dom": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-3.1.3.tgz",
-      "integrity": "sha512-Lbi1NZjLV9Hg6/bEe2Lfk2Fzsv1MwheR61whqTLP+FxLndYo9TxpksEgM5Kr1khjfCtFTMr0waeEfwIpStkRdw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-3.2.0.tgz",
+      "integrity": "sha512-IUNBVNMFR0fND5RM2rBPqTG/qch8SOWtxpNgc2L+yHqp8raz3tEoe9SfXObHuidyLSMrbF7gSnBPrFGaUHBnHg==",
       "requires": {
         "component-event": "^0.1.4",
         "domify": "^1.3.1",
         "indexof": "0.0.1",
-        "matches-selector": "^1.2.0"
+        "matches-selector": "^1.2.0",
+        "min-dash": "^3.8.1"
       }
     },
     "minimalistic-assert": {
diff --git a/package.json b/package.json
index 19dfe9ec..5d2dfe92 100644
--- a/package.json
+++ b/package.json
@@ -100,12 +100,12 @@
   "dependencies": {
     "bpmn-moddle": "^7.1.2",
     "css.escape": "^1.5.1",
-    "diagram-js": "^8.2.0",
+    "diagram-js": "^8.2.2",
     "diagram-js-direct-editing": "^1.6.3",
     "ids": "^1.0.0",
     "inherits": "^2.0.4",
     "min-dash": "^3.5.2",
-    "min-dom": "^3.1.3",
+    "min-dom": "^3.2.0",
     "object-refs": "^0.3.0",
     "tiny-svg": "^2.2.2"
   }

From 1c89624a4238234eba3d75a413d3acf82212c1f8 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Mon, 16 May 2022 16:52:52 +0200
Subject: [PATCH 2/2] fix: comply with style-src CSP

---
 lib/BaseViewer.js         | 16 +++++--
 lib/util/PoweredByUtil.js | 95 ++++++++++++++++++++++-----------------
 2 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/lib/BaseViewer.js b/lib/BaseViewer.js
index d727c31e..d5608472 100644
--- a/lib/BaseViewer.js
+++ b/lib/BaseViewer.js
@@ -13,6 +13,7 @@ import {
 
 import {
   domify,
+  assignStyle,
   query as domQuery,
   remove as domRemove
 } from 'min-dom';
@@ -655,7 +656,7 @@ BaseViewer.prototype._createContainer = function(options) {
 
   var container = domify('<div class="bjs-container"></div>');
 
-  assign(container.style, {
+  assignStyle(container, {
     width: ensureUnit(options.width),
     height: ensureUnit(options.height),
     position: options.position
@@ -735,7 +736,8 @@ function findBPMNDiagram(definitions, diagramId) {
 import {
   open as openPoweredBy,
   BPMNIO_IMG,
-  LINK_STYLES as BPMNIO_LINK_STYLES
+  LOGO_STYLES,
+  LINK_STYLES
 } from './util/PoweredByUtil';
 
 import {
@@ -758,12 +760,20 @@ function addProjectLogo(container) {
        'target="_blank" ' +
        'class="bjs-powered-by" ' +
        'title="Powered by bpmn.io" ' +
-       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' +
+      '>' +
       img +
     '</a>';
 
   var linkElement = domify(linkMarkup);
 
+  assignStyle(domQuery('svg', linkElement), LOGO_STYLES);
+  assignStyle(linkElement, LINK_STYLES, {
+    position: 'absolute',
+    bottom: '15px',
+    right: '15px',
+    zIndex: '100'
+  });
+
   container.appendChild(linkElement);
 
   domEvent.bind(linkElement, 'click', function(event) {
diff --git a/lib/util/PoweredByUtil.js b/lib/util/PoweredByUtil.js
index f1d1994d..5a541a80 100644
--- a/lib/util/PoweredByUtil.js
+++ b/lib/util/PoweredByUtil.js
@@ -5,59 +5,61 @@
  */
 
 import {
+  assignStyle,
   domify,
-  delegate as domDelegate
+  delegate as domDelegate,
+  query as domQuery
 } from 'min-dom';
 
 
 // inlined ../../resources/logo.svg
-var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21" style="vertical-align:middle"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
+var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
 
 export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
 
-function css(attrs) {
-  return attrs.join(';');
-}
+export var LOGO_STYLES = {
+  verticalAlign: 'middle'
+};
 
-export var LINK_STYLES = css([
-  'color: #404040'
-]);
+export var LINK_STYLES = {
+  'color': '#404040'
+};
 
-var LIGHTBOX_STYLES = css([
-  'z-index: 1001',
-  'position: fixed',
-  'top: 0',
-  'left: 0',
-  'right: 0',
-  'bottom: 0'
-]);
+var LIGHTBOX_STYLES = {
+  'zIndex': '1001',
+  'position': 'fixed',
+  'top': '0',
+  'left': '0',
+  'right': '0',
+  'bottom': '0'
+};
 
-var BACKDROP_STYLES = css([
-  'width: 100%',
-  'height: 100%',
-  'background: rgba(40,40,40,0.2)'
-]);
+var BACKDROP_STYLES = {
+  'width': '100%',
+  'height': '100%',
+  'background': 'rgba(40,40,40,0.2)'
+};
 
-var NOTICE_STYLES = css([
-  'position: absolute',
-  'left: 50%',
-  'top: 40%',
-  'transform: translate(-50%)',
-  'width: 260px',
-  'padding: 10px',
-  'background: white',
-  'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
-  'font-family: Helvetica, Arial, sans-serif',
-  'font-size: 14px',
-  'display: flex',
-  'line-height: 1.3'
-]);
+var NOTICE_STYLES = {
+  'position': 'absolute',
+  'left': '50%',
+  'top': '40%',
+  'transform': 'translate(-50%)',
+  'width': '260px',
+  'padding': '10px',
+  'background': 'white',
+  'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
+  'fontFamily': 'Helvetica, Arial, sans-serif',
+  'fontSize': '14px',
+  'display': 'flex',
+  'lineHeight': '1.3'
+};
 
 var LIGHTBOX_MARKUP =
-  '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
-    '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
-    '<div class="notice" style="' + NOTICE_STYLES + '">' +
-      '<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' +
+  '<div class="bjs-powered-by-lightbox">' +
+    '<div class="backdrop"></div>' +
+    '<div class="notice">' +
+      '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
         BPMNIO_IMG +
       '</a>' +
       '<span>' +
@@ -70,10 +72,23 @@ var LIGHTBOX_MARKUP =
 
 var lightbox;
 
+function createLightbox() {
+  lightbox = domify(LIGHTBOX_MARKUP);
+
+  assignStyle(lightbox, LIGHTBOX_STYLES);
+  assignStyle(domQuery('svg', lightbox), LOGO_STYLES);
+  assignStyle(domQuery('.backdrop', lightbox), BACKDROP_STYLES);
+  assignStyle(domQuery('.notice', lightbox), NOTICE_STYLES);
+  assignStyle(domQuery('.link', lightbox), LINK_STYLES, {
+    'margin': '15px 20px 15px 10px',
+    'alignSelf': 'center'
+  });
+}
+
 export function open() {
 
   if (!lightbox) {
-    lightbox = domify(LIGHTBOX_MARKUP);
+    createLightbox();
 
     domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
       document.body.removeChild(lightbox);