make sanitizer to allow svg in process to fix missing text bug

b310-digital · Jan 16, 2024 · 6a7f9e7 · 6a7f9e7
1 parent e6b50ab
commit 6a7f9e7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/teammapper-frontend/mmp/src/map/handlers/export.ts b/teammapper-frontend/mmp/src/map/handlers/export.ts
@@ -136,6 +136,8 @@ export default class Export {
             const splittedText = fo.firstChild.textContent.split('\n')
             // line breaks are created via tspan elements that are relatively positioned using dy property
             const svgTextWithLineBreaks = splittedText.map((text, i) => `<tspan dy="${(i === 0 || i === splittedText.length - 1) ? '0' : '1.2em'}" x="${x}">${text}</tspan>`)
+            const textSVG = DOMPurify.sanitize(svgTextWithLineBreaks.join(''), { USE_PROFILES: { svg: true }, NAMESPACE: 'http://www.w3.org/2000/svg'})
+            console.log(textSVG)
             d3.select(parent)
               .attr('width', fo.getAttribute('width'))
               .append('text')
@@ -145,7 +147,7 @@ export default class Export {
               .attr('font-family', (fo.firstElementChild as HTMLElement).style.fontFamily)
               .attr('font-size', (fo.firstElementChild as HTMLElement).style.fontSize)
               .attr('fill', (fo.firstElementChild as HTMLElement).style.color)
-              .html(DOMPurify.sanitize(svgTextWithLineBreaks.join('')))
+              .html(textSVG)
             fo.remove()
         })
 

diff --git a/teammapper-frontend/package-lock.json b/teammapper-frontend/package-lock.json
diff --git a/teammapper-frontend/package.json b/teammapper-frontend/package.json
@@ -59,7 +59,7 @@
     "@ngx-translate/http-loader": "^7.0.0",
     "angular2-hotkeys": "^13.1.0",
     "d3": "7.6.1",
-    "dompurify": "2.4.0",
+    "dompurify": "3.0.6",
     "eslint-config-standard": "^17.0.0",
     "jspdf": "^2.5.1",
     "localforage": "1.10.0",