Proje: Güvenli yorum uygulaması

JavaScript kursu · Uzman · Ders 31/63

5 derslik güvenli yorum projesine genel bakış: XSS-korunmalı render ve CSP.

Proje: Güvenli yorum uygulaması

Bu 5 derslik projede güvenli bir yorum uygulaması geliştireceğiz. Kullanıcı formdan yorumunu yazar; uygulama yorumu güvenli şekilde listeye ekler.

Adım adım kuracağımız yapı:

Yorum formu ve konteyner seçimi
Submit dinleyici ve input okuma
textContent ve escapeHtml ile XSS-korunmalı render
CSP meta etiketi ve script nonce
Uygulamayı başlatma ve input temizleme

Her ders önceki dersin çözümünün üzerine çıkar.

Proje yapısı

Uygulamamız iki parçadan oluşur: bir form ve bir konteyner. Formdan gelen metni güvenli şekilde konteynere ekleyeceğiz.

Güvenlik için iki katman kullanacağız:

textContent ile metni HTML olarak değil düz metin olarak yerleştirme
CSP meta etiketi ile yalnızca güvenli kaynaklardan script çalıştırma

Bu iki katman birlikte hem DOM enjeksiyonunu hem de script çalıştırmasını engeller.

Uygulama Konteyner ve form seç

Sayfada <div id="comments"> ve <form id="commentForm"> öğeleri hazır. commentsEl değişkenine #comments öğesini, commentForm değişkenine #commentForm öğesini document.querySelector ile seç.

Örnek çözümü göster

const commentsEl = document.querySelector("#comments");
const commentForm = document.querySelector("#commentForm");

Kendini test et

Hangi özellik XSS açığı yaratır?
```
el.____ = userInput;
```
- textContent
- createElement
- innerHTML
- appendChild
Cevabı göster

innerHTML — Doğru! innerHTML ham HTML yorumlar ve script çalıştırabilir.

Güvenli özelliği yaz

const p = document.createElement("p");
p.____ = userInput;

Cevabı göster

const p = document.createElement("p");
p.textContent = userInput;

Güvenlik terimlerini eşleştir

XSS

Kötü niyetli script enjeksiyonu
textContent

Düz metin yerleştirme
CSP

Script kaynak kısıtı
nonce

Tek kullanımlık değer

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

Proje: Güvenli yorum uygulaması