Blade: definir variables y mostrar HTML sin riesgo de XSS

Dos necesidades vuelven una y otra vez en una vista Blade: declarar ahí una variable y decidir si su contenido debe escaparse o mostrarse tal cual. Lo segundo no es un detalle de comodidad: es el punto exacto por donde se cuela un fallo XSS.

Publicado en el itinerario Desarrollo web. Esta guía cubre las dos cosas: hacer llegar una variable a la vista, declarar una sobre la marcha y elegir entre {{ }} y {!! !!} con conocimiento de causa. Ejemplos ejecutados en Laravel 13.30.1 con PHP 8.4.25.

Pasar una variable desde el controlador

Es la vía normal, y la que conviene priorizar: la vista muestra, el controlador decide. El segundo argumento de view() es un array asociativo en el que cada clave se convierte en una variable.

return view('dashboard', ['name' => 'Gekko']);

<p>Bienvenue {{ $name }} !</p>

Para mostrar una fecha procedente de un modelo, consulta la gestión de fechas con Carbon.

Cuando los valores ya están en variables PHP, compact() evita repetir los nombres:

$name    = 'Gekko';
$reseau  = 'gekkode';

return view('dashboard', compact('name', 'reseau'));

with() permite añadir una de paso, algo práctico cuando el valor se calcula en el último momento:

return view('dashboard', compact('name'))->with('extra', 'valeur ajoutée');

Si una variable puede faltar, dale un valor de reserva en la vista en lugar de añadir una condición:

{{ $inconnu ?? 'valeur par défaut' }}

Declarar una variable directamente en la vista

Cuando el valor solo sirve para mostrarlo, la directiva @php permite declararlo ahí mismo:

@php
    $nom = 'Gekko';
    $classe = $task->active ? 'is-active' : 'is-done';
@endphp

<p class="{{ $classe }}">Bonjour {{ $nom }}</p>

Las etiquetas PHP clásicas también funcionan, pero @php resulta más legible y coherente con el resto de la plantilla.

Dos directivas cubren casos vecinos sin pasar por una variable. @class construye un atributo de clase a partir de condiciones:

<div @class(['actif' => $task->active, 'masque' => $task->hidden])></div>

<!-- rendu quand active vaut true et hidden false -->
<div class="actif"></div>

Y @once garantiza que un bloque se renderice una sola vez, aunque la vista se incluya varias veces en la página:

@once
    <script src="/js/carte.js" defer></script>
@endonce

Mostrar HTML: {{ }} frente a {!! !!}

Blade compila {{ $variable }} en una llamada a la función e(), que escapa los caracteres especiales. Se ve en la vista compilada, dentro de storage/framework/views:

<?php echo e($nom); ?>

Consecuencia: si la variable contiene etiquetas, se muestran con todas sus letras en lugar de interpretarse.

@php $html = '<strong>gras</strong>'; @endphp

{{ $html }}     {{-- affiche : &lt;strong&gt;gras&lt;/strong&gt; --}}
{!! $html !!}   {{-- affiche : gras, en gras --}}

La sintaxis {!! !!} inserta el valor sin ninguna transformación. Es lo que hace falta para mostrar el cuerpo de un artículo redactado en HTML, y es también la puerta de entrada de una inyección de script si el valor viene de un usuario.

Para el contenido que llega de un formulario, que habrás tenido cuidado de proteger contra los envíos automatizados, limpia antes de mostrar. Una biblioteca como HTML Purifier aplica una lista blanca de etiquetas, en su defecto, guarda Markdown y conviértelo al renderizar, lo que te deja el control de las etiquetas generadas.

Los casos particulares útiles

Para pasar datos a JavaScript, @json produce un literal válido y escapado:

<script>
    const config = @json(['id' => $task->id, 'titre' => $task->title]);
</script>

Para mostrar llaves sin que Blade las interprete, por ejemplo en una plantilla destinada a un framework JavaScript, @verbatim neutraliza el bloque entero:

@verbatim
    <div id="app">{{ message }}</div>
@endverbatim

Para una sola expresión basta con precederla de una arroba: @{{ message }}.