Update popovers to use v-safe-html

  - Swaps v-html with v-safe-html
  - Adds specs for html support

app/assets/javascripts/popovers/components/popovers.vue

 <script>
-// We can't use v-safe-html here as the popover's title or content might contains SVGs that would
-// be stripped by the directive's sanitizer. Instead, we fallback on v-html and we use GitLab's
-// dompurify config that lets SVGs be rendered properly.
-// Context: https://gitlab.com/gitlab-org/gitlab/-/issues/247207
-/* eslint-disable vue/no-v-html */
-import { GlPopover } from '@gitlab/ui';
-import { sanitize } from '~/lib/dompurify';
+import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
 
 const newPopover = (element) => {
   const { content, html, placement, title, triggers = 'focus' } = element.dataset;
@@ -24,6 +18,9 @@ export default {
   components: {
     GlPopover,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   data() {
     return {
       popovers: [],
@@ -71,9 +68,9 @@ export default {
     popoverExists(element) {
       return this.popovers.some((popover) => popover.target === element);
     },
-    getSafeHtml(html) {
-      return sanitize(html);
-    },
+  },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
   },
 };
 </script>
@@ -82,10 +79,10 @@ export default {
   <div>
     <gl-popover v-for="(popover, index) in popovers" :key="index" v-bind="popover">
       <template #title>
-        <span v-if="popover.html" v-html="getSafeHtml(popover.title)"></span>
+        <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.title"></span>
         <span v-else>{{ popover.title }}</span>
       </template>
-      <span v-if="popover.html" v-html="getSafeHtml(popover.content)"></span>
+      <span v-if="popover.html" v-safe-html:[$options.safeHtmlConfig]="popover.content"></span>
       <span v-else>{{ popover.content }}</span>
     </gl-popover>
   </div>

spec/frontend/popovers/components/popovers_spec.js

@@ -54,17 +54,20 @@ describe('popovers/components/popovers.vue', () => {
       expect(wrapper.findAll(GlPopover)).toHaveLength(1);
     });
 
-    it('supports HTML content', async () => {
-      const content = 'content with <b>HTML</b>';
-      await buildWrapper(
-        createPopoverTarget({
-          content,
-          html: true,
-        }),
-      );
-      const html = wrapper.find(GlPopover).html();
-
-      expect(html).toContain(content);
+    describe('supports HTML content', () => {
+      const svgIcon = '<svg><use xlink:href="icons.svg#test"></use></svg>';
+
+      it.each`
+        description                         | content                          | render
+        ${'renders html content correctly'} | ${'<b>HTML</b>'}                 | ${'<b>HTML</b>'}
+        ${'removes any unsafe content'}     | ${'<script>alert(XSS)</script>'} | ${''}
+        ${'renders svg icons correctly'}    | ${svgIcon}                       | ${svgIcon}
+      `('$description', async ({ content, render }) => {
+        await buildWrapper(createPopoverTarget({ content, html: true }));
+
+        const html = wrapper.find(GlPopover).html();
+        expect(html).toContain(render);
+      });
     });
 
     it.each`