Incorrect emoji display for repository files due to inconsistent use of safeHtmlConfig.ADD_TAGS

safeHtmlConfig and ADD_TAGS is used to sanitize html in the Vue apps, particularly any user markdown converted to html.

There are a couple specific tags which gitlab uses in their html output - gl-emoji and copy-code. These need to be whitelisted, via ADD_TAGS, in order for them not to be sanitized out. For example https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/notes/components/note_body.vue#L154-L156

  safeHtmlConfig: {
    ADD_TAGS: ['use', 'gl-emoji', 'copy-code'],
  },

In most places, only one tag is whitelisted, sometimes gl-emoji, sometimes copy-code, etc. However this makes it inconsistent in how html is displayed. For example, in https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue#L18-L20, the viewer for repository files, include README files, gl-emoji is not included. This means that emojis, such as :information_source:, don't get shown correctly when viewing the files, since gl-emoji gets sanitized out.

We could do a couple things. Most places that whitelist copy-code or gl-emoj could have the other one whitelisted without any security exposure. So each instance should have both listed.

We might also have a constant defined that could be used instead of the hardcoded array ['copy-code', 'gl-emoji'], so that adding additional tags will be easier in the future.

The use tag might need to be handled differently, but there should be a way to DRY that up.

At the moment, any markdown files in the repository that have emojis will display incorrectly. See gitlab-environment-toolkit#615 (comment 1260162915) for details.

Assignee Loading
Time tracking Loading