#4446 Improved regular expression

#4446 Updating the cleanup criteria
Merge branch 'release/10.2.1'
2025-09-18 23:09:49 +02:00 · 2023-06-01 17:39:54 +02:00 · 2023-06-01 16:30:57 +02:00 · 2023-06-01 13:12:20 +02:00 · 2023-06-01 13:03:14 +02:00 · 2023-06-01 12:53:21 +02:00
19 changed files with 657 additions and 254 deletions
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -36,7 +36,7 @@ jobs:
          restore-keys: cache-lychee-

      - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.7.0
+        uses: lycheeverse/lychee-action@v1.8.0
        with:
          args: >-
            --verbose
--- a/cypress/helpers/util.js
+++ b/cypress/helpers/util.js
@@ -60,7 +60,7 @@ export const renderGraph = (graphStr, options, api) => {
  openURLAndVerifyRendering(url, options);
 };

-const openURLAndVerifyRendering = (url, options, validation = undefined) => {
+export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
  const useAppli = Cypress.env('useAppli');
  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';

 describe('CSS injections', () => {
  it('should not allow CSS injections outside of the diagram', () => {
@@ -13,4 +13,11 @@ describe('CSS injections', () => {
      flowchart: { htmlLabels: false },
    });
  });
+  it('should not allow manipulating styletags using arrowheads', () => {
+    openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', {
+      logLevel: 1,
+      arrowMarkerAbsolute: false,
+      flowchart: { htmlLabels: true },
+    });
+  });
 });
--- a/cypress/platform/xss23-css.html
+++ b/cypress/platform/xss23-css.html
@@ -0,0 +1,85 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="graph-div"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: false,
+        flowcharts: { htmlLabels: true },
+      });
+      function callback() {
+        alert('It worked');
+      }
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+
+      let diagram = `graph TD
+A[["a marker-end=#quot;url(<s title='#<style>*{background:red}</style>'>b"]]
+`;
+      const el = document.querySelector('#graph-div');
+      console.log(diagram);
+      const { svg } = await mermaid.render('graph-div', diagram);
+      document.querySelector('#res').innerHTML = svg;
+      window.rendered = true;
+    </script>
+  </body>
+</html>
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
+[mermaidAPI.ts:670](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L670)

 ## Functions

@@ -127,7 +127,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:306](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L306)
+[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)

 ---

@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code

 #### Defined in

-[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285)
+[mermaidAPI.ts:288](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)

 ---

@@ -320,4 +320,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:356](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L356)
+[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)
--- a/docs/syntax/quadrantChart.md
+++ b/docs/syntax/quadrantChart.md
@@ -46,9 +46,6 @@ quadrantChart

 ## Syntax

-> **Note**
-> In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
-
 > **Note**
 > If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
 > If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
@@ -152,7 +149,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
 quadrantChart
  x-axis Urgent --> Not Urgent
-  y-axis Not Important --> important
+  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Deligate
@@ -163,7 +160,7 @@ quadrantChart
 %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
 quadrantChart
  x-axis Urgent --> Not Urgent
-  y-axis Not Important --> important
+  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Deligate
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
  "name": "mermaid-monorepo",
  "private": true,
-  "version": "10.2.0",
+  "version": "10.2.1",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@8.4.0",
+  "packageManager": "pnpm@8.5.1",
  "keywords": [
    "diagram",
    "markdown",
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "10.2.0",
+  "version": "10.2.1",
  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -28,7 +28,7 @@
    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
-    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
+    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
    "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
    "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -1,8 +1,8 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import dayjs from 'dayjs/esm/index.js';
-import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js';
-import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js';
-import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js';
+import dayjs from 'dayjs';
+import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
+import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
+import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
 import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 import utils from '../../utils.js';
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import dayjs from 'dayjs/esm/index.js';
+import dayjs from 'dayjs';
 import ganttDb from './ganttDb.js';
 import { convert } from '../../tests/util.js';

--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs/esm/index.js';
+import dayjs from 'dayjs';
 import { log } from '../../logger.js';
 import {
  select,
--- a/packages/mermaid/src/docs/.vitepress/components/Contributors.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/Contributors.vue
@@ -5,12 +5,12 @@ import { contributors } from '../contributors';
 <template>
  <div flex="~ wrap gap2" justify-center>
    <a
-      v-for="{ name, avatar } of contributors"
-      :key="name"
-      :href="`https://github.com/${name}`"
+      v-for="{ username, avatar } of contributors"
+      :key="username"
+      :href="`https://github.com/${username}`"
      m-0
      rel="noopener noreferrer"
-      :aria-label="`${name} on GitHub`"
+      :aria-label="`${username} on GitHub`"
    >
      <img
        loading="lazy"
@@ -20,7 +20,7 @@ import { contributors } from '../contributors';
        rounded-full
        h-12
        w-12
-        :alt="`${name}'s avatar`"
+        :alt="`${username}'s avatar`"
      />
    </a>
  </div>
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { mkdir, writeFile, readFile } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { fileURLToPath } from 'url';
@@ -12,22 +13,23 @@ async function download(url: string, fileName: URL) {
  if (existsSync(fileName)) {
    return;
  }
-  // eslint-disable-next-line no-console
-  console.log('downloading', fileName);
+  console.log('downloading', url);
  try {
    const image = await fetch(url);
    await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
-  } catch {}
+  } catch (error) {
+    console.error(error);
+  }
 }

 async function fetchAvatars() {
-  await mkdir(fileURLToPath(new URL('..', getAvatarPath('none'))), { recursive: true });
+  await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), {
+    recursive: true,
+  });
  contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
