Details
-
Bug
-
Resolution: Unresolved
-
Critical
-
None
-
14.6
-
None
-
Unknown
-
Description
As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html we should be able to use the script tag to embed JSON from the server-side. This is especially useful when you want to pass configuration from the server to the client on page load. We rely on this already in a couple of places (image lightbox configuration, PDF export configuration, real-time editing configuration).
You can reproduce using the HTML macro like this:
{{html}}
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>
{{/html}}
Then from the JavaScript console execute:
JSON.parse(jQuery('script#data').text())
// => Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Parsing the JSON fails because the HTML Cleaner modifies the content of the script tag:
<script id="data" type="application/json">/*<![CDATA[*/
{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}
/*]]>*/</script>
But JSON doesn't support comments. The cleaner seems to assume that a script tag will always contain JavaScript which is wrong. It needs to check the type attribute. If you disable the cleaner with:
{{html clean="false"}}
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>
{{/html}}
the problem is fixed:
JSON.parse(jQuery('script#data').text())
// => Object { userId: 1234, userName: "John Doe", memberSince: "2000-01-01T00:00:00.000Z" }