Mostrar Datos Dinámicos con th:text y th:utext

1. Uso de th:text

Descripción: th:text es un atributo de Thymeleaf que se utiliza para mostrar datos dinámicos de forma segura, es decir, escapando automáticamente caracteres peligrosos para evitar ataques XSS (cross-site scripting).

Cuando utilizas th:text, los datos se renderizan como texto, y cualquier contenido HTML dentro de los datos será escapado.

<p th:text="${mensaje}">Texto por defecto</p> <!-- Esto mostrará el valor del atributo "mensaje" -->

Por ejemplo, si el valor de mensaje es "Hola, Mundo", el navegador lo renderizará como Hola, <strong>Mundo</strong>, mostrando el texto sin formato.

2. Uso de th:utext

Descripción: th:utext es similar a th:text, pero permite que el contenido HTML dentro de los datos dinámicos se renderice sin ser escapado. Se debe usar con precaución, ya que puede introducir vulnerabilidades de seguridad si los datos no son confiables.

<p th:utext="${mensajeHTML}">Texto por defecto</p> <!-- Esto mostrará el contenido HTML dentro de "mensajeHTML" -->

Si el valor de mensajeHTML es "Hola, Mundo", el navegador lo renderizará correctamente como HTML, mostrando "Hola, Mundo" en negrita.

3. Ejemplo Completo

Aquí tienes un ejemplo completo de cómo se utilizan th:text y th:utext:

@Controller
public class MiControlador {

    @GetMapping("/ejemplo")
    public String ejemplo(Model model) {
        model.addAttribute("mensaje", "Hola, <strong>Mundo</strong>");
        model.addAttribute("mensajeHTML", "Hola, <strong>Mundo</strong>");
        return "ejemplo"; // Nombre de la vista Thymeleaf
    }
}

En la vista Thymeleaf, se renderizarían los datos dinámicos así:

<p th:text="${mensaje}"></p> <!-- Mostrará "Hola, &lt;strong&gt;Mundo&lt;/strong&gt;" -->
<p th:utext="${mensajeHTML}"></p> <!-- Mostrará "Hola, <strong>Mundo</strong>" en HTML -->