Web Güvenlik Politikası Uygulaması: JavaScript İçerik Güvenliği Yönergeleri

Günümüzün birbirine bağlı dijital dünyasında, web uygulama güvenliği her şeyden önemlidir. Siteler arası betik çalıştırma (XSS) saldırılarını ve diğer kod enjeksiyonu güvenlik açıklarını azaltmanın en etkili yöntemlerinden biri İçerik Güvenliği Politikası (CSP) uygulamaktır. Bu kapsamlı rehber, özellikle JavaScript içerik güvenliği yönergelerine odaklanarak CSP'nin inceliklerini ele almaktadır.

İçerik Güvenliği Politikası (CSP) Nedir?

İçerik Güvenliği Politikası (CSP), web sitesi yöneticilerinin, kullanıcı aracısının belirli bir sayfa için yüklemesine izin verilen kaynakları kontrol etmesini sağlayan bir HTTP yanıt başlığıdır. Esasen betiklerin, stil sayfalarının, resimlerin, yazı tiplerinin ve diğer kaynakların kökenlerini belirten bir beyaz listedir. Bir CSP tanımlayarak, tarayıcının saldırganlar tarafından enjekte edilen kötü amaçlı kodu çalıştırmasını önleyebilir, böylece XSS saldırıları riskini önemli ölçüde azaltabilirsiniz.

CSP, "varsayılan olarak reddetme" ilkesiyle çalışır, yani varsayılan olarak tarayıcı, politikada açıkça izin verilmeyen tüm kaynakları engeller. Bu yaklaşım, saldırı yüzeyini etkili bir şekilde sınırlar ve web uygulamanızı çeşitli tehditlere karşı korur.

CSP, JavaScript Güvenliği İçin Neden Önemlidir?

JavaScript, istemci taraflı bir betik dili olması nedeniyle, kötü amaçlı kod enjekte etmeye çalışan saldırganlar için birincil hedeftir. Saldırganların diğer kullanıcılar tarafından görüntülenen web sitelerine kötü amaçlı betikler enjekte ettiği XSS saldırıları yaygın bir tehdittir. CSP, JavaScript kodunun hangi kaynaklardan yürütülebileceğini kontrol ederek XSS saldırılarını azaltmada özellikle etkilidir.

CSP olmadan, başarılı bir XSS saldırısı bir saldırganın şunları yapmasına olanak tanıyabilir:

• Kullanıcı çerezlerini ve oturum anahtarlarını çalmak.
• Web sitesinin görünümünü bozmak.
• Kullanıcıları kötü amaçlı web sitelerine yönlendirmek.
• Kullanıcının tarayıcısına kötü amaçlı yazılım enjekte etmek.
• Hassas verilere yetkisiz erişim sağlamak.

CSP uygulayarak, tarayıcının yetkisiz JavaScript kodunu çalıştırmasını önleyerek bu saldırıların riskini önemli ölçüde azaltabilirsiniz.

JavaScript Güvenliği İçin Temel CSP Direktifleri

CSP direktifleri, izin verilen kaynak kaynaklarını tanımlayan kurallardır. JavaScript'in güvenliğini sağlamak için özellikle ilgili olan birkaç direktif vardır:

script-src

script-src direktifi, JavaScript kodunun hangi konumlardan yüklenebileceğini kontrol eder. Bu, JavaScript güvenliği için tartışmasız en önemli direktiftir. İşte bazı yaygın değerler:

• 'self': Belgeyle aynı kökenden gelen betiklere izin verir. Bu genellikle iyi bir başlangıç noktasıdır.
• 'none': Tüm betikleri engeller. Sayfanız herhangi bir JavaScript gerektirmiyorsa bunu kullanın.
• 'unsafe-inline': Satır içi betiklere (<script> etiketleri içindeki betikler) ve olay işleyicilere (ör. onclick) izin verir. CSP'yi önemli ölçüde zayıflattığı için bunu son derece dikkatli kullanın.
• 'unsafe-eval': eval() ve Function() gibi ilgili işlevlerin kullanılmasına izin verir. Güvenlik riskleri nedeniyle mümkün olduğunca kaçınılmalıdır.
• https://example.com: Belirli bir alan adından gelen betiklere izin verir. Kesin olun ve yalnızca güvenilir alan adlarına izin verin.
• 'nonce-value': Belirli bir kriptografik nonce özniteliğine sahip satır içi betiklere izin verir. Bu, 'unsafe-inline' için daha güvenli bir alternatiftir.
• 'sha256-hash': Belirli bir SHA256 özetine sahip satır içi betiklere izin verir. Bu, 'unsafe-inline' için başka bir daha güvenli alternatiftir.

