Tüm yazılar

2 dk okuma

Yönetim panelimizi OGE UI ile kurduk

tuncsystem.com yönetim panelinin düğmeleri, tabloları ve form alanları açık kaynaklı, Türk yapımı OGE UI kütüphanesiyle yapıldı. Neden seçtik, nasıl güvenli kullandık?

Bu sitenin yönetim paneli (yazılar, mesajlar, ev yönetimi, sunucu izleme, müşteriler…) yüzlerce ekran parçasından oluşuyor. Bunların düğmelerini, veri tablolarını ve form alanlarını sıfırdan yazmak yerine OGE UI kullandık. OGE UI, React için yazılmış, açık kaynaklı ve Türk yapımı bir arayüz bileşen kütüphanesi. Bu yazı hem ona teşekkür, hem de "bir kütüphaneyi projeye almadan önce neye bakmalı" sorusuna küçük bir örnek.

Neden OGE UI?

  • Kurumsal ekranlar için yazılmış: veri tablosu (grid), ağaç liste, formlar, sekmeler, pencereler ve dosya yükleme tek ailede.
  • React 18 ve 19 ile çalışıyor; biz React 19 kullanıyoruz.
  • MIT lisanslı: kullandığımız bütün parçalar özgür lisanslı. (Pivot tablo modülü ticari lisanslı; onu kullanmıyoruz.)
  • Tema verilebiliyor: panelimizin koyu, cam görünümüne uydurmak kolay oldu.

Panelde şu an @oge-ui/react-buttons, @oge-ui/react-grid ve @oge-ui/react-inputs paketleri çalışıyor.

Projeye almadan önce yaptığımız güvenlik kontrolü

Bir kütüphaneyi eklemek, onu yazan kişiye sitenizin içinde çalışan kod yazma yetkisi vermek demek. Bu yüzden önce ayrı bir klasöre kurup baktık:

  • Kurulumda çalışan betik yok (preinstall / postinstall gibi). Paketler kurulurken bilgisayarda hiçbir şey çalıştırmıyor.
  • Dışarıdan başka bağımlılık yok: ağaçta yalnızca OGE UI paketleri ve React var.
  • npm audit: 0 açık.
  • Kodda tehlikeli kalıp yok: eval, new Function, gizli ağ çağrısı, uzaktan kod yükleme bulunmadı. Tek ağ isteği, dosya yükleme bileşeninin bizim verdiğimiz adrese yaptığı istek.
  • Hatta kodda, Excel'e aktarılan verilerde "formül enjeksiyonu"na karşı koruma olduğunu gösteren bir açıklama bulduk; iyi bir işaret.

Riski küçük tutmak için kurallarımız

Kod temiz olsa bile her npm paketinin taşıdığı bir risk var: paketi yayımlayan hesap bir gün ele geçirilirse kötü niyetli bir sürüm yayımlanabilir. Bunun için:

  1. Sabit sürüm: paketler 1.1.2 olarak kilitli; yeni bir sürüm kendiliğinden gelmez.
  2. Sürüm yükseltmeden önce inceleme: iki sürüm arasındaki fark (npm diff) okunur, kontrol yeniden yapılır.
  3. Yalnızca panelde: herkese açık sayfalar OGE UI yüklemez; derleme sırasında bu kontrol edilir.
  4. Panel dışarıyla konuşamaz: panelin güvenlik politikası (CSP) yalnızca kendi sunucumuza bağlantıya izin veriyor. Bir kütüphane kötü niyetli olsa bile veriyi başka bir yere gönderemez.

Teşekkür

Hazır, düzenli ve temiz bir bileşen kütüphanesi bize haftalarca iş kazandırdı. Türkiye'den çıkan açık kaynak projelerin büyümesi hepimizin işine yarar: OGE UI'ı denemek isteyenler ogeui.com adresine ve GitHub sayfasına bakabilir. Bir yıldız ya da bir hata bildirimi bile açık kaynak geliştiricisi için çok şey ifade eder.