Call XSLT file from data:text/xml

Question

Have a nice day everybody

i'm trying to call a XSLT file from an XML that i'm rendering using data:text/xml, obtained from a REST. The most basic attempt is to use this line of code:

window.open( 'data:text/xml,' + encodeURIComponent( responseData ) );

another attempt of mine is to open it in a modal iframe (with angular-material) setting up the src with the xml data, both tests opens the XML with the URL but with this error:

Error loading the stylesheet: unknown error (805303f4)

I have test it in firefox and chrome, and chrome is more clear with the error details in the console:

Unsafe attempt to load URL route-to-xsl.xsl from frame with URL data:text/xml,... Domains, protocols and ports must match.

I tried to use an absolute path to the stylesheet including same protocols, domains etc. but the error remains (both in iframe or new tab options).

Any help pls, thanks.

Answer 1

As this is client-side Javascript inside of web browsers like Firefox or Chrome I would suggest to use XSLTProcessor to perform the XSLT transformation, you can pull in the XSLT stylesheet using XMLHttpRequest, parse your responseData using DOMParser and then you can use XSLTProcessor for the transformation.

I don't think you will get the browser to execute an XSLT referenced in the data URL, unless the XSLT is embedded itself as data:

var encodedXslt = 'data:application/xml,' + encodeURIComponent(document.getElementById('xslt').textContent);


var xmlCode = document.getElementById('xml').textContent;
var pi = '<?xml-stylesheet type="text/xsl" href="' + encodedXslt + '"?>';

var encodedXml = 'data:application/xml,' + encodeURIComponent(pi + xmlCode);

window.frames.xmlDisplay.location.href = encodedXml;

<script id="xslt" type="application/xml+xslt">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" indent="yes"/>
  <xsl:template match="list">
    <ul>
      <xsl:apply-templates/>
    </ul>
  </xsl:template>
  <xsl:template match="item">
    <li>
      <xsl:apply-templates/>
    </li>
  </xsl:template>
</xsl:stylesheet>
</script>

<script id="xml" type="application/xml">
  <list>
    <item>foo</item>
    <item>bar</item>
  </list>
</script>

<iframe name="xmlDisplay" width="100%" height="300"></iframe>

However, it seems only Mozilla swallows that attempt and applies the XSLT, Chrome continues to complain about an unsafe attempt. So I think it is better and more portable to implement any XSLT transformation where you have the input as a Javascript string with XSLTProcessor.