React JS kullanan var mı. Yeterince güvenli mi ?

uysal_rockci' Alıntı:

Merhaba arkadaşlar,
Bir süredir React JS öğrenmeye başladım. Daha önce PHP ile başlamış olduğum bir projeyi tamamen React JS ile yeniden yazmaya karar vermek üzereyim. Aklıma takılan bazı sorunlar var ama en önemlisi React JS ile yazılan bir proje PHP ile yazılan kadar güvenli midir ?
React'a güvenebilir miyim ? Sonuçta Php ile yapılan iş ve işlemler server side çalışırken React ile yapılan iş ve işlemler ClientSide çalışıyor. Biraz uğraşılırsa developer araçları ile kodlar , state ler vb. değerler e erişim sağlanabiliyor gördüğüm kadarı ile.
Veritabanı olarak Google Firebase/Firestore kullanmayı planlıyorum ama ilerde sıkıntı yaşar mıyım acaba.
Aramızda kullanan var ise , yorumlarını esirgemezse sevinirim.

Eğer React ile devam etmeye karar verirsem, baştan sona ders gibi videolaştırmayı planlıyorum.

Genişletmek için tıkla ...

vlk4n' Alıntı:

Merhabalar facebook tarafından geliştiriliyor. Ve açık kaynak bir proje ayrıca githubda 130bin den fazla star almış 1303 geliştiriciye sahip. Bence hem güvenilir hemde kullanılabilirdir. Ayrıca son zamanlarda popüler olan vuejs bakabilirsiniz

Genişletmek için tıkla ...

Parhelion' Alıntı:

