Add ESLint rule to prevent using v-html

We should add an ESLint rule to prevent usage of v-html in the codebase.

Why

v-html is bad and can lead to XSS attacks https://vuejs.org/v2/api/#v-html

Goal

Our aim is to make sure we don't use v-html for any new codebase and audit every possible usage of v-html being used.

Fix

Replace v-html with v-safe-html (GlSafeHtmlDirective)

Implementation Plan

  • Add a new rule
  • Disable eslint for existing v-html usages
  • Open a new issue to audit ☝ (every disabled instance) - &4273 (closed)
  • Recommend users to use GlSafeHtmlDirective

Faqs

  1. When should we disable the rule?

    When you are absolutely sure that the value being passed to v-html is never gonna to be user controlled. Involve appsec team whenever you're unsure.

  2. Why don't we just replace existing v-html with v-safe-html?

    Adding v-safe-html to every instance (~ 200 as we speak) even when not necessary means that it would be passing all those html content through a sanitization library which could impact the performance of our application. So, ideally we should audit them and make a decision.

Edited by Dheeraj Joshi