CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

CSP meta

HTML kursu · Uzman · Ders 26/39

<meta http-equiv="Content-Security-Policy"> temel kullanımını öğrenirsin.

Content-Security-Policy nedir?

Content-Security-Policy (CSP), tarayıcıya sayfanın hangi kaynaktan betik, görsel ve stil yükleyebileceğini söyler. Kötü amaçlı bir kod sayfaya enjekte edilse bile CSP, izin verilmeyen kaynaktan yüklenmesini engeller.

CSP bir HTTP başlığı olarak gönderilebileceği gibi meta etiketiyle HTML içine de yazılabilir. Bu projede meta yöntemini kullanacağız.

CSP'nin özü, default-src, img-src, style-src gibi yönerge listesidir.

meta http-equiv ile CSP ekle

CSP'yi HTML'ye eklemek için meta etiketinde http-equiv="Content-Security-Policy" yazılır. content özniteliği yönerge listesini taşır.

Örnek: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:;">

Burada default-src 'self' tüm kaynakların yalnızca aynı kökenden gelmesini söyler. 'self' tek tırnak içinde yazılmalı; tırnaksız self yanlış yorumlanır.

Uygulama CSP meta etiketini head'e ekle

Önceki dersin sayfasını al. <head> içine, viewport'tan sonra, bir CSP meta etiketi ekle:

  • http-equiv="Content-Security-Policy"
  • content içinde: default-src 'self', img-src 'self' data: ve style-src 'self' 'unsafe-inline'

'self' değerleri tek tırnakta olmalı.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'">
    <title>Güvenli Bank - Giriş</title>
  </head>
  <body>
    <h1>Güvenli Bank</h1>
    <p>Lütfen kullanıcı kodunuzla giriş yapınız.</p>
    <p><a href="https://yardim.guvenlibank.example/oturum-acma" target="_blank" rel="noopener noreferrer">Yardım merkezi</a></p>
  </body>
</html>

Kendini test et

  1. CSP hangi güvenlik tehdidini azaltır?

    • Sayfa açılış hızını ölçer
    • Zararlı kaynaktan betik yüklenmesini engeller
    • Sayfanın renk paletini belirler
    • Bağlantıların yeni sekmede açılmasını sağlar
    Cevabı göster

    Zararlı kaynaktan betik yüklenmesini engeller — Doğru. CSP, izin verilmeyen kaynaktan betik ve kaynak yüklenmesini engeller.

  2. default-src değerini tamamla

    <meta http-equiv="Content-Security-Policy" content="default-src ____; img-src 'self' data:; style-src 'self' 'unsafe-inline'">
    Cevabı göster 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'">

  3. CSP directive'i anlamıyla eşleştir

    default-src
    tüm kaynaklar için öntanımlı
    img-src
    görsel kaynakları
    style-src
    stil kaynakları
    script-src
    betik kaynakları

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