Örnek:

script-src 'self' https://cdn.example.com;

Bu politika, aynı kökenden ve https://cdn.example.com adresinden gelen betiklere izin verir.

default-src

default-src direktifi, diğer getirme direktifleri için bir yedek görevi görür. Belirli bir direktif (ör. script-src, img-src) tanımlanmamışsa, default-src politikası uygulanır. Beklenmeyen kaynak yükleme riskini en aza indirmek için kısıtlayıcı bir default-src ayarlamak iyi bir uygulamadır.

Örnek:

default-src 'self';

Bu politika, varsayılan olarak aynı kökenden gelen kaynaklara izin verir. Daha spesifik bir direktif izin vermedikçe diğer tüm kaynak türleri engellenecektir.

style-src

Öncelikli olarak CSS kaynaklarını kontrol etmek için olsa da, CSS'niz istismar edilebilecek ifadeler veya özellikler içeriyorsa style-src direktifi JavaScript güvenliğini dolaylı olarak etkileyebilir. script-src'e benzer şekilde, stil sayfalarınızın kaynaklarını kısıtlamalısınız.

Örnek:

style-src 'self' https://fonts.googleapis.com;

Bu politika, aynı kökenden ve Google Fonts'tan gelen stil sayfalarına izin verir.

object-src

object-src direktifi, Flash gibi eklentilerin kaynaklarını kontrol eder. Flash daha az yaygın hale gelse de, kötü amaçlı içeriğin yüklenmesini önlemek için eklentilerin kaynaklarını kısıtlamak hala önemlidir. Genellikle, eklentiler için özel bir ihtiyacınız olmadıkça bunu 'none' olarak ayarlamanız önerilir.

Örnek:

object-src 'none';

Bu politika tüm eklentileri engeller.

JavaScript ile CSP Uygulamak İçin En İyi Uygulamalar

CSP'yi etkili bir şekilde uygulamak, dikkatli bir planlama ve değerlendirme gerektirir. İşte izlenmesi gereken bazı en iyi uygulamalar:

1. Yalnızca Raporlama Politikası ile Başlayın

Bir CSP'yi zorunlu kılmadan önce, yalnızca raporlama (report-only) politikasıyla başlamanız şiddetle tavsiye edilir. Bu, herhangi bir kaynağı engellemeden politikanızın etkilerini izlemenizi sağlar. Yalnızca raporlama politikasını tanımlamak için Content-Security-Policy-Report-Only başlığını kullanabilirsiniz. Politika ihlalleri, report-uri direktifi kullanılarak belirtilen bir URI'ye rapor edilir.

Örnek:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint;

Bu politika, herhangi bir kaynağı engellemeden ihlalleri /csp-report-endpoint adresine bildirir.

2. 'unsafe-inline' ve 'unsafe-eval' Kullanımından Kaçının

Daha önce de belirtildiği gibi, 'unsafe-inline' ve 'unsafe-eval' CSP'yi önemli ölçüde zayıflatır ve mümkün olduğunca kaçınılmalıdır. Satır içi betikler ve eval(), XSS saldırıları için yaygın hedeflerdir. Satır içi betikler kullanmanız gerekiyorsa, bunun yerine nonce veya hash kullanmayı düşünün.

3. Satır İçi Betikler İçin Nonce veya Hash Kullanın

Nonce ve hash'ler, satır içi betiklere izin vermek için daha güvenli bir yol sağlar. Nonce, <script> etiketine eklenen ve CSP başlığına dahil edilen rastgele, tek kullanımlık bir dizedir. Hash, betik içeriğinin yine CSP başlığına dahil edilen kriptografik bir özetidir.

Nonce Kullanarak Örnek:

HTML:

<script nonce="randomNonceValue">console.log('Satır içi betik');</script>

CSP Başlığı:

script-src 'self' 'nonce-randomNonceValue';

Hash Kullanarak Örnek:

HTML:

<script>console.log('Satır içi betik');</script>

CSP Başlığı:

script-src 'self' 'sha256-uniqueHashValue'; (`uniqueHashValue` değerini betik içeriğinin gerçek SHA256 özetiyle değiştirin)

Not: Betik için doğru özeti oluşturma işlemi, derleme araçları veya sunucu tarafı kod kullanılarak otomatikleştirilebilir. Ayrıca, betik içeriğindeki herhangi bir değişikliğin özetin yeniden hesaplanmasını ve güncellenmesini gerektireceğini unutmayın.

4. Kökenleri Belirtirken Spesifik Olun

