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
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Gestire la cancellazione di una richiesta in streaming da Blazor
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Gestire undefined e partial nelle reactive forms di Angular
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Paginare i risultati con QuickGrid in Blazor
Eseguire operazioni con timeout in React
Migliorare la sicurezza dei prompt con Azure AI Studio
Evitare la script injection nelle GitHub Actions
Miglioramenti nelle performance di Angular 16
Copiare automaticamente le secret tra più repository di GitHub