Prática recomendada para incorporar JSON arbitrário no DOM?

Estou pensando em incorporar JSON arbitrário no DOM assim:

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

Isso é semelhante à maneira como alguém pode armazenar um modelo HTML arbitrário no DOM para uso posterior com um mecanismo de modelo JavaScript. Nesse caso, poderíamos posteriormente recuperar o JSON e analisá-lo com:

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

Isso funciona , mas é a melhor maneira? Isso viola alguma prática recomendada ou padrão?

Observação: não estou procurando alternativas para armazenar JSON no DOM, já decidi que essa é a melhor solução para o problema específico que estou tendo. Só estou procurando a melhor maneira de fazer isso.

Acho que seu método original é o melhor. A especificação HTML5 ainda aborda esse uso:

"Quando usado para incluir blocos de dados (ao contrário de scripts), os dados devem ser incorporados inline, o formato dos dados deve ser fornecido usando o atributo type, o atributo src não deve ser especificado e o conteúdo do elemento script deve em conformidade com os requisitos definidos para o formato utilizado. "

Leia aqui: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Você fez exatamente isso. O que não é amar? Nenhuma codificação de caracteres necessária com dados de atributo. Você pode formatá-lo se quiser. É expressivo e o uso pretendido é claro. Não parece um hack (por exemplo, como usar CSS para ocultar seu elemento "transportador"). É perfeitamente válido.

Como orientação geral, eu tentaria usar atributos de dados HTML5 . Não há nada que o impeça de inserir um JSON válido. por exemplo:

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

Se você estiver usando jQuery, recuperá-lo é tão fácil quanto:

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

Este método de incorporação de json em uma tag de script tem um possível problema de segurança. Assumindo que os dados json originaram-se da entrada do usuário, é possível criar um membro de dados que, com efeito, sairá da tag do script e permitirá a injeção direta no dom. Veja aqui:

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

Aqui está a injeção

<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>

Simplesmente não há como escapar / codificar.

Consulte a regra nº 3.1 na folha de dicas de prevenção de XSS do OWASP.

Digamos que você queira incluir este JSON em HTML:

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

Crie um oculto <div>em HTML. Em seguida, escape de seu JSON codificando entidades não seguras (por exemplo, &, <,>, ", 'e, /) e coloque-o dentro do elemento.

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

Agora você pode acessá-lo lendo o textContentdo elemento usando JavaScript e analisando-o:

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

Eu sugiro colocar JSON em um script embutido com um retorno de chamada de função (tipo de JSONP ):

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

Se o script em execução for carregado após o documento, você poderá armazená-lo em algum lugar, possivelmente com um argumento identificador adicional: someCallback("stuff", { ... });

Minha recomendação seria manter os dados JSON em .jsonarquivos externos e, em seguida, recuperar esses arquivos via Ajax. Você não coloca código CSS e JavaScript na página da web (inline), então por que faria isso com JSON?

HTML5 inclui um <data>elemento para manter os dados legíveis por máquina. Como uma alternativa - talvez mais segura - para <script type="application/json">você pode incluir seus dados JSON dentro do valueatributo desse elemento.

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>

Nesse caso, você precisa substituir todas as aspas simples por 'ou por, "se optar por colocar o valor entre aspas duplas. Caso contrário, o risco de ataques XSS , como outras respostas sugeriram.