CSP direktiflerinizde joker karakterler (*) kullanmaktan kaçının. Bunun yerine, izin vermek istediğiniz tam kökenleri belirtin. Bu, yanlışlıkla güvenilmeyen kaynaklara izin verme riskini en aza indirir.

Örnek:

Bunun yerine:

script-src *; (Bu kesinlikle önerilmez)

Bunu kullanın:

script-src 'self' https://cdn.example.com https://api.example.com;

5. CSP'nizi Düzenli Olarak Gözden Geçirin ve Güncelleyin

CSP'niz, web uygulamanızdaki değişiklikleri ve gelişen tehdit ortamını yansıtacak şekilde düzenli olarak gözden geçirilmeli ve güncellenmelidir. Yeni özellikler ekledikçe veya yeni hizmetlerle entegre oldukça, gerekli kaynaklara izin vermek için CSP'nizi ayarlamanız gerekebilir.

6. Bir CSP Oluşturucu veya Yönetim Aracı Kullanın

Çeşitli çevrimiçi araçlar ve tarayıcı eklentileri, CSP'nizi oluşturmanıza ve yönetmenize yardımcı olabilir. Bu araçlar, güçlü bir CSP oluşturma ve sürdürme sürecini basitleştirebilir.

7. CSP'nizi Kapsamlı Bir Şekilde Test Edin

CSP'nizi uyguladıktan veya güncelledikten sonra, tüm kaynakların doğru bir şekilde yüklendiğinden ve hiçbir işlevselliğin bozulmadığından emin olmak için web uygulamanızı kapsamlı bir şekilde test edin. Herhangi bir CSP ihlalini belirlemek ve politikanızı buna göre ayarlamak için tarayıcı geliştirici araçlarını kullanın.

Pratik CSP Uygulama Örnekleri

Farklı senaryolar için bazı pratik CSP uygulama örneklerine bakalım:

Örnek 1: CDN Kullanan Temel Bir Web Sitesi

JavaScript ve CSS dosyaları için bir CDN kullanan temel bir web sitesi:

CSP Başlığı:

default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com;

Bu politika şunlara izin verir:

• Aynı kökenden gelen kaynaklar.
• https://cdn.example.com adresinden gelen betikler ve stil sayfaları.
• Aynı kökenden ve data URI'lerinden gelen resimler.
• Aynı kökenden ve Google Fonts'tan (https://fonts.gstatic.com) gelen yazı tipleri.

Örnek 2: Satır İçi Betik ve Stilleri Olan Web Sitesi

Nonce'lar ile satır içi betik ve stiller kullanan bir web sitesi:

HTML:

<script nonce="uniqueNonce123">console.log('Satır içi betik');</script> <style nonce="uniqueNonce456">body { background-color: #f0f0f0; }</style>

CSP Başlığı:

default-src 'self'; script-src 'self' 'nonce-uniqueNonce123'; style-src 'self' 'nonce-uniqueNonce456'; img-src 'self' data:;

Bu politika şunlara izin verir:

• Aynı kökenden gelen kaynaklar.
• "uniqueNonce123" nonce'una sahip satır içi betikler.
• "uniqueNonce456" nonce'una sahip satır içi stiller.
• Aynı kökenden ve data URI'lerinden gelen resimler.

Örnek 3: Sıkı CSP'li Bir Web Sitesi

Çok sıkı bir CSP hedefleyen bir web sitesi:

CSP Başlığı:

default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self';

Bu politika şunlara izin verir:

• Yalnızca aynı kökenden gelen kaynaklara izin verir ve özel olarak izin verilmedikçe diğer tüm kaynak türlerini açıkça devre dışı bırakır.
• Ayrıca, temel URI'yi ve form eylemlerini aynı kökenle sınırlamak gibi ek güvenlik önlemleri uygular.

CSP ve Modern JavaScript Framework'leri (React, Angular, Vue.js)

React, Angular veya Vue.js gibi modern JavaScript framework'lerini kullanırken, CSP uygulaması özel dikkat gerektirir. Bu framework'ler genellikle satır içi stiller, dinamik kod oluşturma ve eval() gibi CSP için sorunlu olabilecek teknikler kullanır.

React

React, bileşen stili için genellikle satır içi stiller kullanır. Bu sorunu çözmek için, nonce veya hash'leri destekleyen CSS-in-JS kütüphanelerini kullanabilir veya stillerinizi CSS dosyalarına harici olarak aktarabilirsiniz.

Angular

Angular'ın Anında Derleme (JIT) özelliği, sıkı bir CSP ile uyumsuz olan eval()'e dayanır. Bunu aşmak için, uygulamanızı derleme sürecinde derleyen ve çalışma zamanında eval() ihtiyacını ortadan kaldıran Önceden Derleme (AOT) yöntemini kullanmalısınız.

Vue.js

Vue.js de satır içi stiller ve dinamik kod oluşturma kullanır. React'e benzer şekilde, CSS-in-JS kütüphanelerini kullanabilir veya stillerinizi harici olarak aktarabilirsiniz. Dinamik kod oluşturma için, derleme sürecinde Vue.js'nin şablon derleyicisini kullanmayı düşünün.

CSP Raporlaması

CSP raporlaması, uygulama sürecinin önemli bir parçasıdır. report-uri veya report-to direktifini yapılandırarak, CSP ihlalleri hakkında raporlar alabilirsiniz. Bu raporlar, politikanızdaki herhangi bir sorunu belirlemenize ve düzeltmenize yardımcı olabilir.

report-uri direktifi, tarayıcının CSP ihlal raporlarını bir JSON yükü olarak göndermesi gereken bir URL belirtir. Bu direktif, report-to lehine kullanımdan kaldırılmaktadır.

report-to direktifi, bir Report-To başlığında tanımlanan bir grup adını belirtir. Bu başlık, çeşitli raporlama uç noktalarını yapılandırmanıza ve önceliklendirmenize olanak tanır.

report-uri kullanarak örnek:

Content-Security-Policy: default-src 'self'; report-uri /csp-report-endpoint;

report-to kullanarak örnek:

Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"/csp-report-endpoint"}]} Content-Security-Policy: default-src 'self'; report-to csp-endpoint;

