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

Fenella

Not sure, if there is anything automated, but there is the v-text vs the v-html. – Lilienthal

vuejs.org/v2/guide/syntax.html#Raw-HTML -> that's what you're looking for. They're not mentioning XSS per-se and it's not required to mention it per-se. If HTML is escaped, you can't embed anything, therefore the ground for mitigation exists. – Eastnortheast

I've built a small app using vue and firebase firestore and I use v-html so that I can write html in my forms and have it render when fetched from firestore. All tags work for formatting purposes (ul, i, etc.), but I can't get script tags to run, so I suspsect either vue is now sanitizing or firestore is... – Placeman

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

Nigel

Thanks, I couldn't find this myself with my search terms, also the search feature on the Vue website doesn't seem to trigger when inserting "XSS", even though its mentioned in the link 'Mjh' mentioned in the comment on my OP. – Fenella

The OP's question is pretty broad, and I'm not sure if this is a complete answer. Vue doesn't offer a built-in HTML sanitizer, so you'll need a 3rd party sanitizer if the developer is trying to render user-submitted HTML. However for many other cases (like displaying plain text with v-text binding) Vue does escape the content, which I believe helps mitigate XSS risk. vuejs.org/guide/best-practices/… – Hexone

Answer 2

One way to help protect against XSS, is to add a Content Security Policy in your html head. It works by restricting the resources (scripts, images) that a page can load and as well as restricting framing of your pages.

For example, the following directive only allow scripts to be loaded from the same origin as the page itself and "apis.google.com".

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.google.com">

There are other CSP settings that can be used to help mitigate against XSS attacks such as nonces and hashes. For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Swatch

Answer 3

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" />

Disillusionize

Answer 4

I think the accepted answer is misleading. There's a difference between sanitizing HTML and escaping HTML (also called HTML encoding). The former means turning

<img src=x onerror=alert(1)>

to

<img src="x">

while the latter means turning it to

<img src=x onerror=alert(1)>

There's only a handful of cases when you need HTML sanitization. One scenario is when the user needs to write messages with rich text formatting, so you allow the user to write HTML with a few whitelisted tags like i, b and img.

But in 99% of cases, you just want text to be text. So when you write

<h1>{{ userProvidedString }}</h1>

and the user enters

<img src=x onerror=alert(1)>

you want the page to display literally <img src=x onerror=alert(1)>. Most modern frameworks, like Vue, Angular and React do this by automatically HTML encoding output . So yes, Vue does protect against XSS by default.

If you want the browser to interpret the input as HTML, so that the page displays an image and an alert box instead, you can use v-html in Vue, which is equivalent to ng-bind-html in Angular and dangerouslySetInnerHTML in React. In this case you should consider an HTML sanitizer.

Dollarbird