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
Definire stili a livello di libreria in Angular
Limitare le richieste lato server con l'interactive routing di Blazor 8
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Hosting di componenti WebAssembly in un'applicazione Blazor static
Le novità di Angular: i miglioramenti alla CLI
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Short-circuiting della Pipeline in ASP.NET Core
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Sfruttare al massimo i topic space di Event Grid MQTT
Installare le Web App site extension tramite una pipeline di Azure DevOps
Generare file per il download da Blazor WebAssembly
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)