Hocam react, angular, vue vs. bunların tümü sizin de belirttiğiniz üzere client-side çalışan ön yüz geliştirme çatılarıdır. Siz yine arka tarafta php, asp, pyhton vb. ile asıl uygulamanızı bir json api tarzında yazarsınız, react ile kodladığınız ön yüz ise bu api'ye istekler gönderir ve aldığı cevaplar doğrultusunda farklı state'lere geçer. Tümüyle birbirinden izole bir backend-frontend yapısı oluşur. (Bunun birçok avantajı bulunmaktadır. Örneğin ileride aynı sisteme backend'de hiçbir değişikliğe gerek kalmadan mobil uygulama da yazabilirsiniz.) Bu yüzden güvenlik tarafındaki konular bunların işi değildir. Dediğiniz gibi, developer araçları üzerinden ön taraftaki herşeye zaten müdahale edilebilmektedir. Güvenlik önlemlerini siz yine arka tarafta alırsınız.

En basitinden, login işlemlerinde geleneksel yöntemlerde bildiğiniz üzere session veya cookie kullanılır. Fakat bu tarz backend ve frontend izole edilmiş çözümlerde session ve cookie'ler çok verimli olmaz. Bunun yerine cookie'lere benzeyen token (jeton) sistemleri bulunmaktadır. Token sisteminde frontend'de girilen kullanıcı adı ve şifresi yazdığınız backend api'ye post edilir. Doğru giriş alınması durumunda backend'den json formatında bir success cevabı gelir. Cevabın içerisinde bir de token değeri bulunur. Bu değer aslında anlık üretilmiş uzun bir şifredir. Frontend token'ı alır ve local storage'de depolar ve oturum açılmış olur. Artık sonraki request'lerde bu token request header'ına eklenerek gönderilir ve api gelen isteğin kimden geldiğini bilir. Oturum kapatmak için token'a expire verebilirsiniz. Token sisteminizi tamamen kendiniz yazabilirsiniz veya jwt (json web token) gibi standartlaşmış sistemler de kullanabilirsiniz.

Kısaca siz business logic'inizi zaten backend tarafında gerçekleştirdiğiniz için frontend tarafta token'ı güvenli depolamak dışında düşünmeniz gereken çok birşey yoktur. Yapabileceğiniz birşey de yoktur.

Bahsettiğiniz firebase vb için de yine bir ara api (proxy) yazmanız gerekir. Aksi takdirde firebase api anahtarınız herkese açık hale gelir

Genişletmek için tıkla ...

uysal_rockci' Alıntı:

Cevaplar için teşekkür ediyorum arkadaşlar.
ReactJS yi sevmemdeki en temel neden, server masrafından beni kurtarıyor olması ve tüm iş yükünü Client Side pc ye yüklemesi. Aynı zamanda Google Firebase Hosting hizmeti ile de bunu desteklemesiydi. Bu yüzden hem kendimi geliştirmek hem de ReactJS furyasına katılarak component yapısını kullanmak için kendi Panelimi tasarlamak için https://themeforest.net/item/fuse-react-react-redux-material-design-admin-template/21769397 React temasını satın aldım ve genel yapıyı oldukça başarılı buldum.

Benim için olaylar şu şekilde gelişti.
Bu tema içinde firebase kullanarak login vs işlemleri hallettim. Daha sonra güvenlik için firebase/firestore kuralları oluşturdum. kullanıcı yetkilerini düzenledim ve kurallara ekledim.
Temel düzeyde ( CRUD ) db işlemlerini hallettim. Realtime db olayını inceledim. ilk projemi derledim ve test ettim. k
Proje linkini ilk çalıştırdığım zaman açılış sayfasının yüklenmesi ve görüntülenmesi 5+sn zaman geçiyor. Ama bundan sonra sayfa geçişleri çok hızlı. Bu açılış hızı dezavantaj olsa da sonraki hızlar ve realtime değişimleri gözlemlemek güzel.
ama derlenene projeyi developer tools ile kurcaladığımda tüm kodlaramı görüyorum. Buna firebase api key vs. de dahil. api key in ulu orta meydanda durması bana zarar verir mi.
Yol başındayken zaten bildiğim PHP veya NodeJS ile mi devam etsem diye düşünmüyor değilim. Bu arada Projem temel düzeyde CRM sistemi.
ReactJS nin yapısı hoşuma gitti ama güvenlik bu projede oldukça önemli benim için.

Genişletmek için tıkla ...

alpaygunes' Alıntı:

React ile geliştirdiğiniz uygulamayı nadıl dağıtacaksınız.
Mobil app , web , pc
Kesin cevap için biraz daha bilgi lazım.

Aslında API olmadan olmaz .
Front ve backend i ayrmanız iyi olur.
Php ve react birbirinin alternatifi değil ortağı gibidir.

Genişletmek için tıkla ...

Parhelion' Alıntı:

Hocam yazmıştım aslında ama okumamışsınız sanırım. Geleneksel mimariyi unutarak düşünmelisiniz. API key ön tarafta olmaz direk halka açmış oluyorsunuz. Ben oradan keyi alıp her şeyi yapabilirim db'nizde. Bunun yerine -php nodejs ne kullanacağınız size kalmış-, bir oturum sisteminiz olmak durumunda. Frontendde kullanıcı adı şifresi alınır, APIye gönderilir, doğruysa token alınır ve isteklere eklenerek gönderilir. Backend ise istekten gelen tokena bakar, kime aitse o kullanıcıya göre isteği firebase'e iletir, firebase'den gelen cevabı ise işler ve frontende verir. Firebase ile muhatapta olan backend'dir. Böylece api key backend tarafında kalır ve kimseye açmamış olursunuz. Tüm iş bu şekilde katmanlı olarak yürür. Hatta bir de Firebase ayarlarından sunucu ip'niz dışındaki yerlerden bağlantıya izin vermezseniz yeterli derecede güvenliği sağlamış olursunuz.

Edit: Çekinceniz de server masrafı ise o zaman yine Firebase'in kendi içinde kullanıcı sistemi de mevcut direk onu kullanın (firebase auth)
https://medium.com/@AdamRNeary/firebase-custom-authentication-with-no-backend-736c016ed433

Genişletmek için tıkla ...

uysal_rockci' Alıntı:

Öncelikle cevabınız için teşekkür ederim.
Uygulamayı Web üzerinden dağıtacağım. ileriki aşamalarda Mobil de eklenir belki.
Satın almış olduğum React Teması ile istediğim arayüz vb. işlemleri hallettim. hiç bir api veya backend olmadan sadece react ile geliştirmeye devam etmek mantıklı değil o zaman. Eski usül Php ile apiler tasarlayıp React ile kullanılabilir. Ya da NodeJS ye mi yönelmeliyim , emin olamadm.




Önelikle cevabınız için çok teşekkürler .
Oturum açma yönetimi için FirebaseAuth kullandım . Ama buradaki kuralları ne kadar da kendime göre değiştirmiş daha güvenilir yapmış olsam da api key vb bilgilerin açık olması güvenlik riski oluşturur mu. Sonuçta oturum açmayan kullanıcı sisteme giremiyor, sisteme girenler ise sadece kendilerine ait verilere ulaşabiliyorlar. Ellerinde api key olsa da kendi verileri dışında diğer verilere ulaşma riski var mı acaba.

React ve Firebase/Firestore birbiri içinde oldukça uyumlu. Yapılan değişiklikleri gerçek zamanlı ( realtime ) görmek oldukça eğlenceli. Bütün React hosting işini Google'a yıkıp , oturum açma ve DB işlemlerini de aynı şekilde Google Firebase'e yıkıp uygulama geliştirmek sizce mantıklı mı. Öncelikle ilk aşamada sunucu masrafım olmayacak tüm işi Google yapacak. Ama zaten bildiğim PHP den vazgeçip React furyasında ilerlenmeli mi acaba ?

Aynı işi PHP ile yapsam VDS alıp gerekli sunucu , apache, mysql , güvenlik vb. bütün işlemleri kendim halletmem gerekecek. Acaba sunucuda güvenlik açığı var mı diye düşüneceğim belki. Diğer taraftan Google Firebase / Hosting hizmetine güvenip de React ile mi yola çıkmalıyım acaba ?

ayın 15inde projeyi kesinleştirmiş olup yoluma devam etmek istiyorum, hadi hayırlısı bakalım.

Genişletmek için tıkla ...

alpaygunes' Alıntı:

Şuan en popüler kullanım şekli
Ön uçta js çatısı
Arka uçta API

Bu ileryen süreçte elinizi rahatlatır.

Arkauçta php node arısında kalmayın derim.
Node server birazdaha maliyetli
Nodesj socket uygulaması yapmayacaksan tercih etme.
Php biliyorsan nodeye gerek yok bence.

Laravel lumen vb API için özelleşmiş bir framework araştır. Bir günde çözersin. Bir iki route tanımladıktan sonra tekrara aynı şeyleri yapıyorsun. Db den aldığın veriyi json olaral respons ediyorsun. Gerisi reacta kalıyor.

Genişletmek için tıkla ...

Parhelion' Alıntı:

@uysal_rockci hocam kusura bakmayın api key konusunda bir noktada yanlış yönlendirme yapmışım düzeltme yazmak istedim. Firebase için uygulamanızdaki tüm işlemleriniz yetkilendirme istediği ve ayrıca firebase auth'u da kullandığınız durumda read-write yetkilerini zaten konsolda kişilere veya gruplara özel tanımladığınız için api key'in halka açık olmasında bir problem oluşmuyor. Saldırgan api ile konuşabilse de elinde token olmadığı için veritabanında bir işlem gerçekleştiremiyor.

Sonuç olarak da sunucu taraflı ihtiyaç tamamen ortadan kalkmış oluyor.

Genişletmek için tıkla ...

uysal_rockci' Alıntı:

Cevap için teşekkürler hocam. Firebase Auth ile oturum yönetimi yaptığımız zaman ve aynı zamanda da Firebase Realtime DB / FireStore ile kuralları ( RULES ) düzenlediğimiz zaman bu durumda ekstra bir Sunucu / API olmaksızın veritabanı güvenliğini sağlamış oluyoruz.
Bu durumda elimizdeki tek dezavantaj sayfayı çalıştıran kodların ve state vb bilgilerin kullanıcı (Client) bilgisayarında developer tools tarafından görülebilmesi olcaktır.
Sistemdeki tüm kodlar görülse bile , DB'ye erişim olmayacaktır. Yani kullanıcı yetkisi dışında bir işlem yapamayacaktır. Doğru anlamış mıyım hocam.

Genişletmek için tıkla ...

Parhelion' Alıntı:

Evet aynen öyle hocam işlem yapabilmesi için ayrıca oturum açıp token alması gerekecek ki o tokenla da zaten ona verdiğiniz yetkiler çerçevesinde işlem yapabilir ve kimliği de belli olur. Sonuçta önemli olan da veritabanına yetkisiz erişim açığı vermemek olduğu için kodları görmesinde de çok bir sakınca kalmamış oluyor. Ayrıca kodlar siz production build aldığınızda kullanılan tüm npm paketleri ile tek js dosyasına bundle edileceği için karmakarışık bir hale gelecektir bu da yeterince caydırıcı olur zaten. Hatta buna rağmen içiniz rahat etmezse üstüne bir de obfuscate yaparsınız kimsenin uğraşmaya gözü almaz.

Bu arada kusura bakmayın biraz plaza ağzı gibi yazıyorum ama bazı kavramlar artık terimleşmiş tam Türkçe karşılığı olmuyor malesef.

Genişletmek için tıkla ...