Merge pull request mermaid-js#209 from Morreski/develop

Mitigate XSS vulnerability and allow img tags to be correctly handled in output SVG.
mgenereu · Jun 15, 2021 · be6931d · be6931d
2 parents 3848f9d + a907674
commit be6931d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/cypress/integration/loadSite.spec.ts b/cypress/integration/loadSite.spec.ts
@@ -29,4 +29,14 @@ describe('Site Loads', () => {
 		cy.contains('Class Diagram').click();
 		cy.contains('classDiagram');
 	});
+
+	it('should prevent setting the "securityLevel" option via URL', () => {
+		const b64State = btoa(
+			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64></img>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`
+		);
+		cy.visit(`/edit#${b64State}`);
+		cy.contains('Config').click();
+		cy.contains('forest').should('exist');
+		cy.contains('securityLevel').should('not.exist');
+	});
 });
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
@@ -13,7 +13,9 @@
 		if (!svg) {
 			svg = document.querySelector('#container svg');
 		}
-		const svgString = svg.outerHTML.replaceAll('<br>', '<br/>');
+		const svgString = svg.outerHTML
+			.replaceAll('<br>', '<br/>')
+			.replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
 		return toBase64(svgString);
 	};
 

diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
@@ -35,9 +35,14 @@ export const loadState = (data: string): void => {
 		const stateStr = fromBase64(data);
 		console.log(`Tring to load state: ${stateStr}`);
 		state = JSON.parse(stateStr);
-		if (typeof state.mermaid !== 'string') {
-			state.mermaid = JSON.stringify(state.mermaid, null, 2);
+		const mermaidConfig =
+			typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid;
+              if(mermaidConfig.securityLevel) {
+                  alert(`securityLevel was removed from config. Please add "securityLevel":"${mermaidConfig.securityLevel}" to your config if you trust the source of this Diagram`);
+		    delete mermaidConfig.securityLevel; // Prevent setting overriding securityLevel when loading state to mitigate possible XSS attack
 		}
+
+		state.mermaid = JSON.stringify(mermaidConfig, null, 2);
 	} catch (e) {
 		if (data) {
 			console.error('Init error', e);