Introduzione
Collegare file CSS e JavaScript esterni a una pagina HTML è una pratica fondamentale per mantenere il progetto ordinato, riutilizzabile e facile da aggiornare. Separare la struttura HTML dalla presentazione e dal comportamento consente di lavorare su file più piccoli e specializzati, evitando pagine difficili da leggere e manutenere.
In questo tutorial analizzeremo un aspetto particolarmente utile in progetti reali: come includere risorse esterne usando il versionamento degli URL e l’attributo integrity. Il versionamento aiuta il browser a riconoscere quando un file è stato modificato, mentre Subresource Integrity, spesso abbreviato in SRI, permette di verificare che una risorsa caricata da un CDN non sia stata alterata.
Vedremo inoltre come organizzare correttamente i collegamenti CSS e JavaScript, come utilizzare gli script a moduli e quali attributi HTML scegliere in base al tipo di risorsa.
Codice completo
<!-- Foglio di stile principale con versione esplicita -->
<link
rel="stylesheet"
href="/assets/css/main.css?v=2.4.1"
>
<!-- Libreria CSS caricata da CDN e verificata con SRI -->
<link
rel="stylesheet"
href="https://cdn.example.com/ui-library/3.2.0/ui.min.css"
integrity="sha384-INSERISCI_HASH_REALE"
crossorigin="anonymous"
>
<main>
<h1>Dashboard personale</h1>
<button id="load-data" type="button">
Carica dati
</button>
<p id="status" role="status">Pronto</p>
</main>
<!-- Script applicativo gestito come modulo ES -->
<script
type="module"
src="/assets/js/app.js?v=2.4.1"
></script>
<!-- Libreria esterna con controllo di integrità -->
<script
src="https://cdn.example.com/chart-library/5.1.0/chart.min.js"
integrity="sha384-INSERISCI_HASH_REALE"
crossorigin="anonymous"
></script>Spiegazione
Versionare gli URL delle risorse
Nel codice, il parametro ?v=2.4.1 identifica la versione del file. Quando il browser scarica una risorsa, può conservarla nella cache per velocizzare le visite successive. Se il contenuto del file cambia ma l’URL rimane identico, alcuni utenti potrebbero continuare a usare una versione precedente.
Aggiungendo un identificatore di versione all’URL, il browser considera la risorsa diversa. Per esempio, questi due indirizzi vengono trattati come file distinti:
<link rel="stylesheet" href="/assets/css/main.css?v=2.4.1">
<link rel="stylesheet" href="/assets/css/main.css?v=2.4.2">Questa tecnica è chiamata cache busting. È semplice da applicare, ma il valore della versione deve essere aggiornato ogni volta che il file cambia. Nei progetti moderni, gli strumenti di build possono generare automaticamente nomi come main.a83f21.css, rendendo il sistema ancora più affidabile.
Usare Subresource Integrity
L’attributo integrity contiene un hash crittografico del file esterno. Il browser scarica la risorsa, calcola il suo hash e lo confronta con quello dichiarato nell’HTML. Se i valori non corrispondono, la risorsa viene rifiutata.
SRI è particolarmente utile quando si utilizzano librerie pubblicate su CDN. Se un CDN venisse compromesso e il file fosse sostituito con codice malevolo, il controllo di integrità impedirebbe il caricamento della versione modificata.
L’hash deve essere reale e generato a partire dal contenuto esatto del file. Un valore inventato, come quello usato nell’esempio, non consente il caricamento della risorsa. Per generare un hash valido si possono usare gli strumenti ufficiali del CDN, utility da riga di comando o generatori SRI affidabili.
Il ruolo di crossorigin
Quando una risorsa con SRI proviene da un dominio diverso da quello della pagina, è normalmente necessario aggiungere crossorigin="anonymous". Questo indica che la richiesta viene eseguita senza inviare credenziali come cookie o informazioni di autenticazione.
L’attributo è importante soprattutto per collegamenti a CDN esterni. Senza una configurazione CORS corretta sul server remoto, il browser potrebbe bloccare la risorsa anche se l’hash è corretto.
Script JavaScript come moduli
L’attributo type="module" consente di usare i moduli JavaScript moderni. Un file può importare funzioni da altri file e mantenere un’organizzazione più chiara:
// /assets/js/app.js
import { formatDate } from "./utils/date.js";
const button = document.querySelector("#load-data");
const status = document.querySelector("#status");
button.addEventListener("click", () => {
status.textContent = `Aggiornato il ${formatDate(new Date())}`;
});Gli script modulo vengono caricati in modo differito rispetto al parsing del documento e hanno uno scope separato. È comunque buona pratica inserire i riferimenti agli script in modo coerente e non duplicare lo stesso file nella pagina.
Best practice
- Usa percorsi organizzati: separa le risorse in cartelle come
/assets/css,/assets/jse/assets/img. - Versiona le risorse: aggiorna il parametro di versione oppure usa nomi generati automaticamente dal processo di build.
- Applica SRI alle risorse CDN: inserisci
integritysolo con hash verificati e aggiornali quando cambi versione della libreria. - Preferisci HTTPS: non caricare CSS o JavaScript esterni tramite HTTP da una pagina HTTPS, perché il browser potrebbe bloccare il contenuto misto.
- Evita duplicazioni: lo stesso foglio di stile o script non dovrebbe essere collegato più volte nella stessa pagina.
- Usa nomi descrittivi: file come
main.css,app.jsevalidation.jssono più comprensibili di nomi generici. - Controlla gli errori: verifica la scheda Network e la console degli strumenti per sviluppatori quando una risorsa non viene caricata.
- Limita le dipendenze esterne: ogni CDN aggiunge una dipendenza dalla rete e da un servizio di terze parti.
- Blocca versioni precise: evita URL che puntano sempre a
latest, perché un aggiornamento automatico potrebbe introdurre incompatibilità. - Considera una Content Security Policy: una CSP configurata correttamente può limitare le origini autorizzate per CSS, JavaScript e altre risorse.
Riepilogo
Per includere CSS e JavaScript esterni in modo professionale non basta aggiungere un semplice href o src. È importante pensare anche a cache, sicurezza e manutenzione. Il versionamento degli URL permette di distribuire rapidamente le modifiche evitando che il browser utilizzi file obsoleti. Subresource Integrity protegge invece l’integrità delle risorse ospitate su server esterni.
Per le librerie CDN è consigliabile bloccare una versione precisa, usare HTTPS, aggiungere integrity e specificare crossorigin="anonymous" quando necessario. Per il codice proprietario, i moduli JavaScript aiutano a separare responsabilità e dipendenze. Questa combinazione produce una struttura HTML più affidabile, sicura e adatta alla crescita del progetto.