Articles
HTML'e Giriş
Meta Bilgilerle İlgili Etiketler

Meta Bilgilerle İlgili Etiketler

Bu makale, meta bilgilerle ilgili etiketleri açıklamaktadır.

<meta> etiketini, SEO, duyarlı tasarım ve Content-Security-Policy ile ilgili noktalar dahil olmak üzere açıklar.

YouTube Video

Meta Bilgilerle İlgili Etiketler

<meta> etiketi 

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <meta> etiketi, HTML dokümanı için meta veriler sağlar. Meta veriler sayfada görüntülenmez, ancak arama motorları ve tarayıcılar tarafından kullanılır. <meta> etiketi, sayfa açıklamaları, anahtar kelimeler, yazar bilgisi ve duyarlı tasarım ayarları için kullanılır.

<meta name="viewport"> etiketi 

1<meta name="viewport" content="width=device-width, initial-scale=1">
  • <meta name="viewport"> etiketi, web sayfalarının farklı cihazlardaki düzenini ve ölçeklendirmesini kontrol eder. Bu etiket, doğru şekilde görüntülenmesini sağlamak için genellikle duyarlı tasarımda kullanılır.

<meta name="description"> etiketi 

1<meta name="description" content="An example webpage">
  • <meta name="description"> etiketi, bir web sayfasının içeriğini kısaca tanımlamak için kullanılır. Arama motorları, arama sonuçlarında sayfanın bir özetini görüntülemek için bu açıklamayı kullanır.

<meta name="keywords"> etiketi 

1<meta name="keywords" content="HTML, CSS, JavaScript">
  • <meta name="keywords"> etiketi, sayfa içeriğiyle ilgili anahtar kelimelerin bir listesini sağlar. Arama motorları, sayfa içeriğini daha iyi anlamak için bu anahtar kelimeleri kullanır.

<meta name="author"> etiketi 

1<meta name="author" content="John Doe">
  • <meta name="author"> etiketi, web sayfasının yazarını belirtir. Bu bilgi, sayfanın yazarını doğru bir şekilde tanımlamak için genellikle arama motorları ve araçlar tarafından kullanılır.

<meta http-equiv="refresh"> etiketi 

1<meta http-equiv="refresh" content="5; url=https://example.com">
  • <meta http-equiv="refresh"> etiketi, belirtilen bir süre sonra otomatik olarak sayfayı yenilemek veya başka bir URL'ye yönlendirmek için kullanılır. Bu, sayfayı yeniden yüklemek veya kullanıcıyı yönlendirmek için faydalıdır.

<meta http-equiv="cache-control"> etiketi 

1<meta http-equiv="cache-control" content="no-cache">
  • <meta http-equiv="cache-control"> etiketi, web sayfasının önbellekleme davranışını kontrol etmek için kullanılır. Sayfanın önbelleğe alınıp alınmayacağını veya sonraki erişimlerde yeniden doğrulanacağını belirtebilir.

<meta http-equiv="expires"> etiketi 

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">
  • <meta http-equiv="expires"> etiketi, sayfa içeriği için bir son kullanma tarihi belirler. Belirtilen tarih geçtiğinde içerik eski hale gelir ve tarayıcı yeni bir versiyon almak üzere uyarılır.

<meta http-equiv="X-UA-Compatible"> etiketi 

1<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • <meta http-equiv="X-UA-Compatible"> etiketi, Internet Explorer için uyumluluk modunu belirlemek için kullanılır. Bu etiket, tarayıcının sayfayı görüntülemek için uygun işleme motoru sürümünü kullandığından emin olur.

<meta http-equiv="content-security-policy"> etiketi

HTML meta etiketindeki http-equiv="content-security-policy" özelliği, web sayfası güvenliğini artırmak için tarayıcıda belirli güvenlik kuralları uygulama işlevine sahiptir. Bu özelliği kullanarak, web sitesi geliştiricileri, XSS (Cross-Site Scripting) ve veri enjeksiyonu saldırılarını önlemek için kaynak yükleme ve komut dosyası çalıştırmayla ilgili politikalar oluşturabilirler.

Content-Security-Policy nedir?

Content-Security-Policy (CSP), bir web sayfasının hangi harici kaynakları (görseller, komut dosyaları, stil sayfaları vb.) yükleyebileceğini ve hangi tür kodların çalıştırılabileceğini kontrol etmek için kullanılan bir HTTP başlık türüdür. Genellikle bir HTTP başlığı olarak gönderilir, ancak HTML içinde bir meta etiketi kullanarak da tanımlanabilir. Bu yöntem, CSP'yi sunucu tarafında başlıklar ayarlamak yerine istemci tarafında belirtmeyi sağlar.

