How to safely embed JSON with </script> in HTML document?

Question

In a Rails 3.1 app, how can I safely embed some JSON data into an HTML document?

Suppose I have this in a controller action:

@tags = [     {name:"tag1", color:"green"},      {name:"</script><b>I can do something bad here</b>", color:"red"} ] 

And this in a corresponding view:

<script type="text/javascript" charset="utf-8">     //<![CDATA[     var tags_list = <%= @tags.to_json %>;     // ]]> </script> 

Then I get this in resulting HTML:

var tags_list = [     {"name":"tag1","color":"green"},     {"name":"</script><b>I can do something bad here</b>","color":"red"} ]; 

which triggers a SyntaxError: Unexpected token & in Chrome

If I remove the Rails' default HTML escaping with <%=raw tags.to_json %>, then it returns this:

var tags_list = [     {"name":"tag1","color":"green"},     {"name":"</script><b>I can do something bad here</b>","color":"red"} ]; 

which, of course, breaks the HTML document with </script>.

Can I somehow tell to_json() method to return something more like this:

var tags_list = [     {"name":"tag1","color":"green"},     {"name":"</script><b>I can do something bad here</b>","color":"red"} ]; 

I asked this question on rubyonrails-talk mailing list, and I understand now that some people think that's a very bad idea to begin with, but in my case it works very nicely, as long as there are no HTML special chars in the data. So I just want to make the string returned by to_json HTML safe and still have JavaScript parse it properly.

UPDATE: Based on @coreyward comment, I did make it a JS string literal, and that seems to be working great now. Its not quite as elegant of a solution as I was hoping for, but its not too bad either. Here is the code that is working for me:

<% tags = [{name:"tag1", color:"green"}, {name:"</script><b>I can \n\ndo something bad here</b>", color:"red"}] %>  <script type="text/javascript" charset="utf-8">     //<![CDATA[     var tags_list = $.parseJSON('<%=j tags.to_json.html_safe %>');     // ]]> </script> 

which results in:

<script type="text/javascript" charset="utf-8">     //<![CDATA[     var tags_list = $.parseJSON('[{\"name\":\"tag1\",\"color\":\"green\"},{\"name\":\"<\/script><b>I can \\n\\ndo something bad here<\/b>\",\"color\":\"red\"}]');     // ]]> </script> 

Answer 1

Your code using just @tags.to_json works in rails3, if you enable it with:

   ActiveSupport.escape_html_entities_in_json = true 

Otherwise, your other option is this:

   var tags_list = <%= raw @tags.to_json.gsub("</", "<\\/") %>; 

This saves the client having to parse the whole thing through $