1. XSS (Cross-Site Scripting) Saldırılarına Karşı Önlem Alın

XSS saldırıları, kötü niyetli kullanıcıların uygulamaya zararlı kod enjekte etmesiyle gerçekleşir. React, varsayılan olarak DOM manipülasyonunu güvenli bir şekilde yapar ve XSS saldırılarına karşı güçlü bir koruma sunar. Ancak bazı durumlarda, geliştiricilerin dangerouslySetInnerHTML gibi yöntemleri kullanması gerekebilir. Bu yöntem kullanılırken dikkatli olunmalı ve kullanıcının girdiği veriler doğrudan DOM'a enjekte edilmemelidir.

Ne Yapmalı?

• Kullanıcı girdilerini her zaman denetleyin ve güvenli hale getirin.
• dangerouslySetInnerHTML kullanımından kaçının. Eğer kullanmak zorundaysanız, verileri sanitize etmek için üçüncü parti güvenlik kütüphanelerini (örneğin DOMPurify) kullanın.
• DOMPurify gibi güvenlik kütüphaneleri, kullanıcıdan gelen girdiyi zararlı içerikten arındırarak güvenli hale getirir.

2. Hassas Verileri State'te Tutmaktan Kaçının

React.js, state yönetimi ile kullanıcıdan gelen verilerin nasıl saklandığını kontrol eder. Ancak, hassas verilerin istemci tarafında tutulması saldırılara davetiye çıkarabilir. Kullanıcı verilerini state'te tutmak yerine bu verilerin güvenli bir şekilde backend'e aktarılması ve sunucuda saklanması daha güvenlidir.

Ne Yapmalı?

• Hassas verileri client-side state’lerde tutmaktan kaçının. Bu tür veriler backend servislerinde tutulmalı ve sadece gerekli olduğunda kullanıcıya geri döndürülmelidir.
• API isteklerinde ve yanıtlarında HTTPS kullanarak verileri şifreleyin. Bu yöntem, hassas verilerin yalnızca backend üzerinde tutulmasını sağlar.

3. Üçüncü Parti Kütüphaneleri Dikkatle Kullanın

React projelerinde sıklıkla üçüncü parti kütüphaneler kullanılmaktadır. Ancak, dış kütüphaneler potansiyel güvenlik riskleri taşıyabilir. Bu kütüphanelerin sürekli güncellenmesi ve güvenlik açıklarına karşı denetlenmesi gerekir.

Ne Yapmalı?

• Kullandığınız paketleri düzenli olarak güncelleyin ve potansiyel güvenlik açıklarına karşı denetim araçları kullanın.
• npm audit gibi araçlarla, kütüphanelerinizdeki güvenlik açıklarını düzenli olarak kontrol edin.
• Paketlerin güvenilir kaynaklardan geldiğinden emin olun. Açık kaynak projelerde sık güncellenen ve geniş bir topluluk desteği olan paketleri tercih edin.

à npm audit fix

4. Güvenli Yetkilendirme ve Kimlik Doğrulama Mekanizmaları Kullanın

Birçok React.js uygulaması, kullanıcı oturumlarını yönetmek için JWT (JSON Web Token) kullanır. Ancak, JWT token’larının çalınması veya kötüye kullanılması büyük güvenlik açıklarına yol açabilir. Token’ların kötü niyetli kişilerin eline geçmemesi için güvenli saklama yöntemleri tercih edilmelidir.

Ne Yapmalı?

• Token’ları localStorage veya sessionStorage gibi yerlerde saklamaktan kaçının. Bu tür depolama alanları XSS saldırılarına karşı hassastır.
• JWT token’larını HttpOnly cookie’lerde saklayarak cross-site scripting (XSS) saldırılarına karşı koruma sağlayın.
• Kullanıcı oturumlarını yönetmek için güvenli kimlik doğrulama servisleri (OAuth, OpenID) kullanın.

5. Güvenli HTTP Bağlantıları (HTTPS) Kullanın