Örneğin, HTML meta etiketi içinde CSP'yi şu şekilde ayarlayabilirsiniz:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

Bu örnekte şu politikalar ayarlanmıştır:

  • default-src 'self': Temelde tüm kaynaklar yalnızca aynı kök (kendisi) üzerinden yüklenir.
  • img-src https://example.com: Görseller yalnızca https://example.com adresinden yüklenir.
  • script-src 'self' https://apis.google.com: Komut dosyaları yalnızca aynı kökten veya https://apis.google.com üzerinden çalıştırılabilir.

http-equiv ve HTTP başlıkları arasındaki farklar

Genellikle, Content-Security-Policy, sunucudan istemciye bir HTTP başlığı olarak gönderilir. Ancak, meta etiketi kullanılarak istemci tarafında ayarlanırsa, doğrudan HTML içinde yazılabilir.

Ancak, bir HTTP başlığı olarak ayarlamak ve bir meta etiketiyle belirlemek arasında bazı önemli farklar vardır:

  1. Öncelik: HTTP başlıkları aracılığıyla gönderilen bir CSP, bir meta etikette belirtilen CSP'ye göre önceliklidir. Bu, sunucu tarafında bir CSP ayarlandıysa, istemci tarafında kullanılan bir meta etiketi tarafından geçersiz kılınamayacağı anlamına gelir.

  2. Uygulama Zamanlaması: HTTP başlıkları aracılığıyla belirtilen bir CSP, sayfa yüklenmeden önce uygulanır. Diğer taraftan, meta etiketiyle belirtilen bir CSP, HTML analiz edildiğinde uygulanır, bu nedenle kaynaklar zaten yüklenmiş olabilir.

CSP'de Bulunan Yönergeler

CSP'de, belirli türdeki kaynakların yüklenmesine ve çalıştırılmasına izin veren veya yasaklayan politikaları belirtmek için çeşitli yönergeler kullanılır. Tipik yönergeler şunlardır:.

  • default-src: Tüm kaynaklar için varsayılan kaynak politikasını belirtir. Bu, diğer yönergeler tarafından belirtilmeyen kaynaklar için geçerlidir.
  • script-src: JavaScript için kaynağı belirtir. XSS saldırılarını önlemek için, harici sitelerden gelen betiklerin yüklenmesini kısıtlayabilirsiniz.
  • style-src: CSS için kaynağı belirtir. Harici kaynaklardan gelen stil dosyalarının yüklenmesini kısıtlayarak, sitenizin stillerine yönelik saldırıları önleyebilirsiniz.
  • img-src: Görseller için kaynağı belirtir. Harici kaynaklardan gelen görsellerin yüklenmesini kısıtlayabilirsiniz.
  • connect-src: XMLHttpRequest ve WebSocket bağlantıları için izin verilen URL'leri belirtir. Bu, harici API ve WebSocket iletişimlerinin güvenliğini sağlar.

Bu yönergeleri birleştirerek web sayfanızdaki kaynaklar için ayrıntılı politikalar oluşturabilirsiniz.

Güvenliği artırmak için pratik CSP ayarları

Aşağıda, sitenizin güvenliğini artırmak için bir CSP ayarları örneği bulunmaktadır. Bu, XSS saldırıları ve veri sızıntısı riskini azaltabilir.

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';">

Bu yapılandırma ile aşağıdaki politikalar uygulanır:

  • default-src 'self': Tüm kaynaklar yalnızca aynı kaynaktan yüklenir.
  • script-src 'self' https://trusted-cdn.com: Betikler yalnızca aynı kaynaktan veya güvenilir bir CDN'den yüklenir.
  • object-src 'none': object etiketi kullanılmaz. Bu, Flash veya eklenti tabanlı saldırıları önlemek içindir.
  • style-src 'self': Stil dosyaları yalnızca kaynağın kendisinden yüklenir.
  • base-uri 'self': <base> etiketinin belirlediği URL temeli sadece orijinin kendisiyle sınırlandırılmıştır.
  • form-action 'self': Form gönderim hedefi sadece orijinin kendisiyle sınırlandırılmıştır. Bu, form verilerinin harici sitelere gönderilme riskini azaltır.

Sonuç

http-equiv="content-security-policy" kullanarak HTML içinde CSP tanımlayarak, web sayfasının güvenliğini artırmak mümkündür. Doğru yapılandırılmış bir CSP, XSS saldırıları ve veri sızıntısı riskini azaltan ve web sitenizi koruyan güçlü bir araçtır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Başlık bölümünde kullanılan etiketlerHTML'deki Son Eğilimler