Proje: Güvenli form sayfası
5 derslik projenin genel bakışı: güvenlik odaklı form sayfası.
Proje: Güvenli Bank giriş sayfası
Bu 5 derslik projede Güvenli Bank müşteri giriş sayfasını sıfırdan yapacaksın. Her derste sayfaya bir güvenlik parçası ekleyecek, son derste erişilebilir bir giriş formuyla tamamlayacaksın.
Projede şu teknikleri kullanacaksın:
- HTML5 belge iskeleti ve
headtemel etiketleri - Harici bağlantıda
target="_blank"ilerel="noopener noreferrer" meta http-equiv="Content-Security-Policy"ile CSPmeta name="referrer"ile referrer denetimi- Erişilebilir form:
label+input+button
Hazırsan başlayalım.
Proje yol haritası
Her ders bir parça ekler ve sonraki dersin başlangıç kodu, önceki dersin çözümünü içerir. Böylece sayfa adım adım büyür.
- 1. ders: Boş iskelet ve başlık
- 2. ders: Harici yardım bağlantısı ve
rel - 3. ders: CSP meta etiketi
- 4. ders: Referrer policy meta etiketi
- 5. ders: Giriş formu ve son kontrol
Bir dersi atlayıp diğerine geçemezsin; başlangıç kodu zinciri birikimlidir.
Hedef sayfada ne olacak?
Hedef sayfa bir banka giriş ekranı. Üstte banka adı ve kısa bir yönerge; altta harici yardım bağlantısı ve giriş formu yer alacak.
Arka planda üç güvenlik katmanı çalışır: rel="noopener noreferrer" dış bağlantıyı izole eder, CSP zararlı kaynaktan betik yüklemeyi engeller, referrer policy çapraz isteklerde origin sızıntısını sınırlar. Bu üçü görünmeyen ama kritik katmanlardır; kullanıcı görmese de tarayıcı bunlara bakar.
Son derste tüm parçaları birleştirip formu ekleyeceğiz.
Uygulama Boş iskelet ve başlıkla başla
Projeye başlarken HTML5 iskeletini yaz. İçinde şunlar olsun:
<!DOCTYPE html><html lang="tr"><head>içinde meta charset=utf-8, viewport (width=device-width, initial-scale=1) ve title (içeriği Güvenli Bank - Giriş)<body>içinde h1 (içeriği Güvenli Bank) ve bir p yönerge paragrafı (ör. "Lütfen kullanıcı kodunuzla giriş yapınız.")
Ö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">
<title>Güvenli Bank - Giriş</title>
</head>
<body>
<h1>Güvenli Bank</h1>
<p>Lütfen kullanıcı kodunuzla giriş yapınız.</p>
</body>
</html>Kendini test et
-
Bu projede 2. dersin başlangıç kodu genelde ne içerir?
- 1. dersin çözümünü ve 2. dersin yeni parçası için kısa bir yorum
- Tamamen boş bir sayfa
- Yalnızca DOCTYPE satırı
- Yalnızca 2. dersin yeni eklenen parçası
Cevabı göster
1. dersin çözümünü ve 2. dersin yeni parçası için kısa bir yorum — Doğru. Başlangıç kodu önceki çözümü taşır, böylece sayfa adım adım büyür.
-
Dersleri ekledikleri parçayla eşleştir
- 1. ders
- Boş iskelet ve başlık
- 2. ders
- Harici yardım bağlantısı
- 3. ders
- CSP meta etiketi
- 4. ders
- Referrer policy meta
- 5. ders
- Giriş formu