Introduzione
Quando inseriamo immagini, file audio e video in una pagina HTML, non dobbiamo occuparci soltanto della loro visualizzazione. I contenuti multimediali possono infatti provenire da domini diversi, da CDN o da servizi esterni. In questi casi entrano in gioco aspetti importanti come il caricamento da origini differenti, la condivisione delle risorse tramite CORS, il controllo del referrer e la protezione dei contenuti.
Questo tutorial mostra come integrare media ospitati su un server esterno in modo più consapevole. L’obiettivo non è impedire completamente il download dei file, cosa generalmente impossibile per contenuti inviati al browser, ma ridurre configurazioni rischiose e comunicare al server solo le informazioni necessarie.
L’esempio utilizza una piccola pagina multimediale con un’immagine, un file audio e un video. Verranno usati attributi HTML come crossorigin, referrerpolicy e poster, oltre a indicazioni per la configurazione del server.
Codice completo
<!-- Immagine ospitata su una CDN esterna -->
<figure>
<img
src="https://cdn.esempio.it/media/paesaggio.webp"
alt="Paesaggio montano al tramonto"
width="1200"
height="800"
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
<figcaption>Panorama fotografato al tramonto.</figcaption>
</figure>
<!-- File audio proveniente da un altro dominio -->
<audio
controls
preload="metadata"
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
<source
src="https://media.esempio.it/audio/introduzione.mp3"
type="audio/mpeg"
>
<p>Il browser non supporta la riproduzione audio.</p>
</audio>
<!-- Video con immagine di anteprima e origine esterna -->
<video
controls
width="960"
height="540"
preload="metadata"
poster="https://cdn.esempio.it/media/anteprima-video.webp"
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
<source
src="https://media.esempio.it/video/presentazione.mp4"
type="video/mp4"
>
<p>Il browser non supporta la riproduzione video.</p>
</video>Spiegazione
Origini diverse e attributo crossorigin
Due risorse appartengono a origini diverse quando differiscono per protocollo, dominio o porta. Per esempio, una pagina caricata da www.esempio.it che richiede un video da media.esempio.it effettua una richiesta cross-origin.
L’attributo crossorigin="anonymous" indica che la richiesta non deve includere credenziali come cookie o certificati client. È una scelta adatta quando il file è pubblico e non richiede l’identità dell’utente. Il server remoto deve comunque autorizzare la richiesta tramite un’intestazione HTTP simile alla seguente:
Access-Control-Allow-Origin: https://www.esempio.itÈ preferibile indicare un’origine precisa invece di usare sempre l’asterisco. Il valore * può essere adeguato per risorse completamente pubbliche, ma non deve essere combinato con credenziali.
Controllare le informazioni inviate
Il browser può inviare al server l’URL della pagina di provenienza attraverso l’header HTTP Referer. Se l’URL contiene parametri riservati, questa informazione potrebbe rivelare dati non necessari. L’attributo referrerpolicy="no-referrer" impedisce l’invio del referrer per quella specifica risorsa.
Una politica meno restrittiva, ma spesso utile, è strict-origin-when-cross-origin. In questo caso il browser conserva il percorso completo per richieste interne, mentre verso un dominio esterno invia soltanto l’origine.
Il ruolo di poster e preload
L’attributo poster assegna al video un’immagine mostrata prima dell’avvio. Una buona anteprima comunica immediatamente il contenuto e impedisce di visualizzare un riquadro vuoto.
Con preload="metadata" chiediamo al browser di recuperare soltanto informazioni essenziali, come durata e dimensioni, senza scaricare necessariamente l’intero file. Non è una garanzia assoluta: il browser può decidere diversamente in base alla rete, al dispositivo e alle proprie strategie.
Best practice
- Servi sempre immagini, audio e video tramite HTTPS, soprattutto quando la pagina principale usa HTTPS.
- Configura CORS sul server che ospita i file, non soltanto nel documento HTML.
- Usa crossorigin="anonymous" per risorse pubbliche che non devono ricevere cookie.
- Non inserire token, password o informazioni private negli URL dei file multimediali.
- Imposta una referrerpolicy adeguata quando il percorso della pagina potrebbe contenere dati sensibili.
- Definisci sempre width e height per immagini e video, così il browser può riservare lo spazio necessario.
- Utilizza preload="metadata" per contenuti non essenziali e valuta con attenzione il consumo di banda.
- Configura il server per restituire il corretto Content-Type, ad esempio image/webp, audio/mpeg o video/mp4.
- Limita l’accesso ai file riservati tramite autenticazione lato server: gli attributi HTML non sostituiscono i controlli di autorizzazione.
- Ricorda che un media riprodotto dal browser può essere individuato dall’utente; HTML non è uno strumento per proteggere completamente i file dalla copia.
Durante i test, gli errori CORS possono essere osservati nella console degli strumenti per sviluppatori del browser. Un errore come “blocked by CORS policy” indica generalmente che il server non restituisce l’intestazione corretta oppure che l’origine richiesta non è autorizzata.
Riepilogo
Integrare media esterni in HTML richiede attenzione anche alla sicurezza. crossorigin stabilisce come il browser effettua una richiesta cross-origin, mentre referrerpolicy aiuta a limitare le informazioni condivise con il server remoto. Gli attributi poster e preload migliorano l’esperienza d’uso senza obbligare il browser a scaricare subito tutti i dati.
La protezione reale dipende comunque dalla configurazione del server: CORS, HTTPS, intestazioni HTTP, autenticazione e corretti tipi MIME devono lavorare insieme. HTML fornisce gli strumenti per descrivere la richiesta, ma non sostituisce una strategia completa di sicurezza.