Does Vue, by default, provide security for or protects against XSS?

Question

I am trying to figure out how to protect,

• Angular
• Vue
• React

against XSS attacks. When I visit the Angular official docs,

https://angular.io/guide/security

, it says:

To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.

and also:

Angular sanitizes untrusted values for HTML, styles, and URLs; sanitizing resource URLs isn't possible because they contain arbitrary code. In development mode, Angular prints a console warning when it has to change a value during sanitization.

and:

Angular recognizes the value as unsafe and automatically sanitizes it, which removes the tag but keeps safe content such as the element.

When I go to the React official docs,

https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks

,it says the following:

It is safe to embed user input in JSX:

and:

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

But for Vue, I cannot find anything in their docs about XSS protection, or anything that they could provide by default.

My question: Does Vue, by default, deliver any way of protection against XSS attacks, or would I need to look for a 3rd party solution?

When I Google for this subject I get a lot of blog posts sites and articles refering to, for example, this project to sanitize my HTML:

https://github.com/punkave/sanitize-html

Answer 1

There is no built-in sanitizer in vue. As per Evan You's (Creator of Vue) comment on an issue

built-in sanitizer would add extra bundle weight for a rare use case (when most use cases of v-html are for trusted content); it is also trivial to add sanitize-html by setting Vue.prototype.$sanitize = sanitizeHTML and then do v-html="$sanitize(html)".

Check this post : https://github.com/vuejs/vue/issues/6333

Answer 2

More additional info than an answer: like mentioned in another post does sanitize-html have a drawback of a 327 KB weight. But there are smaller packages available:

• DOMPurify (15 KB)
• js-xss (28 KB)

To prevent XSS in our projects we are using vue-dompuritfy-html which has the bonus to cover the recommended eslint rule vue/no-v-html. After installing you can simply use

<div v-dompurify-html="htmlContent" />