security concerns if using html data-* attribute for l10n?

Question

I need to pass a localized multidimensional javascript object to a page. The object is constructed using php and represents some wp-theme settings. I cant find a way to utilize wp_localize_script for this, as it will not parse multidimensional arrays.

Instead I've come up with the solution to use a html5 data-* attribute for this and then using jQuery to retrieve it, hoping for this method to provide x-browser compatibility.

So on the page where I need to access the localized data I let php output:

<div id="localized" style="display:none" data-localized='{"user": "Doe", "skills": {"html":5, "css":4, "php":3} }'>

I then get that localized data using:

var my_localazed_data = $('#localized').data('localized');

It works fine. But my concern here is:

1) Is this browser compatible?

2) Are there any security concern to be aware of as compared to using wp_localize_script?

Answer 1

Q: 1.) Is this browser compatible?

Yes, for all browsers supporting jQuery data(). jQuery is generally supported by most modern browsers.

Q: 2) Are there any security concern to be aware of as compared to using wp_localize_script?

wp_localize_script() is mainly doing the same but it's keeping the data on the serverside and not within the DOM.

As always, making use of javascript and interacting with the DOM has security implications. You need to follow the rules to properly en- and de-code any arbitrary data safely so that injections can not introduce unintended behaviour.