Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the v-html directive, unless the content is known to be safe or has been properly sanitized.
Vue automatically escapes dynamic content bound using {{ }} syntax to prevent Cross-Site Scripting (XSS) attacks. Using v-html renders raw HTML, potentially executing malicious scripts if the content originates from untrusted user input. Disabling this safety feature creates a significant security vulnerability.
Side-by-side examples engineers can pattern-match during review.
<template>
<div v-html="userGeneratedContent"></div>
</template><template>
<div>{{ userGeneratedContent }}</div>
<div v-html="sanitizedHtmlContent"></div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
props: ['userGeneratedContent'],
computed: {
sanitizedHtmlContent() {
// Example: Sanitize before rendering with v-html
return DOMPurify.sanitize(this.userGeneratedContent);
}
}
}
</script><div v-html="userInput"></div> <div>{{ userInput }}</div> <div v-html="sanitizedInput"></div> From the same buckets as this rule.