You have an XSL template for the website you are working on and you would like to embed some JavaScript in the markup. You care so you would like to keep the XHTML output valid. Easy enough - all it takes is wrapping the actual JavaScript code with CDATA. To make it safe you would also add JS comments around CDATA and move on. But is it really that easy with XSL? Let's have a look.
XSL template for JavaScript
Here is the working solution which allows for safe embedding JavaScript on XHTML pages created with XSL templates.
Example 0
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
method="xml"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
indent="yes"
cdata-section-elements=""
omit-xml-declaration="yes" />
<xsl:template name="javascript">
<xsl:param name="code"/>
<xsl:text disable-output-escaping="yes">
<script type="text/javascript">
/* <![CDATA[ */ </xsl:text>
<xsl:value-of select="$code" disable-output-escaping="yes"/>
<xsl:text disable-output-escaping="yes">
/* ]]> */
</script>
</xsl:text>
</xsl:template>
<xsl:template match="/">
<html>
<body>
<xsl:call-template name="javascript">
<xsl:with-param name="code">
<![CDATA[
if (1 > 2) {}
]]>
</xsl:with-param>
</xsl:call-template>
</body>
</html>
</xsl:template>
</xsl:transform>
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
/* <![CDATA[ */
if (1 > 2) {}
/* ]]> */
</script>
</body>
</html>
Can it be simpler?
Let's start off with the most intuitive approach - add CDATA inside script tag as you would in XHTML.
Example 1
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
method="xml"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
indent="yes"
cdata-section-elements=""
omit-xml-declaration="yes" />
<xsl:template match="/">
<html>
<body>
<script type="text/javascript">
/* <![CDATA[ */
if (1 < 2) {}
/* ]]> */
</script>
</body>
</html>
</xsl:template>
</xsl:transform>
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
/* */
if (1 < 2) {}
/* */
</script>
</body>
</html>
CDATA got stripped off and the < sign got replaced with <. Of course! CDATA as an XML specific construct is interpreted in XSL as well. And that helps - try to remove CDATA from the following example and you will see an error. Good old < is the source of trouble here - without CDATA around, it makes XML invalid.
The interpreted CDATA should stay then but another CDATA is required in the output. xls:output has an option which allows to wrap content of certain tags with CDATA. However if you set it up to wrap up content of script tags with CDATA (the rest of the code like in example 1) you will not get what you need. Let's have a look.
Example 2
cdata-section-elements="script"
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
<![CDATA[
/* */
if (1 < 2) {}
/* */
]]>
</script>
</body>
</html>
Ok, now there is CDATA in the output but it is not safely commented out. And it does not seem possible to get it that way. And how about creating CDATA explicitly as a text? Maybe with disabled output escaping that would work? Let's see.
Example 3
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
method="xml"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
indent="yes"
cdata-section-elements=""
omit-xml-declaration="yes" />
<xsl:template match="/">
<html>
<body>
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
/* <![CDATA[ */
</xsl:text>
<![CDATA[
if (1 < 2) {}
]]>
<xsl:text disable-output-escaping="yes">
/* ]]> */
</xsl:text>
</script>
</body>
</html>
</xsl:template>
</xsl:transform>
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
/* <![CDATA[ */
if (1 < 2) {}
/* ]]> */
</script>
</body>
</html>
That's definitely some progress, CDATA is in place. Now the < in the JavaScript code should become < again. Why not to put the whole JavaScript code into another xsl:text tag with disable escaping? Well, that's why:
Example 4
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
/* <![CDATA[ */
</xsl:text>
<xsl:text disable-output-escaping="yes">
<![CDATA[
if (1 < 2) {}
]]>
</xsl:text>
<xsl:text disable-output-escaping="yes">
/* ]]> */
</xsl:text>
</script>
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
/* <![CDATA[ */
if (1 < 2) {}
/* ]]> */
</script>
</body>
</html>
Is it a dead end or maybe xsl:text element is not the best choice after all? It has to be something with disable-output-escaping attribute. Another such an element is xsl:value-of. Assuming that the JavaScript code exists only in the template and not in the processed XML structure, value-of needs an xsl:variable to read value from.
Example 5
<xsl:variable name="s1">
<![CDATA[
if (1 < 2) {}
]]>
</xsl:variable>
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
/* <![CDATA[ */
</xsl:text>
<xsl:value-of select="$s1" disable-output-escaping="yes"/>
<xsl:text disable-output-escaping="yes">
/* ]]> */
</xsl:text>
</script>
The above example will output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
/* <![CDATA[ */
if (1 < 2) {}
/* ]]> */
</script>
</body>
</html>
And that worked! It is not very flexible solution, though. Defining variable for every JavaScript in the template seems to be acceptable only if necessary. Luckily xsl:value-of can also read value of a parameter passed to an xsl:template. That's how I got to the template you can find at the top of the page.
Thank you for reading. I hope you found it useful.
Update - 21.05.2010
At the beginning the template looked like this:
<xsl:template name="javascript">
<xsl:param name="code"/>
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
/* <![CDATA[ */ </xsl:text>
<xsl:value-of select="$code" disable-output-escaping="yes"/>
<xsl:text disable-output-escaping="yes">
/* ]]> */
</xsl:text>
</script>
</xsl:template>
However it turned out that on some PHP installations XSLT adds CDATA inside <script> tag even if it's not specified in the <xsl:output>. Therefore <script> tag has to be generated as a text rather than being part of interpreted XML.
Jacek
