StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to safely embed JSON with </script> in HTML document?
text
Body
copied!<p>In a Rails 3.1 app, how can I safely embed some JSON data into an HTML document?</p> <p>Suppose I have this in a controller action:</p> <pre><code>@tags = [ {name:"tag1", color:"green"}, {name:"</script><b>I can do something bad here</b>", color:"red"} ] </code></pre> <p>And this in a corresponding view:</p> <pre><code><script type="text/javascript" charset="utf-8"> //<![CDATA[ var tags_list = <%= @tags.to_json %>; // ]]> </script> </code></pre> <p>Then I get this in resulting HTML:</p> <pre><code>var tags_list = [ {&quot;name&quot;:&quot;tag1&quot;,&quot;color&quot;:&quot;green&quot;}, {&quot;name&quot;:&quot;&lt;/script&gt;&lt;b&gt;I can do something bad here&lt;/b&gt;&quot;,&quot;color&quot;:&quot;red&quot;} ]; </code></pre> <p>which triggers a <code>SyntaxError: Unexpected token &</code> in Chrome</p> <p>If I remove the Rails' default HTML escaping with <code><%=raw tags.to_json %></code>, then it returns this:</p> <pre><code>var tags_list = [ {"name":"tag1","color":"green"}, {"name":"</script><b>I can do something bad here</b>","color":"red"} ]; </code></pre> <p>which, of course, breaks the HTML document with <code></script></code>.</p> <p>Can I somehow tell to_json() method to return something more like this:</p> <pre><code>var tags_list = [ {"name":"tag1","color":"green"}, {"name":"&lt;/script&gt;&lt;b&gt;I can do something bad here&lt;/b&gt;","color":"red"} ]; </code></pre> <p>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 <code>to_json</code> HTML safe and still have JavaScript parse it properly.</p> <p><strong>UPDATE:</strong> 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:</p> <pre><code><% 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> </code></pre> <p>which results in:</p> <pre><code><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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload