La mejor manera de almacenar JSON en un atributo HTML?

Dependiendo de dónde lo pongas,{[39]]}

• En un <div> como pidió, debe asegurarse de que el JSON no contenga especiales HTML que puedan iniciar una etiqueta, comentario HTML, doctype incrustado, etc. Necesita escapar al menos <, y & de tal manera que el carácter original no aparezca en la secuencia escapada.
• En los elementos <script> debe asegurarse de que el JSON no contenga una etiqueta final </script> o un límite de texto de escape: <!-- o -->.
• En caso de manejadores debe asegurarse de que el JSON conserve su significado incluso si tiene cosas que se parecen a entidades HTML y no rompe los límites de atributos (" o ').

Para los dos primeros casos (y para los analizadores JSON antiguos) debe codificar U+2028 y U+2029, ya que son caracteres de nueva línea en JavaScript, aunque están permitidos en cadenas sin codificar en JSON.

Para ser correcto, necesitas escapar \ y citar caracteres JSON y nunca es mala idea siempre codificar NUL.

Si el HTML se puede servir sin una codificación de contenido, debe codificar + para evitar ataques UTF-7.

En cualquier caso, la siguiente tabla de escape funcionará:

• NUL - > \u0000
• CR - > \n o \u000a
• LF - > \r o \u000d
• " -> \u0022
• & -> \u0026
• ' -> \u0027
• + -> \u002b
• / -> \/ o \u002f
• < -> \u003c
• > -> \u003e
• \ -> \\ o \u005c
• U+2028 -> \u2028
• U + 2029 - > \u2029

Así que el valor de la cadena JSON para el texto Hello, <World>! con una nueva línea al final sería "Hello, \u003cWorld\u003e!\r\n".

Otra forma de hacerlo es poner datos json dentro de la etiqueta <script>, pero no con type="text/javascript", sino con el tipo type="text/bootstrap" o type="text/json", para evitar la ejecución de javascript.

Entonces, en algún lugar de su programa, puede pedirlo de esta manera:

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

En el lado del servidor, puede hacer algo como esto (este ejemplo con php y twig):

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

Puedes usar knockoutjs,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

Knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Salida

Nombre: Jayson Apellido: Monterroso

Compruebe esto: http://learn.knockoutjs.com /

Otra opción es base64 codificar la cadena JSON y si necesita usarla en su javascript decodificarla con la función atob().

var data = JSON.parse(atob(base64EncodedJSON));

Nada elegante aquí. Desde PHP, ejecute la cadena JSON a través de htmlspecialchars para asegurarse de que no se puedan interpretar caracteres especiales como HTML. Desde Javascript, no es necesario escapar; simplemente establezca el atributo y estará listo.

Lo que puedes hacer es usar cdata alrededor de tu elemento/s de esta manera

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

Donde mydata es una cadena json sin procesar. Espero que esto te ayude a ti y a los demás.