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 Quentin: Store the JSON in a data-* attribute, which is valid HTML5.

2. The JSON object could be any size - i.e. huge

   Answered by Maiku Mori: The limit for an HTML attribute is potentially 65536 characters.

3. What if the JSON contains special characters? e.g. {foo: '<"bar/>'}

   Answered by Quentin: Encode the JSON string before putting it into the attribute, as per the usual conventions. For PHP, use the htmlentities() function

Answer 1

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).