CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Güvenlik paketi

HTML kursu · Uzman · Ders 38/39

CSP, referrer policy ve noopener içeren güvenli bir sayfa yazarsın.

Güvenlik başlığı paketi

Web güvenliğinin temel HTML katmanı üç öğeden oluşur. <meta http-equiv="Content-Security-Policy" content="..."> dış kaynak kısıtlarını bildirir; hangi betik ve stillerin yüklenebileceğini sınırlar. <meta name="referrer" content="..."> dış bağlantılardan gelen yönlendiren bilgisini denetler.

Dış bağlantılarda target="_blank" kullanılıyorsa rel="noopener noreferrer" eklenmeli; bu, yeni sekmenin opener nesnesine erişip sayfayı değiştirmesini ve yönlendiren bilgisini sızdırmasını engeller. Bu küçük paket tutarlı bir güvenlik zemini kurar.

Uygulama Güvenlik paketini yaz

Güvenli bir sayfa iskeleti yaz. head içine charset meta (charset="utf-8"), viewport meta (name="viewport"), CSP meta (http-equiv="Content-Security-Policy") ve referrer meta (name="referrer") ekle. body içine target="_blank" ile açılan ve rel="noopener noreferrer" içeren bir dış bağlantı koy.

Örnek çözümü göster 
head'de dört meta, body'de bir güvenli dış bağlantı olmalı.

Örnek çözüm:
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  <meta name="referrer" content="no-referrer">
  <title>Güvenli Sayfa</title>
</head>
<body>
  <a href="https://site.example" target="_blank" rel="noopener noreferrer">Dış bağlantı</a>
</body>

Kendini test et

  1. Hangi meta etiketi CSP bildirir?

    • <meta name="csp" content="...">
    • <meta http-equiv="Content-Security-Policy" content="...">
    • <meta charset="csp">
    • <meta rel="csp">
    Cevabı göster

    <meta http-equiv="Content-Security-Policy" content="..."> — Doğru. CSP, http-equiv="Content-Security-Policy" ile bildirilir.

  2. Dış bağlantıyı güvenli yap

    <a href="https://site.example" target="_blank" ____>Dış bağlantı</a>
    Cevabı göster 
    <a href="https://site.example" target="_blank" rel="noopener noreferrer">Dış bağlantı</a>

  3. Güvenlik kavramlarını eşleştir

    Content-Security-Policy
    Dış kaynak kısıtları
    name="referrer"
    Yönlendiren bilgi kısıtı
    noopener
    Opener erişimini engeller
    noreferrer
    Yönlendiren bilgisini gizler

  4. target="_blank" bağlantıyı güvenli yapmak için ne eklenmeli?

    • Sadece rel="noopener" yeter
    • crossorigin özniteliği
    • download özniteliği
    • rel="noopener noreferrer"
    Cevabı göster

    rel="noopener noreferrer" — Doğru. noopener opener'ı, noreferrer yönlendiren bilgisini birlikte keser.

Uzman bölümündeki tüm dersler

1 İleri erişilebilirlik

  1. WCAG ilkeleri
  2. Klavye navigasyonu
  3. Live regions
  4. Dialog ve modal
  5. Heading outline
  6. Özet - Erişilebilir widget

2 İleri ARIA desenleri

  1. ARIA roles
  2. States ve properties
  3. Grid ve tree
  4. Tabs ve accordion
  5. Menu ve menubar
  6. Özet - Erişilebilir tabpanel

3 Proje: Performanslı sayfa

  1. Proje: Performanslı sayfa
  2. Kritik kaynak sırası
  3. Görsel optimizasyonu
  4. Şablon ve noscript
  5. Proje sonu - Performans sayfası

4 Uluslararasılaştırma

  1. Lang ve dir
  2. Hreflang stratejisi
  3. Bidi ve bdo
  4. Rtl uyumlu işaretleme
  5. Çok dilli SEO
  6. Özet - Çok dilli sayfa

5 Proje: Güvenli sayfa

  1. Proje: Güvenli form sayfası
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Proje sonu - Güvenli sayfa

6 İleri web bileşenleri

  1. Custom element registry
  2. Slot ve shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM ve accessibility tree
  6. Özet - Bileşen kütüphanesi iskeleti

7 Uzman finali

  1. Meydan okuma - Erişilebilir dialog
  2. Meydan okuma - ARIA tabpanel
  3. Meydan okuma - Çok dilli RTL
  4. Meydan okuma - Güvenlik paketi
  5. Meydan okuma - Uzman projesi