Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support esm #5585

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
+26 −31
Draft

feat: support esm #5585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/mermaid-example-diagram/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^7.0.0",
"d3": "^7.9.0",
"khroma": "^2.1.0"
"khroma": "^2.1.0",
"micromark-util-sanitize-uri": "^2.0.0"
},
"devDependencies": {
"concurrently": "^8.2.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^7.0.1",
"@mermaid-js/parser": "workspace:^",
"cytoscape": "^3.29.2",
"cytoscape-cose-bilkent": "^4.1.0",
Expand All @@ -82,6 +81,7 @@
"khroma": "^2.1.0",
"lodash-es": "^4.17.21",
"mdast-util-from-markdown": "^2.0.0",
"micromark-util-sanitize-uri": "^2.0.0",
"stylis": "^4.3.1",
"ts-dedent": "^2.2.0",
"uuid": "^9.0.1"
Expand Down
4 changes: 2 additions & 2 deletions packages/mermaid/src/diagrams/c4/svgDraw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import common from '../common/common.js';
import * as svgDrawCommon from '../common/svgDrawCommon.js';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { sanitizeUri } from 'micromark-util-sanitize-uri';

export const drawRect = function (elem, rectData) {
return svgDrawCommon.drawRect(elem, rectData);
Expand All @@ -12,7 +12,7 @@ export const drawImage = function (elem, width, height, x, y, link) {
imageElem.attr('height', height);
imageElem.attr('x', x);
imageElem.attr('y', y);
let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUrl(link);
let sanitizedLink = link.startsWith('data:image/png;base64') ? link : sanitizeUri(link);
imageElem.attr('xlink:href', sanitizedLink);
};

Expand Down
6 changes: 3 additions & 3 deletions packages/mermaid/src/diagrams/common/svgDrawCommon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { sanitizeUrl } from '@braintree/sanitize-url';
import { sanitizeUri } from 'micromark-util-sanitize-uri';
import type { Group, SVG } from '../../diagram-api/types.js';
import type {
Bound,
Expand Down Expand Up @@ -80,7 +80,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
const imageElement: D3ImageElement = elem.append('image');
imageElement.attr('x', x);
imageElement.attr('y', y);
const sanitizedLink: string = sanitizeUrl(link);
const sanitizedLink: string = sanitizeUri(link);
imageElement.attr('xlink:href', sanitizedLink);
};

Expand All @@ -93,7 +93,7 @@ export const drawEmbeddedImage = (
const imageElement: D3UseElement = element.append('use');
imageElement.attr('x', x);
imageElement.attr('y', y);
const sanitizedLink: string = sanitizeUrl(link);
const sanitizedLink: string = sanitizeUri(link);
imageElement.attr('xlink:href', `#${sanitizedLink}`);
};

Expand Down
6 changes: 3 additions & 3 deletions packages/mermaid/src/diagrams/gantt/ganttDb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { sanitizeUrl } from '@braintree/sanitize-url';
import dayjs from 'dayjs';
import { sanitizeUri } from 'micromark-util-sanitize-uri';
import dayjs from 'dayjs/esm/index.js';
import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
Expand Down Expand Up @@ -631,7 +631,7 @@ const compileTasks = function () {
export const setLink = function (ids, _linkStr) {
let linkStr = _linkStr;
if (getConfig().securityLevel !== 'loose') {
linkStr = sanitizeUrl(_linkStr);
linkStr = sanitizeUri(_linkStr);
}
ids.split(',').forEach(function (id) {
let rawTask = findTaskById(id);
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @ts-nocheck TODO: Fix TS
import dayjs from 'dayjs';
import dayjs from 'dayjs/esm/index.js';
import ganttDb from './ganttDb.js';
import { convert } from '../../tests/util.js';

Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import dayjs from 'dayjs';
import dayjs from 'dayjs/esm/index.js';
import { log } from '../../logger.js';
import {
select,
Expand Down
6 changes: 3 additions & 3 deletions packages/mermaid/src/diagrams/sequence/svgDraw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js';
import * as svgDrawCommon from '../common/svgDrawCommon.js';
import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { sanitizeUri } from 'micromark-util-sanitize-uri';
import * as configApi from '../../config.js';

export const ACTOR_TYPE_WIDTH = 18 * 2;
Expand Down Expand Up @@ -53,7 +53,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
var linkY = 20;
for (let key in links) {
var linkElem = g.append('a');
var sanitizedLink = sanitizeUrl(links[key]);
var sanitizedLink = sanitizeUri(links[key]);
linkElem.attr('xlink:href', sanitizedLink);
linkElem.attr('target', '_blank');

Expand Down Expand Up @@ -1119,5 +1119,5 @@ export default {
getTextObj,
getNoteRect,
fixLifeLineHeights,
sanitizeUrl,
sanitizeUri,
};
2 changes: 1 addition & 1 deletion packages/mermaid/src/logger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
import dayjs from 'dayjs/esm/index.js';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, I think dayjs's ESM support is still a bit lackluster: iamkun/dayjs#1765

We've previously tried to use dayjs/esm, but had to revert it due to dayjs's ESM support being non-standard, and so many users faced issues with it: #4438


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

Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/utils.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ describe('when formatting urls', function () {
expect(result).toEqual(url);

result = utils.formatUrl(url, { securityLevel: 'strict' });
expect(result).toEqual('about:blank');
expect(result).toEqual('javascript:alert(%22test%22)');
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this turns out to be an issue, we can also consider using a different url sanitization library, ill leave that up to the maintainers to decide :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@knsv

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am a bit worried that this might cause XSS attacks (although, it might be impossible without using URL unsafe characters like ", as they'll get converted to %22).

If somebody makes a malicious mermaid diagram with a malicious javascript:xxxx link, hosts it on example.com, and convinces somebody to click it, I believe the JavaScript will have access to the user's data on example.com

However, it's possible that https://github.com/cure53/DOMPurify will handle that for us, though, even if it isn't handled by the URI sanitizer library. I'll let @knsv chime in on it, since he probably knows more!

});
});

Expand Down
4 changes: 2 additions & 2 deletions packages/mermaid/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { sanitizeUrl } from '@braintree/sanitize-url';
import { sanitizeUri } from 'micromark-util-sanitize-uri';
import type { CurveFactory } from 'd3';
import {
curveBasis,
Expand Down Expand Up @@ -258,7 +258,7 @@ export function formatUrl(linkStr: string, config: MermaidConfig): string | unde
}

if (config.securityLevel !== 'loose') {
return sanitizeUrl(url);
return sanitizeUri(url);
}

return url;
Expand Down
17 changes: 6 additions & 11 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.