Resolve "Markers, ticks and labels in SVG images in Jupyter notebooks are not rendered"

app/assets/javascripts/lib/dompurify.js

@@ -16,7 +16,7 @@ const getAllowedIconUrls = (gon = window.gon) =>
 const isUrlAllowed = (url) => getAllowedIconUrls().some((allowedUrl) => url.startsWith(allowedUrl));
 
 const isHrefSafe = (url) =>
-  isUrlAllowed(url) || isUrlAllowed(relativePathToAbsolute(url, getBaseURL()));
+  isUrlAllowed(url) || isUrlAllowed(relativePathToAbsolute(url, getBaseURL())) || url.match(/^#/);
 
 const removeUnsafeHref = (node, attr) => {
   if (!node.hasAttribute(attr)) {

app/assets/javascripts/notebook/cells/output/html.vue

@@ -28,12 +28,15 @@ export default {
       return this.index === 0;
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
 <template>
   <div class="output">
     <prompt type="Out" :count="count" :show-output="showOutput" />
-    <div v-safe-html="rawCode" class="gl-overflow-auto"></div>
+    <div v-safe-html:[$options.safeHtmlConfig]="rawCode" class="gl-overflow-auto"></div>
   </div>
 </template>

spec/frontend/lib/dompurify_spec.js

@@ -57,6 +57,14 @@ describe('~/lib/dompurify', () => {
     });
   });
 
+  it("doesn't sanitize local references", () => {
+    const htmlHref = `<svg><use href="#some-element"></use></svg>`;
+    const htmlXlink = `<svg><use xlink:href="#some-element"></use></svg>`;
+
+    expect(sanitize(htmlHref)).toBe(htmlHref);
+    expect(sanitize(htmlXlink)).toBe(htmlXlink);
+  });
+
   describe.each`
     type          | gon
     ${'root'}     | ${rootGon}