Aprende cómo evitar que una función personalizada escape el valor retornado en Symfony 5.

Twig te permite crear y registrar funciones y filtros personalizados para implementar cosas que pueden no estar incluidas con las predeterminadas en Twig. Uno de los ejemplos más comunes de funciones auxiliares creadas en Twig es la función que imprime automáticamente una etiqueta IMG en la vista, como esta:

{{ image_tag("https://cdn.domain.com/myimage.jpg") }}

La función, en este caso, espera como primer argumento la URL de la imagen que se utilizará como src de la etiqueta de la imagen. El problema en sí es que la mayoría de los desarrolladores que crean tales funciones, también usarán el filtro raw para imprimir el contenido de la función de esta manera:

{{ image_tag("https://cdn.domain.com/myimage.jpg")|raw }}

Debido a que no implementaron la función personalizada correctamente, asi que sin el filtro raw, el HTML impreso se escaparía de esta manera:

<img src="https://cdn.domain.com/myimage.jpg" />

Como las entidades HTML están codificadas, no habrá imagen en la página sino texto sin formato. Para solucionarlo, simplemente usarías la etiqueta raw para eliminar el HTML y eso es todo, sin embargo, hay una forma más elegante de imprimir el HTML sin procesar sin usar el filtro adicional en la vista.

Deshabilitar el escape automático en funciones y filtros personalizados

Es posible deshabilitar el escape automático del valor devuelto de tu función Twig personalizada especificando la opción 'is_safe' en la declaración de la función:

<?php

// src/Twig/AppExtension.php
namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class AppExtension extends AbstractExtension {
    // ... 

    public function getFunctions() {
        return [
            new TwigFunction('function_name', [$this, 'localFunctionToUse'], [
                'is_safe' => [
                    'html'
                ]
            ]),
        ];
    }

    // ...
}

Ejemplo completo

La siguiente extensión muestra un ejemplo completo de cómo implementar la función mencionada de image_tag:

<?php

// src/Twig/AppExtension.php
namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class AppExtension extends AbstractExtension {
    public function getFunctions() {
        return [
            new TwigFunction('image_tag', [$this, 'image_tag'], [
                'is_safe' => [
                    'html'
                ]
            ]),
        ];
    }
    
    public function image_tag($imagesrc): string{
        return "<img src=\"{$imagesrc}\" />";
    }
}

Puedes aplicar el mismo principio si está utilizando un filtro personalizado.

¡Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. 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