vue-markdown icon indicating copy to clipboard operation
vue-markdown copied to clipboard

Change default HTML escaping behavior to align with markdown-it

Open diwangs opened this issue 7 months ago • 0 comments

vue-markdown uses markdown-it as its markdown rendering engine. However, it changes the default escaping policy to enable HTML rendering by default, making them more vulnerable to XSS attack. Depending on which application the component library is running under, this vulnerability could lead to severe consequences such as account takeover.

Exploit Example A simple proof of concept is to have a vue-markdown component that renders a malicious HTML tag from a string state.

<template>
  <div id="app">
    <vue-markdown>{{ content }}</vue-markdown>
  </div>
</template>
<script>
import VueMarkdown from 'vue-markdown'

export default {
  name: 'App',
  components: {
    'vue-markdown': VueMarkdown
  },
  data() {
    return {
      content: "I am a **test**<img src='' onerror='alert(window.origin)'/>"
    }
  }
}
</script>

Alternative Approaches

  • Sanitize user input before calling markdown-it render method using library like dompurify
  • Provide a clear warning in the README that HTML rendering is enabled by default, so that library user could provide their own sanitizer

diwangs avatar Mar 11 '25 21:03 diwangs