XSLT not working in web browser

Question

I have an XSLT file for styles in XML. The XSLT is accessible via a URL (http://someurl/somefile.xsl) without problems.

When I insert the same URL into an xml-stylesheet processing instruction, it only renders plain text in browsers (FF, IE),

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="http://someurl/somefile.xsl"?>
<rootElement>...</rootElement>

but when I use a local file path (file downloaded to same folder as the XML file), it works like a charm:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="somefile.xsl"?>
<rootElement>...</rootElement>

Why?

Copious

Are the XML document and the XSLT stylesheet on the same server? This might be related to your problem: bytes.com/topic/net/answers/…. – Idiolect

@MathiasMüller is right as usual. See my answer below for further details. – Strew

Answer 1

Running XSLT in a Web Browser

Running XSLT in the browser is subject to some limitations:

• XSLT 2.0 is not supported by any of the major web browsers.

• Browser security models differ regarding XSLT processing.

  • Cross-domain restrictions will often require that the XSLT load from the same origin as the the XML. (This appears to be biting you in this case.)

  • Chrome does not allow locally loaded XSLT to run (even when the XML is locally loaded). This can be annoying during development.

For these reasons, XSLT is more often run on the server or in batch mode rather than in the browser.

If you wish to run XSLT in the browser and have it work with Chrome, Firefox, and IE, you must

1. Use XSLT 1.0 only, not XSLT 2.0.

2. Use an xml-stylesheet processing instruction in the XML file as you've done to link the XSLT file with the XML file:

   <?xml version="1.0" encoding="UTF-8"?>
   <?xml-stylesheet type="text/xsl" href="http://origin-domain/path/to/file.xsl"?>
   <rootElement>...</rootElement>
   

3. Serve the XSLT from a server, not from a local file.
4. Make sure that the XSLT originates from the same domain as the XML.

Finally, be sure to check the browser console for any error messages. For example, here's what IE shows when the XSLT cannot be located:

Strew

i do not have experience with xslt (this xsl file is not my work => outer source) and therefore i do not know if it is 1.0 or 2.0 (sadly i do not know differences, will google it), like you said i used xml-stylesheet... about different domains, well i though that was my problem when Mathias suggested it, but it seems it is not... I have a different xml that uses xsl from different domain and if i enter that domain it loads ok (well data is corrupted because its different XML, but styles are loaded correctly) – Copious

thank you for good, detailed answer, i will mark it for best, even thought i still have problem, but it may help somebody else... – Copious

Be sure to check the browser console for error messages. Answer updated. – Strew

Point 3 above, I believe Chrome demands you serve it from a file server but IE does not. – Kimbro

What do you mean the XSLT must originate from the same domain as the XML? You mean that we must not only serve the XSL file, but also the XML, and on the same webserver? Can't we just reference the XSL file remotely? I'm looking for a fix for Chrome specifially. – Hardball

@JacopoStanchi: Correct, the XSLT and XML must be served from the same origin (domain). – Strew

Thank you for your answer. I find it very limited. I wanted to have a XSL file hosted online that anybody could reference to transform their XML, but I guess it won't be possible on Chrome. I could still do a website where one could upload their XML and get the generated HTML, but that might be very complicated because the XML I'm working with references images with a relative path so that would mean that one must also upload their images in an archive, and I would have to decompress it and store it temporarily... Just to think about it makes me tired. – Hardball

Answer 2

Since this answer is being linked to from other questions, I will add an update: it is now possible to run XSLT 3.0 stylesheets in the browser using the Saxon-JS implementation. This lifts many of the limitations present with the built-in XSLT processors that come with the various browsers.

Greenheart

But I assume that a user of your program will need this saxon software installed for any transformations to work? What about with the CHtmlView MFC web browser control? – Cocks

Saxon-JS is just a Javascript library that can be loaded into an HTML page like any other JS code. It doesn't need any installation, and it works with any browser - no need for ActiveX stuff. – Greenheart

I see. In my case though I have an editor with its own preview window which is where I use the CHtmlView control. – Cocks

Sir, I want you to know that over my 25 year career I've had a recurring dream of going to a library and finding massive xml and xslt books and getting all excited about grabbing them from the high shelf. It's a fun dream; they're meter tall books. And it would not have happened had you never created your huge xslt book, which I read from cover to cover (years ago at this point). lol – Headlong

Answer 3

Here's to the folks who don't need this in a particular browser and just want to get this working as quickly and painlessly as possible. I'm in Linux but should work on Mac/Windows as well. This took me 2.5 hours of following red herrings to figure out, but hopefully it will only take you (or me, 6 months from now), 5 minutes.

This solution supports xslt 3.0 via Saxon XSLT. This solution requires Visual Studio Code.

1. Open VS Code, and install the XSL Transform extension
2. Install Java, or make sure it already exists
3. Get the Saxon processor jar
4. Open settings for the VS Code extension
5. Set the Xsl: Processor setting to your jar path. Example: /home/toddmo/Downloads/SaxonHE11-4J/saxon-he-11.4.jar
6. Open your xml document
7. Add this to the top of your xml document, if not already there: <?xml-stylesheet type="text/xsl" href="myxsltdocumentname.xsl"?>
8. Do CTRL+ALT+T
9. Select From Stylesheet Declaration in the menu that comes up
10. If the output is html, save the output file as html and open it up in a browser, or "Preview"
11. Doing this in VS Code has some advantages, you can open up 4 windows each tiled like a window pane with xml at top left, xsl at bottom left, html code output at top right and html preview at bottom right.

Headlong