Quando in Angular utilizziamo oggetti HTML che accettano un URL (come un tag iframe, o un tag img) capita di dover impostarne l'attributo src in binding con un valore proveniente da una configurazione, da un servizio o altro ancora. Mettere in binding la stringa dell'URL con l'attributo causa un errore di sicurezza in Angular. Per aggirare il problema dobbiamo validare la stringa farla considerare valida dal motore di Angular per poi inserirla in un oggetto SafeUrl.
Angular offre un servizio già pronto per processare la stringa: DomSanitizer. Questo servizio offre il metodo bypassSecurityTrustResourceUrl che permette di creare un oggetto SafeUrl partendo dalla stringa senza eseguire nessun controllo. Questo metodo è comodo quando la stringa proviene da una fonte sicura, ma espone ad attacchi di XSS se la stringa proviene dall'input di un utente.
export class HmiComponent implements OnInit { bindingUrl: SafeUrl; constructor(private sanitizer: DomSanitizer) { } ngOnInit() { this.bindingUrl = this.sanitizer.bypassSecurityTrustResourceUrl('http://www.google.it'/]); } }
Una volta ottenuto l'oggeto SafeUrl, possiamo metterlo in binding con l'attributo src come qualunque altro valore.
<iframe [src]="bindingUrl"></iframe>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la libreria Benchmark.NET per misurare le performance
Gestire undefined e partial nelle reactive forms di Angular
Usare le variabili per personalizzare gli stili CSS
Miglioramenti agli screen reader e al contrasto in Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Eseguire operazioni con timeout in React
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Aggiungere interattività lato server in Blazor 8
Limitare le richieste lato server con l'interactive routing di Blazor 8
Gestire i null nelle reactive form tipizzate di Angular
Implementare l'infinite scroll con QuickGrid in Blazor Server
Estrarre dati randomici da una lista di oggetti in C#
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Estrarre dati randomici da una lista di oggetti in C#
- Utilizzare un DataContext specifico per la modalità design time di Blend e Visual Studio nei controlli Silverlight
- Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps