Vue ile İçerik Güvenlik Politikası (CSP)

İçerik Güvenliği Politikası, tarayıcıya hangi betik, stil, görsel ve bağlantı kaynaklarına izin verildiğini bildiren bir HTTP yanıt üst bilgisidir. XSS'e karşı güçlü bir ikinci savunma hattıdır; enjekte edilen betiklerin kaynağına izin verilmemişse bu betikler engellenir.

CSP, Content-Security-Policy yanıt üst bilgisi aracılığıyla iletilir. Her yönerge, bir kaynak türü için izin verilen kaynakları listeler.

script-src yönergesi, betiklerin nereden yüklenebileceğini denetler. Bunu 'self' ile sınırlamak, saldırganın enjekte edebileceği satır içi ve üçüncü taraf betiklerini engeller.

'unsafe-inline', satır içi betiklere ve olay işleyicisi özniteliklerine izin verir; bunlar XSS saldırılarının tam olarak yararlandığı şeylerdir. Güçlü bir politika bunu dışarıda bırakır, böylece enjekte edilen satır içi kod çalışmaz.

'unsafe-eval', eval ve Function oluşturucusuna izin verir. Vue 3 çalışma zamanı derlemesi buna ihtiyaç duymaz (şablonlar önceden derlenir); bu nedenle bunu dışarıda bırakabilirsiniz ve bırakmalısınız.

Gerçekten bir satır içi betiğe ihtiyaç duyduğunuzda, betiğe yanıt başına rastgele bir nonce verin ve bu nonce'u politikada listeleyin. Yalnızca eşleşen nonce'u taşıyan betikler çalışır.

Nonce tahmin edilemez ve her yanıtta değişir; bu nedenle betik enjekte eden bir saldırgan nonce'u tahmin edemez. Böylece unsafe-inline kullanımının genel riskini almadan satır içi betikler çalışmaya devam eder.

Vue ve birçok kullanıcı arayüzü kitaplığı, çalışma zamanında stiller ekler. Bunlara style-src içinde nonce veya özet kullanarak izin verin ya da CSS'yi dosyalara çıkarın; böylece style-src 'self' yeterli olur.

Vite'ın geliştirme sunucusu betikler ekler ve bu betikler katı CSP ile çakışabilir. Bir CSP nonce eklentisi, geliştirme sırasında Vite tarafından eklenen etiketlere eşleşen bir nonce işler.

Enjekte edilen kodun verileri saldırganın denetlediği bir alana sızdıramaması için uygulamanın hangi kaynaklara getirme isteği gönderebileceğini connect-src ile kısıtlayın.

CSP'yi Content-Security-Policy-Report-Only ile güvenli biçimde kullanıma alın. Bu yönerge ihlalleri engellemeden raporlar; böylece politikayı zorunlu kılmadan önce ayarlayabilirsiniz.

CSP, izin verilen betik, stil ve bağlantı kaynaklarını kısıtlayan bir HTTP üst bilgisidir; XSS saldırısı araya girse bile enjekte edilen kodu engeller. unsafe-inline ve unsafe-eval kullanmaktan kaçının; gerekli satır içi betikler için yanıt başına nonce'lar ve geliştirme sırasında bir Vite CSP nonce eklentisi kullanın. Zorunlu kılmadan önce Yalnızca Raporlama moduyla kullanıma alın.