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
-
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. -
Why don't we just replace existing
v-html
withv-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.