Spesso nelle nostre applicazioni ci troviamo a gestire dei dati di tipo HTML, il cui contenuto non sia necessariamente solo del semplice testo, ma includa anche del markup.
Come comportamento di default, Blazor effettua automaticamente l'esacaping di queste stringhe, per evitare rischi di script injection. Per esempio, questo componente
<h4>@_someMarkup</h4> @code { private string _someMarkup = "<b>Questo testo</b> contiene <a href=\"https://aspitalia.com\">un link</a>"; }
produce un output come quello in figura:
Per segnalare quando è sicuro effettuare il rendering dell'HTML senza esacaping, Blazor utilizza un oggetto particolare denominato MarkupString. Possiamo sia utilizzarlo direttamente nelle proprietà dei nostri viewmodel
public class ProductViewModel { public MarkupString Description { get; set; } }
oppure effettuare il cast esplicito nei nostri componenti. L'esempio in alto quindi va riscritto in questa maniera.
<h4>@((MarkupString)_someMarkup)</h4> @code { private string _someMarkup = "<b>Questo testo</b> contiene <a href=\"https://aspitalia.com\">un link</a>"; }
Così facendo, otterremo il rendering del raw HTML come ci aspettiamo
Un ultima nota riguarda il fatto che, come spiegato all'inizio, renderizzare markup di origini non sicure può presentare diversi problemi di sicurezza. Pertanto dobbiamo utilizzare questa funzionalità con estrema cautela, e solo dove strettamente necessario.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Generare file per il download da Blazor WebAssembly
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Usare lo spread operator con i collection initializer in C#
Creare moduli CSS in React
Gestire i null nelle reactive form tipizzate di Angular
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Hosting di componenti WebAssembly in un'applicazione Blazor static
Evitare il flickering dei componenti nel prerender di Blazor 8
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Configurare policy CORS in Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Miglioramenti nell'accessibilità con Angular CDK