sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: comply with style-src CSP

This commit is contained in:
Martin Stamm 2022-05-16 16:52:52 +02:00
parent a4e21db31f
commit 1c89624a42
2 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/BaseViewer.js
View File

@ -13,6 +13,7 @@ import {
import { import {
domify, domify,
assignStyle,
query as domQuery, query as domQuery,
remove as domRemove remove as domRemove
} from 'min-dom'; } from 'min-dom';
@ -655,7 +656,7 @@ BaseViewer.prototype._createContainer = function(options) {
var container = domify('<div class="bjs-container"></div>'); var container = domify('<div class="bjs-container"></div>');
assign(container.style, { assignStyle(container, {
width: ensureUnit(options.width), width: ensureUnit(options.width),
height: ensureUnit(options.height), height: ensureUnit(options.height),
position: options.position position: options.position
@ -735,7 +736,8 @@ function findBPMNDiagram(definitions, diagramId) {
import { import {
open as openPoweredBy, open as openPoweredBy,
BPMNIO_IMG, BPMNIO_IMG,
LINK_STYLES as BPMNIO_LINK_STYLES LOGO_STYLES,
LINK_STYLES
} from './util/PoweredByUtil'; } from './util/PoweredByUtil';
import { import {
@ -758,12 +760,20 @@ function addProjectLogo(container) {
'target="_blank" ' + 'target="_blank" ' +
'class="bjs-powered-by" ' + 'class="bjs-powered-by" ' +
'title="Powered by bpmn.io" ' + 'title="Powered by bpmn.io" ' +
'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' + '>' +
img + img +
'</a>'; '</a>';
var linkElement = domify(linkMarkup); 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); container.appendChild(linkElement);
domEvent.bind(linkElement, 'click', function(event) { domEvent.bind(linkElement, 'click', function(event) {

95
lib/util/PoweredByUtil.js
View File

@ -5,59 +5,61 @@
*/ */
import { import {
assignStyle,
domify, domify,
delegate as domDelegate delegate as domDelegate,
query as domQuery
} from 'min-dom'; } from 'min-dom';
// inlined ../../resources/logo.svg // 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; export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
function css(attrs) { export var LOGO_STYLES = {
return attrs.join(';'); verticalAlign: 'middle'
} };
export var LINK_STYLES = css([ export var LINK_STYLES = {
'color: #404040' 'color': '#404040'
]); };
var LIGHTBOX_STYLES = css([ var LIGHTBOX_STYLES = {
'z-index: 1001', 'zIndex': '1001',
'position: fixed', 'position': 'fixed',
'top: 0', 'top': '0',
'left: 0', 'left': '0',
'right: 0', 'right': '0',
'bottom: 0' 'bottom': '0'
]); };
var BACKDROP_STYLES = css([ var BACKDROP_STYLES = {
'width: 100%', 'width': '100%',
'height: 100%', 'height': '100%',
'background: rgba(40,40,40,0.2)' 'background': 'rgba(40,40,40,0.2)'
]); };
var NOTICE_STYLES = css([ var NOTICE_STYLES = {
'position: absolute', 'position': 'absolute',
'left: 50%', 'left': '50%',
'top: 40%', 'top': '40%',
'transform: translate(-50%)', 'transform': 'translate(-50%)',
'width: 260px', 'width': '260px',
'padding: 10px', 'padding': '10px',
'background: white', 'background': 'white',
'box-shadow: 0 1px 4px rgba(0,0,0,0.3)', 'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
'font-family: Helvetica, Arial, sans-serif', 'fontFamily': 'Helvetica, Arial, sans-serif',
'font-size: 14px', 'fontSize': '14px',
'display: flex', 'display': 'flex',
'line-height: 1.3' 'lineHeight': '1.3'
]); };
var LIGHTBOX_MARKUP = var LIGHTBOX_MARKUP =
'<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' + '<div class="bjs-powered-by-lightbox">' +
'<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' + '<div class="backdrop"></div>' +
'<div class="notice" style="' + NOTICE_STYLES + '">' + '<div class="notice">' +
'<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' + '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
BPMNIO_IMG + BPMNIO_IMG +
'</a>' + '</a>' +
'<span>' + '<span>' +
@ -70,10 +72,23 @@ var LIGHTBOX_MARKUP =
var lightbox; 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() { export function open() {
if (!lightbox) { if (!lightbox) {
lightbox = domify(LIGHTBOX_MARKUP); createLightbox();
domDelegate.bind(lightbox, '.backdrop', 'click', function(event) { domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
document.body.removeChild(lightbox); document.body.removeChild(lightbox);