xml google-chrome xslt xml-parsing webkit

XSLT processing gives different result on Firefox and Chrome

I have an XML processed by an XSLT, but Mozilla Firefox 24 ESR parses my XML correctly while Google Chrome 42 is failing to get the node from XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>

var xslInput = "<xsl:stylesheet  xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\" version=\"1.0\"> <xsl:output   method=\"xml\"/> <xsl:variable name=\"outcome\" select=\"F1- RetBOMs/selectBOM/results[2]/bom\"/><xsl:variable name=\"SINGLE_QUOTE\"  select=\"&quot;'&quot;\"/> <xsl:template match=\"/*\"> <result> <xsl:copy-of  select=\"$outcome\"/> </result></xsl:template> </xsl:stylesheet>" ;

var xmlInput = "<root><F1-RetBOMs><selectBOM><results><bom>Value 1 for first  block</bom><description>Description 1 for first block</description></results> <results><bom>Value 2 for second block</bom><description>Description 2 for  second block</description></results><rowCount>2</rowCount></selectBOM></F1- RetBOMs></root>";

function createXMLDoc(xmlText){
var parser = new DOMParser();
    if (xmlText) {
        xmlDoc = parser.parseFromString(xmlText, 'text/xml');
    } else {
        xmlDoc = document.implementation.createDocument('', '', null);
    }

    return xmlDoc;
}

function convertXSL(){
    var xmldoc = createXMLDoc(xmlInput);
    var xsldoc = createXMLDoc(xslInput);
    var oProcessor = new XSLTProcessor();
    oProcessor.importStylesheet(xsldoc);
    try{
        var outputDoc =   oProcessor.transformToDocument(xmldoc.documentElement, document);
    }catch(e){
        //console.log(e);
    }


    document.getElementById('result').innerHTML = new XMLSerializer().serializeToString(outputDoc);
}

</script>
</head>
<title></title>
<body>
<div id="result" style="min-height:300px; min-width: 400px; border: 1px solid blue"></div>
<span id="clickme" style="min-height:30px; min-width: 40px; border: 1px  solid red" onclick="convertXSL()">Click Me</span>
</body>
</html>

I am trying to get <bom>Value 1 for first block</bom> from xmlInput through XSLT logic but when I am using

<xsl:copy-of select=\"$outcome\"/>

to get the outcome variable Chrome is not parsing through results tag and giving an empty tag in my result div. Same thing happens with Safari.

You can try the whole code in an HTML file and see different browser behavior.

Can anyone please tell me, what am I doing wrong? Is this related with some webkit behavior?

Solution

Chrome won't run locally loaded XSLT due to security concerns. You'll have to load it from a server instead. Firefox is not so particular and ends up being better to use during development for this reason.

Update:

Martin Honnen correctly notes in the comments below that because OP is loading XSLT from a string embedded in the embedded Javascript, Chrome should be running the XSLT in this case. Digging deeper, sure enough, there are other problems...

XML is not well formed: Closing tag for F1-RetBOMs has an internal space: F1- RetBOMs
XSLT XPath has similar issue: F1- RetBOMs/selectBOM/results[2]/bom should be F1-RetBOMs/selectBOM/results[2]/bom
XSLT XPath also relies on undefined context: F1-RetBOMs/selectBOM/results[2]/bom should be /root/F1-RetBOMs/selectBOM/results[2]/bom

When you apply the above fixes, you should see the same results in Chrome and Firefox. (Frankly, I doubt that you would have been seeing correct results even in Firefox previously, though.)