Лучшая практика для встраивания произвольного 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 даже рассматривает это использование:

"При использовании для включения блоков данных (в отличие от сценариев) данные должны быть встроены в строку, формат данных должен быть задан с использованием атрибута type, атрибут 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 в шпаргалке OWASP по предотвращению XSS.

Допустим, вы хотите включить этот 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- атак, как предлагали другие ответы.