Aprende a imprimir de forma segura una variable de cadena enviada desde Twig a JavaScript.

La interoperabilidad entre idiomas ha sido un problema ya que eso es posible. En las tecnologías web es bastante complicado, ya que hacer las cosas mal puede hacer que su aplicación web no esté disponible, por ejemplo, si envía una variable de cadena de PHP a JavaScript sin escapar correctamente, su JavaScript puede generar una excepción y su aplicación no funcionará.

Twig, el motor de plantillas no es la excepción para esta función y si imprime contenido inseguro en JavaScript, es posible que su aplicación tampoco funcione. Por ejemplo, considere el siguiente fragmento:

{% set username = "sdkcarlos" %}

{# Tenga en cuenta la cadena de varias líneas ! #}
{% set userdescription = " Hola,
Esta es mi descripcion
" %}

<script>
    var userName = "{{- username -}}";
    var description = "{{- userdescription-}}";
</script>

El fragmento de Twig anterior imprimirá el siguiente HTML:

<script>
    var userName = "sdkcarlos";
    var description = " Hello,
This is my description
";
</script>

Este código arrojará en cada navegador sano la siguiente excepción js : Error de sintaxis no detectado: token no válido o inesperado .

Imprimir de forma segura un valor Twig dentro de una cadena de JavaScript

Afortunadamente, Twig hace las cosas bastante fáciles para todos. Por defecto, no escapa el contenido al formato JS ya que no es necesario en todas partes, por eso es necesario indicar este comportamiento usando el escapefiltro en modo js. El filtro de escape escapa de una cadena para una inserción segura en la salida final. Admite diferentes estrategias de escape según el contexto de la plantilla. El efiltro es solo un alias para acortarlo, por lo que puede usar el que desee, ya que es el mismo:

{% set username = "sdkcarlos" %}

{# Note the multiline string ! #}
{% set userdescription = " Hello,
This is my description
" %}

<script>
    var userName = "{{- username|escape("js") -}}";
    var description = "{{- userdescription|escape("js") -}}";
    
    {# Or using e for a shorter syntax #}
    var userName = "{{- username|e("js") -}}";
    var description = "{{- userdescription|e("js") -}}"
</script>

Ahora, cada variable impresa con este filtro será segura para imprimir dentro de una cadena de JavaScript y no tendrá que preocuparse por si su aplicación fallará debido a que el contenido del usuario no es seguro. El fragmento anterior se imprimiría:

<script>
    var userName = "sdkcarlos";
    var description = "\x20Hello,\x0AThis\x20is\x20my\x20description\x0A";
</script>

Lo cual es totalmente válido dentro de un contexto de JavaScript. Como puede ver, la cadena contiene en la versión HTML caracteres extraños que son seguros para JavaScript y se convierten durante el análisis del código por parte del motor JavaScript a una versión legible por humanos, por ejemplo:

Escape Unsafe Content to a JavaScript string from twig

Imprimir matrices en json de forma segura

Otros desarrolladores, en lugar de cadenas simples, deciden pasar matrices completas con datos que pueden ser utilizados por JavaScript. Para hacer esto, puede usar el filtro json_encode que escapa automáticamente del contenido de la matriz para que JavaScript lo use de manera segura:

{% set myData = {
    "a": "Complex String Data",
    "b": 12345,
    "c": "Hello,
        Multiline String
    "
}%}

<script>
    var myData = {{ myData|json_encode() }};
</script>

Sin embargo, también debe usar el filtro sin procesar para imprimir la cadena como un literal en Twig; de lo contrario, las entidades html se convertirán e imprimirán, por ejemplo:

<script>
    var myData = {&quot;a&quot;:&quot;Complex String Data&quot;,&quot;b&quot;:12345,&quot;c&quot;:&quot;Hello,\n        Multiline String\n    &quot;};
</script>

Así que no olvides usar el filtro sin procesar después de json_encode:

{% set myData = {
    "a": "Complex String Data",
    "b": 12345,
    "c": "Hello,
        Multiline String
    "
}%}

<script>
    var myData = {{ myData|json_encode()|raw }};
</script>

Ahora, obtendríamos una matriz segura de Twig disponible en JavaScript:

<script>
    var myData = {"a":"Complex String Data","b":12345,"c":"Hello,\n        Multiline String\n    "};
</script>

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores