Overview
Vue is an HTML, CSS, and JS framework for developing web applications with fine-grained reactivity.
A ReDoS vulnerability (CVE-2024-9506) has been identified within the Vue 2 compiler.
Per OWASP: The Regular expression Denial of Service (ReDoS) is a Denial of Service attack that exploits the fact that most Regular Expression implementations may reach extreme situations that cause them to work very slowly (exponentially related to input size). An attacker can then cause a program using a Regular Expression (Regex) to enter these extreme situations and then hang for a very long time.
Details
Module Info
- Product: Vue
- Affected packages: compiler-sfc, server-renderer, template-compiler
- Affected versions: >=2.0.0 <3.0.0
- Github repository: https://github.com/vuejs/vue
- Published Packages: https://www.npmjs.com/package/vue
- Package manager: npm
Vulnerability Info
This Low-severity vulnerability is found in the html-parser.ts file within multiple Vue packages, namely:
- compiler-sfc
- server-renderer
- template-compiler
- vue-template-compiler
- vue-server-renderer
Vue’s parseHTML() function in html-parser.ts is susceptible to a ReDoS attack when:
- The template string contains a <script>, <style>, or <textarea> without a matching closing tag
Within the parseHTML() function there is a regular expression (regex) to check for proper closing tags for the three tags listed above. However, due to an improperly written regex, when you pass in something like <script>some very very long text</not-script> it will trigger a ReDoS.
Steps to Reproduce
Within Vue 2 client-side application code, create a new Vue instance with a template string that includes a <script> node tag that has a different closing tag (in this case </textarea>).
new Vue({
el: '#app',
template: '
<div>
Hello, world!
<script>${'<'.repeat(1000000)}</textarea>
</div>'
});
- Set up an index.html file that loads the above JavaScript and then mount the newly created Vue instance with mount().
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
</head>
<body>
<div id="app">
Loading..
</div>
</body>
</html>
- In a browser, visit your Vue application
http://localhost:3000
- In the browser, observe how the ReDoS vulnerability is able to increase the amount of time it takes for the page to parse the template and mount your Vue application. This demonstrates the ReDoS vulnerability.
-
Proof of Concept
A full reproduction with code similar to the above can be found here:
Vue 2 HTML Tag Mismatch ReDoS
Credits
- K (finder)
Mitigation
Vue 2 has reached End-of-Life and will not receive any updates to address this issue.
Users of the affected components should apply one of the following mitigations:
- Migrate to a newer version of Vue.
- Leverage a commercial support partner like HeroDevs for post-EOL security support.
Get alerted whenever a new vulnerability is fixed in the open source software we support.