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.

Martin Honnen · Accepted Answer · 2018-02-20 09:01:05Z

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.

answered Feb 20, 2018 at 9:01

Martin Honnen

169k6 gold badges100 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Giquo Over a year ago

hi, thanks for your time. Now: i've tried as you said here but in firefox i get an error that says "Wating for..." and nothing else, and in Chrome i get in the console "Resource interpreted as Document but transferred with MIME type application/xml" and spits the entire XSLT, next question is: what if i need to load more than 1 XSLT because the main one imports a couple more?

Martin Honnen Over a year ago

That code snippet in my answer is executable ("Run code snippet") and for me with Firefox 58 it then shows an unordered HTML list meaning the XSLT was applied. As I said, it doesn't work in Chrome. As for using XSLTProcessor from Javascript, you will need to edit your question or ask a new one with all details of a minimal but complete samples allowing us to reproduce the problem.

Giquo Over a year ago

okay, i just had to change the firefox language to see what it says in english, implementing your code in my project says: XML Parsing Error: and points to the <?xml-stylesheet type="text/xsl" href="here is all the xsl encoded ?> that's the error that i got now

Collectives™ on Stack Overflow

Call XSLT file from data:text/xml

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related