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.


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>