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
Migrare una service connection a workload identity federation in Azure DevOps
Aggiungere interattività lato server in Blazor 8
L'evoluzione di Blazor in .NET 8
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Eseguire operazioni sui blob con Azure Storage Actions
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Disabilitare automaticamente un workflow di GitHub (parte 2)
Evitare il flickering dei componenti nel prerender di Blazor 8
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Estrarre dati randomici da una lista di oggetti in C#
Creare gruppi di client per Event Grid MQTT
Eseguire operazioni con timeout in React