Tag Correlati alle Informazioni Meta
Questo articolo spiega i tag relativi alle meta-informazioni.
Spiega il tag <meta>, inclusi punti relativi a SEO, design responsivo e Content-Security-Policy.
YouTube Video
Tag Correlati alle Informazioni Meta
Tag <meta>
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">- Il tag
<meta>fornisce i metadati per il documento HTML. I metadati non sono visualizzati sulla pagina ma sono utilizzati dai motori di ricerca e dai browser. Il tag<meta>è utilizzato per le descrizioni delle pagine, le parole chiave, le informazioni sull'autore e le impostazioni di design responsive.
Tag <meta name="viewport">
1<meta name="viewport" content="width=device-width, initial-scale=1">- Il tag
<meta name="viewport">controlla il layout e la scalatura delle pagine web su diversi dispositivi. Viene comunemente utilizzato nel design responsivo per garantire una corretta visualizzazione sui dispositivi mobili.
Tag <meta name="description">
1<meta name="description" content="An example webpage">- Il tag
<meta name="description">è usato per descrivere brevemente il contenuto di una pagina web. I motori di ricerca utilizzano questa descrizione per visualizzare un riassunto della pagina nei risultati di ricerca.
Tag <meta name="keywords">
1<meta name="keywords" content="HTML, CSS, JavaScript">- Il tag
<meta name="keywords">fornisce un elenco di parole chiave rilevanti per il contenuto della pagina. I motori di ricerca usano queste parole chiave per comprendere meglio il contenuto della pagina.
Tag <meta name="author">
1<meta name="author" content="John Doe">- Il tag
<meta name="author">specifica l'autore della pagina web. Questa informazione è principalmente utilizzata dai motori di ricerca e strumenti per identificare accuratamente l'autore della pagina.
Tag <meta http-equiv="refresh">
1<meta http-equiv="refresh" content="5; url=https://example.com">- Il tag
<meta http-equiv="refresh">viene utilizzato per ricaricare automaticamente la pagina o reindirizzare a un altro URL dopo un tempo specificato. È utile per ricaricare la pagina o reindirizzare l'utente.
Tag <meta http-equiv="cache-control">
1<meta http-equiv="cache-control" content="no-cache">- Il tag
<meta http-equiv="cache-control">è utilizzato per controllare il comportamento di caching della pagina web. Può specificare se memorizzare nella cache la pagina o riconsiderarla al successivo accesso.
Tag <meta http-equiv="expires">
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">- Il tag
<meta http-equiv="expires">imposta una data di scadenza per il contenuto della pagina. Una volta trascorsa la data specificata, il contenuto diventa obsoleto e il browser è invitato a recuperare una nuova versione.
Tag <meta http-equiv="X-UA-Compatible">
1<meta http-equiv="X-UA-Compatible" content="IE=edge">- Il tag
<meta http-equiv="X-UA-Compatible">è utilizzato per specificare la modalità di compatibilità per Internet Explorer. Questo tag garantisce che il browser utilizzi la versione appropriata del motore di rendering per visualizzare la pagina.
Tag <meta http-equiv="content-security-policy">
L'attributo http-equiv="content-security-policy" in un tag meta HTML è una funzione per applicare regole di sicurezza specifiche nel browser per migliorare la sicurezza della pagina web. Utilizzando questo attributo, gli sviluppatori di siti web possono impostare politiche relative al caricamento delle risorse e all'esecuzione degli script per prevenire attacchi come XSS (Cross-Site Scripting) e l'iniezione di dati.
Cos'è Content-Security-Policy?
Content-Security-Policy (CSP) è un tipo di intestazione HTTP usata per controllare quali risorse esterne (immagini, script, fogli di stile, ecc.) una pagina web può caricare e quali tipi di codice possono essere eseguiti. Di solito viene inviato come intestazione HTTP, ma può essere definito anche all'interno di HTML utilizzando un tag meta. Questo metodo consente di specificare la CSP sul lato client invece di impostare intestazioni sul lato server.
Ad esempio, è possibile impostare il CSP nel tag meta HTML come segue:.
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">In questo esempio, sono impostate le seguenti politiche:
default-src 'self': Fondamentalmente, tutte le risorse sono caricate solo dalla stessa origine (se stessa).img-src https://example.com: Le immagini sono caricate solo dahttps://example.com.script-src 'self' https://apis.google.com: Gli script possono essere eseguiti solo dalla stessa origine o dahttps://apis.google.com.
Differenze tra http-equiv e intestazioni HTTP
Tipicamente, Content-Security-Policy viene inviata dal server al client come intestazione HTTP. Tuttavia, se viene impostata dal lato client utilizzando il tag meta, può essere scritta direttamente nell'HTML.
Tuttavia, ci sono alcune differenze importanti tra impostarla come intestazione HTTP e specificarla con un tag meta:
-
Priorità: Una CSP inviata tramite intestazioni HTTP ha la precedenza su quella specificata in un tag
meta. Ciò significa che se una CSP è impostata sul lato server, non sarà sovrascritta da un tagmetautilizzato sul lato client. -
Tempistica di applicazione: Una CSP specificata tramite intestazioni HTTP viene applicata prima che la pagina venga caricata. D'altra parte, una CSP specificata tramite un tag
metaviene applicata quando l'HTML viene analizzato, quindi le risorse potrebbero essere già state caricate.
Direttive disponibili in CSP
Nella CSP, vengono utilizzate varie direttive per specificare politiche che consentono o vietano il caricamento e l'esecuzione di determinati tipi di risorse. Le direttive tipiche includono le seguenti:.
- default-src: Specifica la politica di origine predefinita per tutte le risorse. Si applica alle risorse non specificate da altre direttive.
- script-src: Specifica l'origine per JavaScript. Per prevenire attacchi XSS, puoi limitare il caricamento degli script da siti esterni.
- style-src: Specifica l'origine per i CSS. Limitando il caricamento dei fogli di stile da fonti esterne, puoi prevenire attacchi ai tuoi stili del sito.
- img-src: Specifica l'origine per le immagini. Puoi limitare il caricamento delle immagini da fonti esterne.
- connect-src: Specifica gli URL consentiti per le XMLHttpRequests e le connessioni WebSocket. Questo garantisce la sicurezza delle comunicazioni con API esterne e WebSocket.
Combinando queste direttive, puoi creare politiche dettagliate per le risorse della tua pagina web.
Impostazioni pratiche di CSP per migliorare la sicurezza
Di seguito è riportato un esempio di impostazioni CSP per migliorare la sicurezza del tuo sito web. Questo può ridurre il rischio di attacchi XSS e fughe di dati.
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">Le seguenti politiche sono applicate con questa configurazione:
default-src 'self': Tutte le risorse vengono caricate solo dallo stesso origine.script-src 'self' https://trusted-cdn.com: Gli script sono caricati solo dallo stesso origine o da una CDN affidabile.object-src 'none': Il tagobjectnon è utilizzato. Questo serve a prevenire attacchi basati su Flash o plugin.style-src 'self': I fogli di stile vengono caricati solo dall'origine stessa.base-uri 'self': La base URL impostata dal tag<base>è limitata all'origine stessa.form-action 'self': La destinazione per l'invio del modulo è limitata all'origine stessa. Questo riduce il rischio che i dati del modulo vengano inviati a siti esterni.
Conclusione
Utilizzando http-equiv="content-security-policy" per definire il CSP all'interno dell'HTML, è possibile migliorare la sicurezza della pagina web. Un CSP configurato correttamente è uno strumento potente che riduce il rischio di attacchi XSS e fughe di dati e protegge il tuo sito web.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.