Araçlar ve Kaynaklar

CSP'yi uygulamanıza ve yönetmenize yardımcı olabilecek birkaç araç ve kaynak vardır:

• CSP Evaluator: CSP'nizi analiz etmek ve değerlendirmek için bir araç.
• CSP Generator: CSP başlıkları oluşturmak için bir araç.
• Tarayıcı Geliştirici Araçları: Çoğu tarayıcı, CSP ihlallerini belirlemenize yardımcı olabilecek yerleşik geliştirici araçlarına sahiptir.
• Mozilla Observatory: CSP dahil olmak üzere web siteleri için güvenlik önerileri sunan bir web sitesi.

Yaygın Hatalar ve Bunlardan Kaçınma Yolları

CSP uygulamak zor olabilir ve kaçınılması gereken birkaç yaygın hata vardır:

• Aşırı İzin Veren Politikalar: Kesinlikle gerekli olmadıkça joker karakterler veya 'unsafe-inline' ve 'unsafe-eval' kullanmaktan kaçının.
• Yanlış Nonce/Hash Üretimi: Nonce'larınızın rastgele ve benzersiz olduğundan ve hash'lerinizin doğru hesaplandığından emin olun.
• Yeterince Test Etmemek: Tüm kaynakların doğru yüklendiğinden emin olmak için CSP'nizi uyguladıktan veya güncelledikten sonra her zaman test edin.
• CSP Raporlarını Görmezden Gelmek: Herhangi bir sorunu belirlemek ve düzeltmek için CSP raporlarınızı düzenli olarak gözden geçirin ve analiz edin.
• Framework Özelliklerini Dikkate Almamak: Kullandığınız JavaScript framework'lerinin özel gereksinimlerini ve sınırlamalarını dikkate alın.

Sonuç

İçerik Güvenliği Politikası (CSP), web uygulama güvenliğini artırmak ve XSS saldırılarını azaltmak için güçlü bir araçtır. Dikkatlice bir CSP tanımlayarak ve en iyi uygulamaları izleyerek, kod enjeksiyonu güvenlik açıkları riskini önemli ölçüde azaltabilir ve kullanıcılarınızı kötü amaçlı içerikten koruyabilirsiniz. Yalnızca raporlama politikasıyla başlamayı, 'unsafe-inline' ve 'unsafe-eval' kullanmaktan kaçınmayı, kökenleri belirtirken spesifik olmayı ve CSP'nizi düzenli olarak gözden geçirip güncellemeyi unutmayın. CSP'yi etkili bir şekilde uygulayarak, kullanıcılarınız için daha güvenli ve güvenilir bir web ortamı oluşturabilirsiniz.

Bu rehber, JavaScript için CSP uygulamasına kapsamlı bir genel bakış sunmuştur. Web güvenliği sürekli gelişen bir alandır, bu nedenle en son en iyi uygulamalar ve güvenlik yönergeleri hakkında bilgi sahibi olmak çok önemlidir. Sağlam bir CSP uygulayarak ve kullanıcılarınızı potansiyel tehditlerden koruyarak web uygulamanızı bugün güvence altına alın.