Skip to content

Missing icons due to v-safe-html and spriteIcons interaction

The effort to migrate existing v-html usage to v-safe-html had an unintended side-effect on some SVG icons, making them empty:

image_3_

The reason is that, in some places, we were using v-html to render icons using the spriteIcon helper. When these are switched to v-safe-html, e.g., in 0409352d, the icons no longer render.

This is because dompurify (correctly) considers <use href="..."> references to external entities as unsafe, and so filters them out completely.

There are a few approaches we can take to address this, in order of preference:

  1. Migrate these cases to use GlIcon, avoiding both v-html and v-safe-html entirely
  2. Set some kind of dompurify hook to special-case these links, and let them through (see https://github.com/cure53/DOMPurify/issues/233 for some examples)
  3. Keep these as v-html

cc @djadmin

Edited by Mark Florian