Verilerin şifrelenmeden iletilmesi, üçüncü kişiler tarafından ele geçirilme riskini doğurur. Özellikle kullanıcıdan gelen hassas verilerin (şifre, kredi kartı bilgileri vb.) HTTP üzerinden gönderilmesi büyük bir güvenlik açığı oluşturur.

Ne Yapmalı?

• Uygulamanızı her zaman HTTPS üzerinden çalıştırın. Böylece verilerin şifreli bir şekilde iletilmesini sağlayarak man-in-the-middle (MitM) saldırılarına karşı önlem alabilirsiniz.

6. İçerik Güvenlik Politikası (Content Security Policy - CSP)

İçerik Güvenlik Politikası (CSP), kötü niyetli komut dosyalarının çalıştırılmasını önlemeye yardımcı olan bir HTTP başlığıdır. CSP, tarayıcının hangi kaynakların güvenilir olduğunu bilmesini sağlar ve böylece zararlı kodların çalıştırılması engellenir.

Ne Yapmalı?

• Uygulamanızda Content-Security-Policy başlığını tanımlayarak, sadece belirli güvenilir kaynaklardan yüklenebilecek script'leri belirleyin.
• CSP, yalnızca güvenilir kaynaklardan içerik yüklenmesine izin vererek uygulamanızı XSS saldırılarından korur.
• Inline JavaScript kullanıyorsanız, CSP'nin nonce veya hash desteğini kullanarak bu script'leri güvenli hale getirin.

7. Dosya Yüklemeleri ve Kullanıcı Girdilerini Denetleyin

React.js ile geliştirilen uygulamalarda kullanıcıların dosya yükleyebileceği alanlar bulunabilir. Dosya yükleme işlemleri sırasında güvenlik açığı oluşmaması için kullanıcıdan gelen veriler (dosya türü, boyutu vb.) dikkatli bir şekilde denetlenmelidir.

Ne Yapmalı?

• Yüklenen dosyaların türünü ve boyutunu sunucu tarafında doğrulayın.
• Yüklenen dosyaların MIME türlerini kontrol ederek yalnızca belirli türdeki dosyaların kabul edilmesini sağlayın.

8. SQL Enjeksiyonu ve Diğer Saldırılara Karşı Sunucu Tarafının Güvenliği

Her ne kadar React.js istemci taraflı bir kütüphane olsa da istemciden gelen verilerin sunucu tarafında işlenmesi sırasında SQL enjeksiyonu gibi saldırılara karşı dikkatli olunmalıdır. Sunucu tarafında yapılan veri tabanı sorgularında kullanıcının girdiği veriler dikkatlice doğrulanmalıdır.

Ne Yapmalı?

• Sunucu tarafında, veri tabanı sorgularında parametrik sorgular kullanarak SQL enjeksiyonlarına karşı koruma sağlayın.
• Kullanıcıdan gelen tüm verileri validasyonlar kullanarak güvenli hale getirin.

Sonuç

React.js ile güvenli uygulamalar geliştirmek, sağlam bir temel oluşturmak için güvenlik uygulamalarını titizlikle takip etmeyi gerektirir. Yukarıda paylaşılan önlemler, projelerinizi siber saldırılara karşı daha dayanıklı hale getirmenize yardımcı olacaktır. Ancak güvenlik, sadece geliştirme aşamasında değil, yazılımın tüm yaşam döngüsü boyunca sürekli dikkat edilmesi gereken bir unsurdur. Düzenli güvenlik testleri yaparak ve yeni tehditlere karşı güncellemeleri uygulayarak, kullanıcılarınıza güvenli ve güvenilir bir deneyim sunabilirsiniz. Güvenlik, her zaman ön planda tutulması gereken bir sorumluluktur.

Referanslar

1. https://www.turing.com/kb/reactjs-security-best-practices

2. https://medium.com/whatfix-techblog/reactjs-security-best-practices-6542b71a5577

3. https://relevant.software/blog/react-js-security-guide/

4. https://www.linkedin.com/pulse/how-secure-your-reactjs-application-md-jamil-kashem-porosh-

5. https://www.freecodecamp.org/news/best-practices-for-security-of-your-react-js-application/