-  await Promise.allSettled(
-    contributors.map((name) =>
-      download(`https://github.com/${name}.png?size=100`, getAvatarPath(name))
-    )
-  );
+  for (const name of contributors) {
+    await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
+  }
 }

 fetchAvatars();
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -23,9 +23,8 @@ async function fetchContributors() {
      }
    );
    data = await response.json();
-    console.log(response.status, response.statusText);
-    console.log(data);
    collaborators.push(...data.map((i) => i.login));
+    console.log(`Fetched page ${page}`);
    page++;
  } while (data.length === 100);
  return collaborators.filter((name) => !name.includes('[bot]'));
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -20,17 +20,17 @@
  },
  "devDependencies": {
    "@iconify-json/carbon": "^1.1.16",
-    "@unocss/reset": "^0.51.8",
+    "@unocss/reset": "^0.52.0",
    "@vite-pwa/vitepress": "^0.0.5",
    "@vitejs/plugin-vue": "^4.2.1",
    "fast-glob": "^3.2.12",
    "https-localhost": "^4.7.1",
    "pathe": "^1.1.0",
-    "unocss": "^0.51.8",
+    "unocss": "^0.52.0",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.3",
-    "vite-plugin-pwa": "^0.14.7",
-    "vitepress": "1.0.0-alpha.74",
+    "vite-plugin-pwa": "^0.15.0",
+    "vitepress": "1.0.0-alpha.76",
    "workbox-window": "^6.5.4"
  }
 }
--- a/packages/mermaid/src/docs/syntax/quadrantChart.md
+++ b/packages/mermaid/src/docs/syntax/quadrantChart.md
@@ -23,10 +23,6 @@ quadrantChart

 ## Syntax

-```note
-In place of `<text>` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❤"`.
-```
-
 ```note
 If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
 If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant.
@@ -134,7 +130,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
 quadrantChart
  x-axis Urgent --> Not Urgent
-  y-axis Not Important --> important
+  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Deligate
--- a/packages/mermaid/src/logger.ts
+++ b/packages/mermaid/src/logger.ts
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable no-console */
-import dayjs from 'dayjs/esm/index.js';
+import dayjs from 'dayjs';

 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -263,7 +263,10 @@ export const cleanUpSvgCode = (

  // Replace marker-end urls with just the # anchor (remove the preceding part of the URL)
  if (!useArrowMarkerUrls && !inSandboxMode) {
-    cleanedUpSvg = cleanedUpSvg.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#');
+    cleanedUpSvg = cleanedUpSvg.replace(
+      /marker-end="url\([\d+./:=?A-Za-z-]*?#/g,
+      'marker-end="url(#'
+    );
  }

  cleanedUpSvg = decodeEntities(cleanedUpSvg);
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Knut Sveidqvist	55092f532f	#4446 Improved regular expression	2023-06-01 17:39:54 +02:00
Knut Sveidqvist	7b6cb4f974	#4446 Updating the cleanup criteria	2023-06-01 16:30:57 +02:00
Knut Sveidqvist	0cd1c5de97	Merge branch 'release/10.2.1'	2023-06-01 13:12:20 +02:00
Knut Sveidqvist	48e5d743b3	Merge pull request #4445 from mermaid-js/4438-revering-to-non-esm-use-of-dayjs #4438 Reverted to the changes from #4285	2023-06-01 13:03:14 +02:00
Knut Sveidqvist	98e75959cc	#4438 Reverted to the changes from #4285	2023-06-01 12:53:21 +02:00
Sidharth Vinod	0cec854f3b	Fix download	2023-05-31 19:33:30 +05:30
Sidharth Vinod	abcae14fa7	Fix compile error in docs.	2023-05-31 19:10:42 +05:30
Sidharth Vinod	641098e602	Fix Contributor link in homepage	2023-05-31 19:06:36 +05:30
Sidharth Vinod	ca5d78098e	Merge pull request #4426 from aloisklink/chore/fix-broken-lockfile Merge PR #4425 to `master` to fix uploading v10.2.0 docs to `mermaid.js.org` website	2023-05-25 07:13:58 +05:30
Alois Klink	6093383d45	build(deps): fix broken pnpm-lock.yaml file Looks like a bad merge conflict resolution broke this file, and for some reason, the `packages/mermaid/src/vitepress` bit got removed when releasing v10.2.0-rc.4. Fixes: `bd1343648e` Fixes: `9c12c42a26`	2023-05-24 22:19:49 +01:00
Knut Sveidqvist	bd1343648e	Merge branch 'master' into develop	2023-05-24 19:20:47 +02:00
Knut Sveidqvist	3517314390	Merge branch 'release/10.2.0'	2023-05-24 19:19:41 +02:00
renovate[bot]	ac23787084	Update all minor dependencies	2023-05-22 07:53:27 +00:00
renovate[bot]	ad61f4c6b1	Update all patch dependencies	2023-05-22 06:06:37 +00:00
renovate[bot]	b1590c2211	Update all minor dependencies	2023-05-17 13:32:09 +00:00
renovate[bot]	9eeeb97e15	Update all patch dependencies	2023-05-17 09:17:43 +00:00
Sidharth Vinod	0ef115f69a	Fix vitepress build	2023-05-17 11:28:17 +05:30