Proje sonu - Güvenli sayfa
Tüm güvenlik tekniklerini birleştirip dokümante edersin.
Son adım: giriş formu
Son adıma geldin. Sayfada banka adı, yönerge, harici yardım bağlantısı, CSP ve referrer policy var. Şimdi giriş formunu ekleyeceksin.
Form iki alandan oluşur: kullanıcı kodu ve şifre. Her alan için label + input çifti yazılır; label'ın for özniteliği, input'un id özniteliğiyle eşleşir. Altta button type="submit" ile gönderim düğmesi.
Formda güvenlik ve erişilebilirlik
Form eklerken güvenlik ve erişilebilirlik birlikte düşünülmeli:
method="post": şifre URL'de görünmesintype="password": şifre alanı maskelensinautocomplete="current-password": tarayıcı yalnızca doğru bağlamda doldursunrequired: boş gönderim engellensinlabel+for/id: ekran okuyucu doğru eşleşsin
Bu projede tüm güvenlik katmanları bir araya gelir.
Uygulama Giriş formunu ekle
Önceki dersin sayfasını al. <body>'de yardım bağlantısından sonra bir giriş formu ekle:
<form action="/oturum-ac" method="post">- İki
label + inputçifti:for/id="user"(type=text, autocomplete=username, required) vefor/id="password"(type=password, autocomplete=current-password, required) <button type="submit">Giriş yap</button>
Ö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'">
<meta name="referrer" content="strict-origin-when-cross-origin">
<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>
<form action="/oturum-ac" method="post">
<p>
<label for="user">Kullanıcı kodu</label>
<input id="user" name="user" type="text" autocomplete="username" required>
</p>
<p>
<label for="password">Şifre</label>
<input id="password" name="password" type="password" autocomplete="current-password" required>
</p>
<button type="submit">Giriş yap</button>
</form>
</body>
</html>Güvenli Bank sayfası tamam!
Tebrikler! Güvenli Bank giriş sayfasını tamamladın. Sayfa artık şunları içeriyor:
- Harici yardım bağlantısında
rel="noopener noreferrer" meta http-equiv="Content-Security-Policy"ile CSPmeta name="referrer"ile referrer policymethod="post",type="password"vefor/ideşleşmesiyle erişilebilir form
Bu dört katman, küçük bir sayfayı bile gerçek bir banka sayfası kadar güvenli yapar. Aynı kalıbı kendi sitelerinde de kullanabilirsin.
Kendini test et
-
Bir <label> etiketini <input> ile nasıl bağlarsın?
<label ...>...</label> <input ...>- label for="x" ve input id="x" ile
- label class="x" ve input class="x" ile
- label name="x" ve input id="x" ile
- label value="x" ve input name="x" ile
Cevabı göster
label for="x" ve input id="x" ile — Doğru. for ve id eşleşmesi etiketi alana bağlar; ekran okuyucu bunu okur.
-
Şifre gönderimi için method değerini tamamla
<form action="/oturum-ac" method="____"> <label for="user">Kullanıcı kodu</label> <input id="user" name="user" type="text"> </form>Cevabı göster
<form action="/oturum-ac" method="post"> <label for="user">Kullanıcı kodu</label> <input id="user" name="user" type="text"> </form> -
Form parçasını rolüyle eşleştir
- label for
- alanla etiketi bağlar
- input type=password
- şifreyi maskeler
- button type=submit
- formu gönderir
- autocomplete
- tarayıcı doldurma bağlamı