Vue: DOM exception in Chrome, Edge when using application/xhtml xml content type

Created on 10 Jun 2017 · 10Comments · Source: vuejs/vue

Version

2.3.4

Reproduction link

data:application/xhtml+xml;base64,PGJvZHkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiPjxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS92dWVAMi4zLjQiLz48L2JvZHk%2B

Steps to reproduce

In Chrome or Edge, load the vue.js script in a document served as application/xhtml xml to generate an uncaught exception.

What is expected?

No exception in both text/html and application/xhtml xml documents

What is actually happening?

"Uncaught DOMException: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document."

need repro

Source

dvdckl

Most helpful comment

Sorry, didn't see the related PR earlier... I removed my commit and merged it :)

yyx990803 on 13 Jun 2017

🎉4 ❤2

All 10 comments

Reproduction link

data:application/xhtml+xml;base64,PGJvZHkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiPjxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS92dWVAMi4zLjQiLz48L2JvZHk%2B

this is not a reproduction. Please provide the minimum of runnable code that deomnstartes the problem.

LinusBorg on 12 Jun 2017

@LinusBorg You can copy and paste that data URI into your Chrome or Edge browser and then look at the developer console.

dvdckl on 12 Jun 2017

This is the content of the data URI:
<body xmlns="http://www.w3.org/1999/xhtml"><script src="https://unpkg.com/[email protected]"/></body>

dvdckl on 12 Jun 2017

Why would you need this? What's the use case?

yyx990803 on 13 Jun 2017

The use case is that my team serves web content as application/xhtml+xml, and has successfully for a decade across desktop, mobile, and embedded applications. We've found it extremely useful as the "use strict" of HTML, or a more aggressive "standards compliance mode". It eliminates historical idiosyncrasies in HTML (self-closing vs not, tag capitalization, CDATA browser quirks), it prevents certain types of XSS attacks, disallows harmful things like document.write and IE conditional comments, and fails fast on many types of errors. The extra strictness of the XHTML syntax caught the offending line in this patch that is technically invalid HTML 5.

HTML and XML syntaxes are both valid in HTML 5.2 and WHATWG HTML specs. XML representation of HTML5 is not deprecated, discouraged, or considered outdated by any standards body I'm aware of. All browsers support XML formulation of HTML documents natively since IE 9. There's a lot of obsolete FUD about XHTML out there because few people understood the difference between content type and doctype and didn't want to serve polyglot documents for IE <=8. There was also confusion about the relationship of XHTML 1.1 (obsolete) and 2.0 (never finalized) with "XHTML 5" (alive and well) that didn't help the situation.

Making content compatible with both content types and syntaxes is trivial. We've had tiny patches like this one accepted by Google, Facebook, Akamai, advertising networks, and several open source projects over the years (often after a 'why?' conversation like this one).

Given that the rest of Vue seems to be nearly 100% compatible with application/xhtml+xml documents already, we're hoping that you'll accept this patch so we don't have to maintain a fork for a backwards compatible single character change :-) If the self-closing slash really is a problem for ideological reasons, writing that code as <div a="${content}"></div> would resolve the issue while being totally standards compliant, too.

dvdckl on 13 Jun 2017

@dvdckl ha, I was a bit confused and didn't realize the fix was that simple. Does this mean Blizzard will start using Vue now? ;)

yyx990803 on 13 Jun 2017

👍3

He created a PR right from the start actually 😆 #5853