Escaping/encoding single quotes in JSON encoded HTML5 data attributes

Viewed 126 times

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?

Answers

You need to HTML escape data echoed into HTML:

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

Wednesday, November 9, 2022

berebeccamartin-3351b5a525de

Valid, but they aren't boolean.

Custom data attributes specification doesn't mention any changes to empty attributes handling, so the general rules about empty attributes apply here:

Certain attributes may be specified by providing just the attribute name, with no value.

In the following example, the disabled attribute is given with the empty attribute syntax:
<input disabled>
Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.
<input disabled="">

So you are allowed to use empty custom data attributes, but special handling is needed to use them as boolean.

When you are accessing an empty attribute, its value is "". Since it's a falsy value, you can't just use if (element.dataset.myattr) to check whether an attribute is present.

You should use element.hasAttribute('myattr') or if (element.dataset.myattr !== undefined) instead.

Lloyd's answer is wrong. He mentions link to boolean attributes microsyntax, but data-* attributes are not specified as boolean in the spec.

Sunday, September 11, 2022

halvard

It causes escape sequences to be interpreted.

$ echo $'NametAgenBobt24nMaryt36'
Name    Age
Bob     24
Mary    36

After those sequences are expanded, the result is single-quoted, as if the dollar sign had not been present.

Thursday, October 13, 2022

alan_b

Your user ID should be in a separate hidden field, such as:

<input type="hidden" name="user_id" value="123">
<input type="text" name="message" placeholder="type and send..." class="form-control">

Your message input shouldn't have an id of user-id and shouldn't need data-user-id at all.

Data attributes are used by JavaScript. Hidden inputs pass values to PHP that the user doesn't need to see. Neither are truly hidden to the user.

Friday, October 28, 2022

ralph_willgoss

No, it won't be indexed. The attribute itself will be cached with the page, but Google has no context of what the attribute or the value means, so it is meaningless to search engines.

Wednesday, August 24, 2022

private_void

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

php

json

html

custom-data-attribute

Escaping/encoding single quotes in JSON encoded HTML5 data attributes

Answers

php,json,html,custom-data-attribute