Search code examples
javascripthtmlxmlxhtmldetection

How to tell if loaded page is true XML-processed XHTML or not, using devtools or JavaScript snippet

Inspecting Firefox system page that is displayed when connection to remote server fails shows clear signs it is a true application/xhtml+xml page:

Developer Tools - Problem loading page - http://localhost:4200 inspecting DOM tree. All elements in expanded head (meta, link) have closing tags, what would not show in regular HTML

There is explicit xmlns="http://www.w3.org/1999/xhtml", all elements, even void ones, have closing tags, so it most probably is processed as XML. This brings the question:

What would be the easiest way for script loaded in such page or for Developer Tools command to tell XML processed page apart from regular HTML?

Checking document.documentElement.namespaceURI property gives "http://www.w3.org/1999/xhtml" in both cases.

  • What DOM property or method could serve as sign page is XML?
  • Or is some more complex detection procedure necessary (like doing some DOM/XSLT/entities stuff that works exclusively in XML) to be sure?

Source of the depicted system page is presumably view-source:chrome://global/content/aboutNetError.xhtml but, it does not work when displayed directly.

Solution

  • document.contentType should give you "application/xhtml+xml" for XML parsed XHTML documents and "text/html" for HTML(5) parsed HTML documents.

    Specs: WHATWG:contentType, docs: MDN: Document: contentType property.

    Demo:

    This document's <code>contentType</code>:<br/>
<script>document.body.append(document.contentType)</script>

<hr>

<p>Iframe with minimal XHTML and same content:</p>

<iframe src='data:application/xhtml+xml,
  <html xmlns="http://www.w3.org/1999/xhtml"><body>
  This document%27s <code>contentType</code>:<br/>
  <script>document.body.append(document.contentType) </script>
  </body></html>
'></iframe>