Can't run JavaScript in CDATA

Question

I am trying to run following HTML in every browser: Opera, FF, IE, Chrome

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
 </head>
 <body>
  <script>
  <![CDATA[
     alert('Hey!');
  ]]>
  </script>
 </body>
</html>

None of them display the alert. Chrome logs an error in console: Uncaught SyntaxError: Unexpected token <. It seems to be complaining about the fist < in CDATA declaration. Firefox also logs "syntax error"

The w3schools point out that this is the way to use CDATA http://www.w3schools.com/xml/xml_cdata.asp. Other answers on this site suggest it. What am I doing wrong? I tried playing with namespaces and doctypes, but that did not change anything.

Edit: I added XHTML name space and doctype, that I originally removed and the problem still persists.

possible duplicate of When is a CDATA section necessary within a script tag? — Pekka
– Pekka, Commented Mar 6, 2012 at 19:27
XHTML is XML. In fact all HTML on my server is generated by XSL templates, so by definition it is valid XML. — Mike Starov
– Mike Starov, Commented Mar 6, 2012 at 19:28
but that doesn't automatically make it X(HT)ML. Are you using an explicit XHTML doctype? — Pekka
– Pekka, Commented Mar 6, 2012 at 19:30
Yes. But that does not change the outcome. All browsers still complain about syntax error. — Mike Starov
– Mike Starov, Commented Mar 6, 2012 at 19:32

danorton · Accepted Answer · 2012-03-06 23:08:16Z

7

The difference is between HTML and XHTML. W3Schools is correct that it’s a valid CDATA construct within XHTML, but as your question indicates that your code is HTML and there is no such thing as CDATA inside a <script> in HTML, your example fails as soon as the interpreter sees the "<". You can tell the browser that it’s looking at XHTML, but it's probably safer to handle HTML, too. To do that, you need to hide the CDATA inside JavaScript comments. (You might also consider identifying which language is inside your <script> block.)

<html>
 <head>
 </head>
 <body>
  <script>
  //<![CDATA[
     alert('Hey!');
  //]]>
  </script>
 </body>
</html>

This is, in fact, the method recommended by the World Wide Web Consortium (W3C) in XHTML Media Types, A.4. Embedded Style Sheets and Scripts.

edited Mar 6, 2012 at 23:08

answered Mar 6, 2012 at 19:53

danorton

12.1k8 gold badges47 silver badges53 bronze badges

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

6 Comments

Pekka Over a year ago

If he makes it proper XHTML, the CDATA tag will work without putting it in comments. (Not that there's any reason to use XHTML nowaways.)

Mike Starov Over a year ago

I removed all that to make my example simpler. Adding it back does not solve the problem. I edited my question and added them.

Mike Starov Over a year ago

All you say is correct, but apparently it is not enough for browsers. They need that Content-type header set to application/xhtml+xml. Only then it works.

Mike Starov Over a year ago

All and all you have to agree that hiding CDATA declaration behind comments is a hack. The real solution is setting right content type.

danorton Over a year ago

No, I don’t agree at all that it’s a “hack.” It's a simple way of making the same code portable. In fact, it’s precisely the method recommended by the maintainers of the standard: w3.org/TR/xhtml-media-types/#C_4

|

Community · Accepted Answer · 2017-05-23 12:04:07Z

6

The related question When is a CDATA section necessary within a script tag? explains that a CDATA section is recommended when embedding scripts in XHTML documents. However, just setting a XHTML doctype to the test document isn't enough. The CDATA is still being treated as a syntax error.

According to this blog post, that is because the content type needs to match the doctype definition. Proper XHTML needs to have the following Content-type header set:

Content-type: application/xhtml+xml

if that is not specified and text/html sent instead, browsers will revert to HTML. And indeed, if I add that header to my test case, browsers start properly parsing the JavaScript inside the CDATA even when the CDATA it's not commented out.

This works for me (setting the header using PHP):

<?php header("Content-type: application/xhtml+xml"); 
      echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<!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" xml:lang="en" lang="en">
  <head>
    <script><![CDATA[alert('Hey!');]]></script>
  </head>
  <body>
  </body>
 </html>

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 6, 2012 at 19:41

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

2 Comments

Mike Starov Over a year ago

Thanks this is the only right solution. Funny even the wikipedia got that syntax error in their examples en.wikipedia.org/wiki/XHTML

danorton Over a year ago

@Mike, I'm interested in knowing what is incorrect in my answer.

Alohci · Accepted Answer · 2012-03-06 19:50:32Z

2

You may see it as XML (XHTML) but that's not how the browser sees it.

You're serving it a text/html which means that the browser sees it as HTML.

It needs to be served with an XML mime type such as application/xhtml+xml

i.e. like this

http://www.alohci.net/application/xhtml+xml/starov.htm.ashx

and not like this

http://www.alohci.net/text/html/starov.htm.ashx

Check the view source to see that it's the same file. Check the "Net" tab in firebug (or the equivalent for your browser) to see the content type in the response headers.

edited Mar 6, 2012 at 19:50

answered Mar 6, 2012 at 19:44

Alohci

84.2k16 gold badges120 silver badges164 bronze badges

2 Comments

Mike Starov Over a year ago

Thanks. Its funny that meta tag equivalent is not enough. Basically, if this was a file on a disk and not on server, it never has a chance of being parsed correctly.

Alohci Over a year ago

Note that if a file is accessed locally (i.e. through the file: protocol), different rules apply, and browsers take their lead from the file extension. So a file with an .xhtml extension will be parsed as XML.

rjz · Accepted Answer · 2012-03-06 19:43:54Z

1

Also, you need to comment out the CDATA so it won't throw a parsing error when it's run:

<script>
//<![CDATA[
     alert('Hey!');
//]]>
</script>

answered Mar 6, 2012 at 19:43

rjz

16.5k3 gold badges39 silver badges35 bronze badges

2 Comments

Pekka Over a year ago

Not if he makes it proper XHTML.

Mike Starov Over a year ago

My output is produced by XSL transformer. The CDATA section is added by transformer what u suggest is not possible.

Daniel Moses · Accepted Answer · 2012-03-06 19:45:02Z

0

1) Comment your CDATA

  //<![CDATA[
     alert('Hey!');
  //]]>

2) add a script type

<script type="text/javascript">

answered Mar 6, 2012 at 19:45

Daniel Moses

5,86828 silver badges39 bronze badges

Collectives™ on Stack Overflow

Can't run JavaScript in CDATA

5 Answers 5

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related