Я думаю о встраивании произвольного 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, я уже решил, что это лучшее решение для конкретной проблемы, с которой я столкнулся. Я просто ищу лучший способ сделать это.
javascript
json
dom
embedding
decoupling
Бен Ли
источник
источник
var
в javascript?</script><script>alert()</script><script>
внутри вашего объекта JSON, вы получите сюрпризы. Это небезопасно, если вы сначала не очистите данные.Ответы:
Я думаю, что ваш оригинальный метод лучше всего. Спецификация HTML5 даже рассматривает это использование:
Читайте здесь: http://dev.w3.org/html5/spec/Overview.html#the-script-element
Вы сделали именно это. Что не любить? Для данных атрибутов не требуется кодировки символов. Вы можете отформатировать его, если хотите. Он выразительный, и предполагаемое использование ясное. Это не похоже на взлом (например, как при использовании CSS для скрытия вашего элемента «носитель»). Это совершенно верно.
источник
script
теги.В качестве общего направления я бы попробовал вместо этого использовать атрибуты данных HTML5 . Нет ничего, что могло бы помешать вам ввести действительный JSON. например:
Если вы используете jQuery, то получить его так же просто, как:
источник
JSON.parse
работать не будет (по крайней мере, собственный Google Chrome JSON.parse не будет). Спецификация JSON требует двойных кавычек. Но это достаточно легко исправить с помощью таких сущностей, как...<unicorns>:...
."I am valid JSON"
при использовании двойных кавычек для тега или одинарных кавычек с одинарными кавычками в строке, например,data-unicorns='"My JSON's string"'
поскольку одинарные кавычки не экранируются при кодировании как JSON.Этот метод встраивания json в тег скрипта потенциально может вызвать проблемы с безопасностью. Предполагая, что данные json происходят из пользовательского ввода, можно создать член данных, который фактически вырвется из тега скрипта и позволит прямую инъекцию в dom. Посмотреть здесь:
http://jsfiddle.net/YmhZv/1/
Вот инъекция
Нет никакого способа избежать экранирования / кодирования.
источник
См. Правило № 3.1 в шпаргалке OWASP по предотвращению XSS.
Допустим, вы хотите включить этот JSON в HTML:
Создайте скрытый
<div>
в HTML. Затем экранируйте свой JSON, закодировав небезопасные объекты (например, &, <,>, ", 'и, /), и поместите его внутри элемента.Теперь вы можете получить к нему доступ, прочитав
textContent
элемент с помощью JavaScript и проанализировав его:источник
{name: 'Dwayne "The Rock" Johnson'}
. Но, вероятно, лучше всего использовать этот подход, поскольку ваша библиотека фреймворка / шаблонов, вероятно, уже включает безопасный способ кодирования HTML. Альтернативой было бы использование base64, которое безопасно для HTML и безопасно для помещения в строку JS. Кодировать / декодировать в JS легко, используя btoa () / atob (), и, вероятно, вам легко сделать это на стороне сервера.<data>
элемента и включение данных JSON вvalue
атрибут. Тогда вам нужно только избегать кавычек с помощью,"
если вы используете двойные кавычки для заключения данных или'
если вы используете одинарные кавычки (что, вероятно, лучше).Я бы предложил поместить JSON во встроенный скрипт с функцией обратного вызова (своего рода JSONP ):
Если исполняемый скрипт загружается после документа, вы можете где-нибудь его сохранить, возможно, с дополнительным аргументом идентификатора:
someCallback("stuff", { ... });
источник
Я бы рекомендовал хранить данные JSON во внешних
.json
файлах, а затем извлекать эти файлы через Ajax. Вы не помещаете код CSS и JavaScript на веб-страницу (встроенный), так зачем вам делать это с помощью JSON?источник
HTML5 включает
<data>
элемент для хранения машиночитаемых данных. В качестве - возможно, более безопасной - альтернативы<script type="application/json">
вам можно включить данные JSON вvalue
атрибут этого элемента.В этом случае вам нужно заменить все одинарные кавычки на
'
или на,"
если вы решите заключить значение в двойные кавычки. В противном случае ваш риск XSS- атак, как предлагали другие ответы.источник