Escaping/encoding single quotes in JSON encoded HTML5 data attributes

php json html custom-data-attribute
Jérémy F. picture Jérémy F. · Jan 12, 2012 · Viewed 26.5k times · Source

In PHP, I use json_encode() to echo arrays in HTML5 data attributes. As JSON requires - and json_encode() generates - values encapsulated by double quotes. I therefor wrap my data attributes with single quotes, like:

<article data-tags='["html5","jquery","php","test's"]'>

As you can see, the last tag (test's) contains a single quote, and using json_encode() with no options leads to parsing problems.

So I use json_encode() with the JSON_HEX_APOS parameter, and parsing is fine, as my single quotes are encoded, but I wonder: is there a downside doing it like this?

Answer

deceze picture deceze · Jan 12, 2012

You need to HTML escape data echoed into HTML:

printf('<article data-tags="%s">',
    htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));

Related questions

Best way to store JSON in an HTML attribute?

I need to put a JSON object into an attribute on an HTML element. The HTML does not have to validate. Answered by Quentin: Store the JSON in a data-* attribute, which is valid HTML5. The JSON object could be …

Read More
Store JSON in a hidden input element?

I need to be able to generate an effectively unlimited number of datasets, so what I want to do is something like this; <input type="hidden" name="items[]" value="{id:1,name:'some-name'}" /> I tried JSON.stringify to convert …

Read More
Returning JSON from a PHP Script

I want to return JSON from a PHP script. Do I just echo the result? Do I have to set the Content-Type header?

Read More