iOS14 Safari browser : new XSLTProcessor().importStylesheet(xsl_file)).transformToDocument(xml_file) removes the href attribute from the <a> tag

Question

Created Jan ’21

Replies 2

Boosts 0

Views 3.3k

Participants 2

Hello Team,

The issue was already reported using https://developer.apple.com/forums/thread/671827?login=true&page=1#658436022
Seems like this ticket is CLOSED as i might have accepted a reply to the post unknowingly.

Please refer the comments on earlier post as well and provide resolution.

BELOW IS THE CLEAR DETAILS ON THE ISSUE :

We are seeing some issues with the XSLT transformation with iOS14 version(starting 14.1 version) and this was working fine in earlier versions.

Issue : When an XSLT transformation is done using transformToDocument, we are observing that the anchor tag has the href attribute removed. Please refer to below example.

Sample usage :
new XSLTProcessor().importStylesheet(xsl_file)).transformToDocument(newParsedXML)

Sample line from XSL file :

Code Block <td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>

Expected :

Code Block <a href="javascript:alert(1)">Bangalore</a>

Actual :

Code Block <a>Bangalore</a>

The UX is broken due to this as the links are no longer clickable with the href attribute being removed.

However, when the href contains the link(as below) - this works as expected.

Sample line from XSL file :

Code Block <td><a href="https://www.google.com"><xsl:value-of select="catalog/cd/artist"/></a></td>

Expected :

Code Block <a href="https://www.google.com">ArtistName</a>

Actual :

Code Block <a href="https://www.google.com">ArtistName</a>

Any help on this would be very much appreciated. Looking forward for a quick response

I have enclosed the sample HTML and the XSL file for reference.

HTML :

Code Block <!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>Test XSLT Transformation</title>
      <h1>SAMPLE HTML PAGE</h1>
	
</head>
<body>
<button onclick="doTransform()">Click for XSLT Transformation</button>
<div class="add-info" style="display: none;">
<br>
   <h3> Transformed XML Document : </h3>  <span id="disp-div"></span>
</div>
<script>
function doTransform() {
  	//Create the XML
	var sampleXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><catalog><cd><title>Test Title</title><artist>CLICK ME!</artist><address>Bangalore</address></cd></catalog>";
	var parser = new DOMParser();
	var xml_file = parser.parseFromString(sampleXML, "text/xml");
	//Load the XSLT file
	var response = getData("../../../assets/xslt/emxSampleXSL.xsl");
	var dom = document.implementation.createDocument("", "", null);
   // dom.loadXML(response);
    var objDOMParser = new DOMParser();
    var objDoc = objDOMParser.parseFromString(response, "text/xml");
	while (dom.hasChildNodes())
    dom.removeChild(dom.lastChild);
    for (var i=0; i < objDoc.childNodes.length; i) {
        var objImportedNode = dom.importNode(objDoc.childNodes[i], true);
        dom.appendChild(objImportedNode);
    }
	
	
	//Create XSLT Processor
	var xslProcess = new XSLTProcessor();
	xslProcess.importStylesheet(dom); 
	
	//Transform the sample XML with the XSLT
	var transformedXML = xslProcess.transformToDocument(xml_file);
	console.log("---transformedXML---> "+transformedXML);
	document.getElementsByClassName('add-info')[0].style.display = 'inline';
	document.getElementById('disp-div').innerHTML = new XMLSerializer().serializeToString(transformedXML);
}
function getData(sPath, fnCallback){
	var objHTTP = new XMLHttpRequest;
	objHTTP.open("get", sPath, fnCallback != null);
	objHTTP.send(null);
	try {
		return objHTTP.responseText;
	} finally {
		objHTTP = null;
	}
}
function loadXML(response){
	var objDOMParser = new DOMParser();
    var objDoc = objDOMParser.parseFromString(response, "text/xml");
	while (this.hasChildNodes())
    this.removeChild(this.lastChild);
    for (var i=0; i < objDoc.childNodes.length; i) {
        var objImportedNode = this.importNode(objDoc.childNodes[i], true);
        this.appendChild(objImportedNode);
    }
}
</script>
</body>
</html>

XSLT File :

Code Block <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2> My Data : </h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th>Title</th>
        <th>Artist</th>
	    <th>Address</th>
      </tr>
      <tr>
        <td><xsl:value-of select="catalog/cd/title"/></td>
        <td><a href="https://www.google.com"><xsl:value-of select="catalog/cd/artist"/></a></td>
	    <td><a href="javascript:alert(1)"><xsl:value-of select="catalog/cd/address"/></a></td>
      </tr>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

To add more to the above issue. Alternatively, in the xsl we tried to define the <a> as below. But here we see the onclick attribute being removed post the transformation(as below)

Sample XSL line :

Code Block <td><a href="#" onclick="javascript:alert(1); return false;"><xsl:value-of select="catalog/cd/address"/></a></td>

Expected output :

Code Block <td><a href="#" onclick="javascript:alert(1); return false;">Bangalore</a></td>

Actual output :

Code Block <td><a href="#">Bangalore</a></td>

I can see an internal issue has been reported to track this issue <rdar://problem/73413312>

Can you please let us know when can we expect a resolution to this as this was working with iOS versions older than iOS14

Will this be fixed in the upcoming iOS version update - say v14.4 ?

Thanks,

Boost

Answer 1

R3alityMN OP

May ’21

We are seeing the same issue. This worked until just recently. Our application is mostly rendered using XSLT and now all of the JavaScript events are stripped out during the transform. What change could have caused this just recently?

XSL:

Code Block xsl<p class="pseudolink" style="vertical-align:top;font-size:12px" onclick="document.location = '/cgi/evms.opx?cmd=logout'">LOGOUT</p>

Expected Output (HTML):

Code Block html<p class="pseudolink" style="vertical-align:top;font-size:12px" onclick="document.location = '/cgi/evms.opx?cmd=logout'">LOGOUT</p>

Actual Output (HTML):

Code Block html<p class="pseudolink" style="vertical-align:top;font-size:12px">LOGOUT</p>

As you can see in the output the onclick event is gone. This is happening throughout the entire application. A significant portion of our users are now dead in the water. Can we get an update on this, please?

0

Answer 2

R3alityMN OP

May ’21

I wonder if this is actually an issue with WKWebView? All browsers are doing this on iOS (Safari, Chrome, Firefox, and Edge), but the other browsers work properly on MacOS.

0