¿Corregir el eco de html en js?

7

Un colega y yo estábamos discutiendo cómo hacer eco del HTML dentro del código javascript. Específicamente, en una situación similar a esta:

new Element('div', {
    html: '{long string of HTML goes here!}'
}.inject($('content'));

Los fragmentos cortos parecen funcionar bien en esta situación, pero ¿y si nos hiciéramos eco de un gran conjunto de datos? La línea se volvería muy larga y difícil de depurar (porque ¡¿quién se desplaza horizontalmente ?!)

Un problema también radica en el hecho de que, además de su longitud, todas las comillas utilizadas deben escaparse, especialmente si el código javascript se hace eco desde el lado del servidor, en cuyo caso se usará una de las comillas. arriba ", per se.

Una solución sería dividir la larga línea de código HTML:

new Element('div', {
    html:   '{long string of HTML goes here!}' +
            '{some more HTML goes here}' +
            '{and even more...}'
}.inject($('content'));

Otra solución incluida incluyó la inclusión de una barra de adición () en el servidor, que incluye un segundo archivo. Aunque supongo que también es posible definir todo el HTML que se incluirá en una variable php, y hacer eco cuando sea necesario:

<?php
    $html = addslashes('{html content}');
?>

new Element('div', {
    html: '<?=$html?>'
}.inject($('content'));

¿Cuál es el mejor método en términos de legibilidad, eficiencia y seguridad del código?

    
pregunta Julian H. Lam 14.07.2011 - 17:15

2 respuestas

7

El método de adición de barras NO es confiable. En su lugar, haz:

new Element('div', {
    html: <?= htmlspecialchars(json_encode($html)) ?>
}.inject($('content'));

Addlashes () es un método obsoleto para escapar de texto para el uso de SQL. No está pensado para Javascript. Para eso es JSON. Convierte tus datos PHP (variable simple, objeto, matriz, etc.) en lo que se garantiza que es un Javascript sintácticamente correcto.

JSON (o javascript) incrustado en HTML debe ser eliminado correctamente para HTML. Es por eso que está envuelto en htmlspecialchars() . Considere que JSON NO codificará < , > , & y otros porque son caracteres válidos en una cadena JSON entre comillas.

Sin embargo, ya que solo estás insertando un bloque de html en JS, podrías tener

<div id="seekrithiddenhtml" style="display: none">
<?= $html ?>
</div>

desde donde puedes hacer una clonación simple en javascript.

    
respondido por el Marc B 14.07.2011 - 17:27
1

Creo que siempre es mejor segregar el código y el contenido. Siempre que pueda evitar inyectar una copia de página literal en su fuente, hágalo. Una gran ventaja de esto es que le permitiría proporcionar acceso restringido para los editores de copia a los archivos que contienen la copia de la página, lo que significa que nunca estaría haciendo su trabajo y nunca se metería con su código. Dicho esto, no creo que almacenar la copia de la página en archivos sea el camino a seguir: recomendaría una base de datos siempre que sea posible para que pueda crear fácilmente una interfaz de usuario para la manipulación de copias. Luego, las referencias en su fuente son consistentes, abstractas y dinámicas.

    
respondido por el AlienWebguy 14.07.2011 - 17:20

Lea otras preguntas en las etiquetas