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
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Elencare le container images installate in un cluster di Kubernetes
Reactive form tipizzati con FormBuilder in Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Inizializzare i container in Azure Container Apps
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Specificare il versioning nel path degli URL in ASP.NET Web API
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Sostituire la GitHub Action di login su private registry
Come migrare da una form non tipizzata a una form tipizzata in Angular
Assegnare un valore di default a un parametro di una lambda in C#