Fix anchor and script support in link click events

cypress/integration/rendering/flowchart.spec.js

@@ -512,7 +512,7 @@ describe('Flowchart', () => {
     );
   });
 
-  it('24: Keep node label text (if already defined) when a style is applied', () => {
+  it('24.1: Keep node label text (if already defined) when a style is applied', () => {
     imgSnapshotTest(
       `graph LR
       A(( )) -->|step 1| B(( ))
@@ -524,6 +524,25 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+    imgSnapshotTest(
+      `graph TB
+      TITLE["Link Click Events<br>(click the nodes below)"]
+      A[link test]
+      B[anchor test]
+      C[mailto test]
+      D[other protocol test]
+      E[script test]
+      TITLE --> A & B & C & D & E
+      click A "https://mermaid-js.github.io/mermaid/#/" "link test"
+      click B "#link-clicked" "anchor test"
+      click C "mailto:[email protected]" "mailto test"
+      click D "notes://do-your-thing/id" "other protocol test"
+      click E "javascript:alert('test')" "script test"
+      `,
+      { securityLevel: 'loose' }
+      );
+  });
 
   it('25: Set node text color according to style when html labels are enabled', () => {
     imgSnapshotTest(

dist/index.html

@@ -353,6 +353,22 @@
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
   </div>
+  <div class="mermaid">
+    graph TB
+    TITLE["Link Click Events<br>(click the nodes below)"]
+    A[link test]
+    B[anchor test]
+    C[mailto test]
+    D[other protocol test]
+    E[script test]
+    TITLE --> A & B & C & D & E
+    click A "https://mermaid-js.github.io/mermaid/#/" "link test"
+    click B "#link-clicked" "anchor test"
+    click C "mailto:[email protected]" "mailto test"
+    click D "notes://do-your-thing/id" "other protocol test"
+    click E "javascript:alert('test')" "script test"
+  </div>
+  <hr/>
   <div class="mermaid">
     graph LR
     A[red<br>text] --> B(blue<br>text)
@@ -598,12 +614,15 @@
     end note
   </div>
 
+  <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
+
   <script src="./mermaid.js"></script>
   <script>
     mermaid.initialize({
       theme: 'forest',
       // themeCSS: '.node rect { fill: red; }',
       logLevel: 3,
+      securityLevel: 'loose',
       flowchart: { curve: 'basis' },
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },

src/utils.js

@@ -99,10 +99,6 @@ export const formatUrl = (linkStr, config) => {
   if (url) {
     if (config.securityLevel !== 'loose') {
       return sanitizeUrl(url);
-    } else {
-      if (!/^(https?:)?\/\//i.test(url)) {
-        url = 'http://' + url;
-      }
     }
 
     return url;

src/utils.spec.js

@@ -37,3 +37,61 @@ describe('when finding substring in array ', function() {
     expect(result).toEqual(-1);
   });
 });
+
+describe('when formatting urls', function() {
+  it('should handle links', function() {
+    const url = 'https://mermaid-js.github.io/mermaid/#/';
+
+    let config = { securityLevel: 'loose' };
+    let result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+
+    config.securityLevel = 'strict';
+    result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+  });
+  it('should handle anchors', function() {
+    const url = '#interaction';
+
+    let config = { securityLevel: 'loose' };
+    let result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+
+    config.securityLevel = 'strict';
+    result = utils.formatUrl(url, config);
+    expect(result).toEqual('about:blank');
+  });
+  it('should handle mailto', function() {
+    const url = 'mailto:[email protected]';
+
+    let config = { securityLevel: 'loose' };
+    let result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+
+    config.securityLevel = 'strict';
+    result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+  });
+  it('should handle other protocols', function() {
+    const url = 'notes://do-your-thing/id';
+
+    let config = { securityLevel: 'loose' };
+    let result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+
+    config.securityLevel = 'strict';
+    result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+  });
+  it('should handle scripts', function() {
+    const url = 'javascript:alert("test")';
+
+    let config = { securityLevel: 'loose' };
+    let result = utils.formatUrl(url, config);
+    expect(result).toEqual(url);
+
+    config.securityLevel = 'strict';
+    result = utils.formatUrl(url, config);
+    expect(result).toEqual('about:blank');
+  });
+});