Best way to store JSON in an HTML attribute?

Question

I need to put a JSON object into an attribute on an HTML element.

1. The HTML does not have to validate.

   Answered by Quenti

Answer 1

What you can do is use cdata around your element/s like this

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

where mydata is a raw json string. Hope this helps you and others.

Answer 2

The HTML does not have to validate.

Why not? Validation is really easy QA that catches lots of mistakes. Use an HTML 5 data-* attribute.

The JSON object could be any size (i.e. huge).

I've not seen any documentation on browser limits to attribute sizes.

If you do run into them, then store the data in a <script>. Define an object and map element ids to property names in that object.

What if the JSON contains special characters? (e.g. {test: '<"myString/>'})

Just follow the normal rules for including untrusted data in attribute values. Use & and " (if you’re wrapping the attribute value in double quotes) or ' (if you’re wrapping the attribute value in single quotes).

Note, however, that that is not JSON (which requires that property names be strings and strings be delimited only with double quotes).

Answer 3

Another way you can do it – is put json data inside <script> tag, but not with type="text/javascript", but with type="text/bootstrap" or type="text/json" type, to avoid javascript execution.

Then, in some place of your program, you can ask for it in this way:

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

On server side, you can do something like this (this example with php and twig):

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

Answer 4

For simple JSON objects, the code below would work.

Encode:

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

Decode:

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

Answer 5

You can use knockoutjs,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Output

First name: Jayson Last name: Monterroso

Check this: http://learn.knockoutjs.com/

Answer 6

Nothing fancy here. From PHP, give the JSON string a run through htmlspecialchars to make sure no special characters can be interpreted as HTML. From Javascript, no escaping necessary; just set the attribute and you're good to go.