encodeURIComponent() vs JSON.stringify() in data-* attribute

Question

I'd like to use array as data-* attribute and a lot of StackOverflow answers suggest that I should use JSON.stringify();

• How to pass an array into jQuery .data() attribute
• Store and use an array using the HTML data tag and jQuery
• https://gist.github.com/charliepark/4266921
• etc.

So, if I have this array: ['something', 'some\'thing', 'some"thing'] it will be parsed to "["something","some'thing","some\"thing"]" and therefore it won't fit neither data-*='' nor data-*="" because either ' or " will break the HTML tag.

Am I missing something or encodeURIComponent() is a true solution to encoding arrays like that? Why in other StackOverflow answers nobody noticed this?

Answer 1

The reasoning that JSON.stringify is not guaranteed to be safe in HTML attributes when the text is part of the HTML markup itself is valid. However, there is no escaping issue if using one of the access methods (eg. .data or .attr) to assign the value as these do not directly manipulate raw HTML text.

While encodeURIComponent would "work" as it escapes all the problematic characters, it both results in overly ugly values/markup and requires a manual decodeURIComponent step when consuming the values - yuck!

Instead, if inserting the data directly into the HTML, simply "html encode" the value and use the result as the attribute value. Such a function comes with most server-side languages, although an equivalent is not supplied natively with JavaScript.

Assuming the attribute values are quoted, the problematic characters that need to be replaced with the appropriate HTML entities are:

• & - &, escape-the-escape, applied first
• " - ", for double-quoted attribute
• ' - ', for single-quoted attribute
• Optional (required for XML): < and >

Using the above approach relies on the parsing of the HTML markup, and the automatic decoding of HTML entities therein, such that the actual (non-encoded) result is stored as the data-attribute value in the DOM.