React Uygulamaları için İçerik Güvenliği Politikası

İçerik Güvenliği Politikası (CSP), tarayıcıya hangi içerik kaynaklarının güvenilir olduğunu bildiren bir HTTP yanıt üst bilgisidir. Hangi betiklerin, stillerin, görsellerin ve yazı tiplerinin yüklenmesine izin verildiğini tam olarak belirterek CSP, bir XSS açığı saldırganın sayfaya HTML enjekte etmesine izin verse bile enjekte edilmiş kötü amaçlı içeriğin çalıştırılmasını önler.

default-src 'self' temel kuralı belirler: tüm kaynak türleri (betikler, stiller, görseller, yazı tipleri, çerçeveler) yalnızca aynı kaynaktan yüklenebilir. script-src 'self' betik yüklemeyi aynı kaynakla sınırlandırır ve açıkça listelenmedikleri sürece harici CDN'lerden gelen betikleri engeller. Bu iki yönerge birlikte kısıtlayıcı bir CSP'nin temelini oluşturur.

eval(), bir dizeyi çalışma zamanında çalıştırılabilir koda dönüştürür — XSS yüklerinin tam olarak ihtiyaç duyduğu şey budur. script-src 'self' içeren (ancak 'unsafe-eval' içermeyen) bir CSP, eval() işlevini ve new Function() ile setTimeout(string) gibi ilişkili işlevleri engeller. Bu, önemli bir XSS yükü çalıştırma sınıfını ortadan kaldırır.

'strict-dynamic' yönergesinin script-src içindeki kullanımı, hâlihazırda güvenilen betikler tarafından yüklenen betiklere güven verir. Bu, her CDN URL'sini izin verilenler listesine eklemenizi gerektirmeden paketleyiciler tarafından kullanılan dinamik betik yükleme biçimlerini mümkün kılar. Güvenilen bir betik ek betikler yükleyebilir ve bu betikler de güveni devralır.

Uygulamanızın belirli bir satır içi betiğe (örneğin bir analiz başlatma kod parçacığına) ihtiyacı varsa, betiğin SHA-256 özetini hesaplayıp 'sha256-base64hash' değerini script-src yönergesine ekleyebilirsiniz. Yalnızca tam olarak bu özetle eşleşen betiklerin satır içinde çalıştırılmasına izin verilir. Saldırgan tarafından enjekte edilen herhangi bir betiğin özeti farklı olacağından betik engellenir.

Tek kullanımlık sayı, sunucu tarafından her istek için oluşturulan kriptografik olarak rastgele bir değerdir. Sunucu, bu sayıyı hem betik etiketine (<script nonce="abc123">) hem de CSP üst bilgisine (script-src 'nonce-abc123') ekler. Yalnızca doğru sayıyı taşıyan betikler çalıştırılır. Saldırganlar bu sayıyı öngöremeyeceğinden enjekte edilen betikler bu sayıyı kullanamaz.

CSP, report-uri /csp-violation-endpoint veya daha yeni report-to yönergesi aracılığıyla ihlal raporlamasını destekler. Tarayıcı bir kaynağı CSP nedeniyle engellediğinde uç noktaya bir JSON raporu gönderir. Bu raporları izlemek, hem meşru yapılandırma sorunlarını hem de etkin saldırı girişimlerini belirlemenize yardımcı olur.

Next.js'te CSP üst bilgilerini ara yazılıma ekleyiniz: middleware.ts oluşturunuz, bir tek kullanımlık sayı üretiniz, Content-Security-Policy üst bilgisini ayarlayınız ve bu sayıyı bir yanıt üst bilgisi aracılığıyla sayfaya aktarınız. Sayfa düzeni, tek kullanımlık sayıyı üst bilgiden okur ve bunu tüm satır içi betiklere ve stil etiketlerine uygular.

Content-Security-Policy-Report-Only, sınama modudur: tarayıcı hiçbir şeyi zorunlu olarak uygulamaz, ancak engellenecek her şey için ihlal raporları gönderir. Önce Rapor Yalnızca modunda dağıtım yapınız, tüm ihlalleri düzeltiniz, ardından uygulamayı bozmaktan kaçınmak için zorlayıcı Content-Security-Policy üst bilgisine geçiniz.

CSP bir kaynağı engellediğinde Chrome DevTools konsolu, engellenen URL'yi ve ihlal edilen yönergeyi belirten kırmızı bir hata iletisi gösterir. Bu iletiler geliştirme ve sınama sırasında çok değerlidir. Her ihlal; politikayı düzelterek, kaynağı izin verilen bir konuma taşıyarak veya tek kullanımlık sayı ya da özet kullanarak çözülmelidir.

Uygulamaya yönelik bir React SPA CSP'si: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none' ayrıca uygulamanızın çerçevelere gömülmesini engelleyerek tıklama hırsızlığını da önler.

İçerik Güvenliği Politikasındaki script-src 'self' neyi önler?

CSP, güvenilir içerik kaynaklarını bildiren bir HTTP üst bilgisidir. default-src 'self' ve script-src 'self', harici betikleri ve eval'i engeller. Satır içi betiklere özetler veya tek kullanımlık sayılar aracılığıyla izin verilir. 'strict-dynamic' dinamik betik yüklemeyi destekler. Uygulamayı zorlamadan önce sınamak için Content-Security-Policy-Report-Only kullanınız. Next.js, CSP'yi ara yazılım aracılığıyla uygular. DevTools konsolu ihlalleri gerçek zamanlı olarak gösterir.