Найкраща практика для вбудовування довільної JSON у DOM?

Я думаю про вбудовування довільної JSON у DOM так:

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

Це схоже на те, як можна зберігати довільний HTML-шаблон у DOM для подальшого використання з механізмом шаблонів JavaScript. У цьому випадку ми зможемо пізніше отримати JSON і проаналізувати його:

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

Це працює , але це найкращий спосіб? Чи це порушує будь-яку найкращу практику чи стандарт?

Примітка. Я не шукаю альтернатив для зберігання JSON у DOM, я вже вирішив, що це найкраще рішення для конкретної проблеми, яка у мене є. Я просто шукаю найкращий спосіб це зробити.

Я думаю, що ваш оригінальний метод є найкращим. Специфікація HTML5 навіть адресує це використання:

"При використанні для включення блоків даних (на відміну від скриптів) дані повинні бути вбудовані в рядки, формат даних повинен бути заданий за допомогою атрибута типу, атрибут src не повинен бути вказаний, а вміст елемента сценарію повинен бути відповідати вимогам, визначеним для використовуваного формату. "

Читайте тут: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Ви зробили саме це. Що не любити? Немає кодування символів за потребою даних атрибутів. Ви можете відформатувати, якщо хочете. Це виразно і призначене використання зрозуміло. Це не схоже на злом (наприклад, за допомогою CSS для приховування вашого елемента "перевізника"). Це абсолютно дійсно.

Як загальний напрямок, я б спробував використовувати атрибути даних HTML5 . Ніщо не завадить вам ввести дійсний JSON. наприклад:

<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>

Якщо ви використовуєте jQuery, то його отримання буде таким же простим, як:

var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));

Цей спосіб вбудовування json в тег скрипта може мати проблему безпеки. Якщо припустити, що дані json походять від введення користувача, можна створити член даних, який фактично вирветься з тегу сценарію та дозволить безпосередньо вводити в dom. Дивіться тут:

http://jsfiddle.net/YmhZv/1/

Ось ін’єкція

<script type="application/json" id="stuff">
{
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ",
}
</script>

Просто не обійтися / кодувати.

Дивіться Правило № 3.1 на шахрайському аркуші запобігання XSS OWASP.

Скажіть, що ви хочете включити цей JSON в HTML:

{
    "html": "<script>alert(\"XSS!\");</script>"
}

Створіть прихований <div>у HTML. Далі, уникнути свого JSON, кодуючи небезпечні сутності (наприклад, &, <,>, ", ', і /) та вставте його всередину елемента.

<div id="init_data" style="display:none">
        {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;}
</div>

Тепер ви можете отримати доступ до нього, прочитавши textContentелемент за допомогою JavaScript і проаналізувавши його:

var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}

Я б запропонував помістити JSON в вбудований сценарій з функцією зворотного виклику (вид JSONP ):

<script>
someCallback({
    "unicorns": "awesome",
    "abc": [1, 2, 3]
});
</script>

Якщо сценарій виконання завантажується після документа, ви можете зберігати його десь, можливо, з додатковим аргументом ідентифікатора: someCallback("stuff", { ... });

Моєю рекомендацією було б зберігати дані JSON у зовнішніх .jsonфайлах, а потім отримувати ці файли через Ajax. Ви не вводите код CSS та JavaScript на веб-сторінку (вбудовану), то чому б це робити з JSON?

HTML5 включає <data>елемент збереження машиночитаних даних. В якості альтернативи, можливо, більш безпечної <script type="application/json">ви можете включити свої дані JSON всередині valueатрибута цього елемента.

const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);

console.log(data)

<data class="json-data" value='
  {
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "careful": "to escape &#39; quotes"
  }
'></data>

У цьому випадку вам потрібно замінити всі одиничні лапки на 'або з, "якщо ви вирішите додавати значення подвійними лапками. В іншому випадку ваші ризики XSS- атаки, як і інші відповіді.