## Context ### Why? [Gitlab-org/gitlab](https://gitlab.com/gitlab-org/gitlab) lints against using `v-html`. It was implemented as per https://gitlab.com/gitlab-org/gitlab/-/issues/232488 to prevent against XSS vulnerabilities and as part of the effort to [improve frontend security posture](https://gitlab.com/gitlab-org/gitlab/-/issues/219124). ### Proposal The project has many `v-html` usages and we need to audit each one of them & replace with a secure alternative like [`v-safe-html`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default) or `v-text` wherever possible. ## Issues Open issue - https://gitlab.com/groups/gitlab-org/-/issues?epic_id=100261&state=opened To get an up-to-date list of files that use `v-html`, run ```bash git grep -E "eslint.*disable.*vue/no-v-html" ``` ## How to fix? 1. Pick an open & unassigned issue from this epic. 1. Assign it to yourself. 1. Replace the `v-html` with `v-safe-html` by using [GlSafeHTMLDirective](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default). * Important - If the value being passed to `v-html` is sanitized before, make sure to remove that part * See more tips & caveats below (like using `GlSprintf` or `v-text`) 1. Remove the disabled eslint comment `/* eslint-disable-line vue/no-v-html */`. 1. Create an MR. 1. Follow the standard review process. ### Caveats #### Performance Verify that the switch to `v-safe-html` doesn't impact the page's performance too much. Because `v-safe-html` necessarily does more work than `v-html`, it can have a performance impact if it's used heavily. One recent example was the MR diff view, which [exhibited a large perf impact due to switching to `v-safe-html`](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57842). If there is a significant impact, discuss with a maintainer or domain expert for the page about how to proceed. #### SVGs To use `v-safe-html` with GitLab SVGs, please add the following config ```vue const config = { ADD_TAGS: ['use'] }; <div v-safe-html:[config]="rawHtml"></div> ``` It's required since `USE` is not allowed by default, and has caused bugs like https://gitlab.com/gitlab-org/gitlab/-/issues/247207. #### GlEmojis To render GlEmojis with `v-safe-html`, please add the following config ```vue const config = { ADD_TAGS: ['gl-emoji'] }; <div v-safe-html:[config]="rawHtml"></div> ``` It's required since it's a custom component not allowed by default, and may get resolved by https://gitlab.com/gitlab-org/gitlab/-/issues/340614 ### Tips 1. Use [GlSprintf](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/utilities-sprintf) component instead of `sprintf`, [see example](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41471/diffs) - See all issues related to this - https://gitlab.com/groups/gitlab-org/-/epics/4273#note_678233970 1. Use `v-safe-html` with [strict configuration](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/directives-safe-html-directive--default) - [see example](https://gitlab.com/gitlab-org/gitlab/blob/3d0bde1a8b75c2532d86e2b939016dd0b2022fef/ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_preview.vue#L30) 1. Use `v-text` when input doesn't have html .