React.JS Code Obfuscation
-
Merhaba Mürit ve Mürideler,
React.JS ile yazdığım uygulamayı karıştırmak istiyorum. Okunmasını zorlaştırmak istiyorum. Bir kaç tool buldum ama bunlar da TypeScript için destek vermiyor. Bildiğiniz ücretsiz TypeScript desteği olan react projesini karıştırıp build veren bir kütüphane var mı?
Bir adam akıllı şunu buldum https://github.com/javascript-obfuscator/javascript-obfuscator bu da sanırım tek bir dosya üzerinden yapıyor. Daha denemedim ama dosya dosya yaparsa bu sefer 2 dosya arasında class alışverişi varsa proje çalışmaz. Bilemedim..
-
Hocam cra webpack kullanır build ederken. Eğer cra veya next kullanıyorsun webpack obfuscator şeklinde aratabilirsin
https://www.npmjs.com/package/webpack-obfuscator
Daha önce yapmadım ama işini çözecektir.
He unutmadan şu hede de cra'nın webpack'ini düzenlemene yarar:
https://github.com/timarney/react-app-rewired
-
Hocam CRA dediğin Create React App sanırım. Eğer bu ise direkt bu şekilde projeyi oluşturdum ve typescript olarak ilerledim. Sanırım burda bütün iş Webpack üstünden ilerliyor. Biraz webpack eğitimi alsam iyi olabilir.
Aslında tam olarak aradığım şey kütüphane değil de X bir kütüphanede daha önce bir şeyler yapmış tecrübeli biri. İşin içinden çıkamıyorum çünkü. Söz konusu JS olunca zibilyon tane kütüphane oluyor.
-
Hocam genel olarak bütün frontend frameworkleri (react, swelte, vue, next, nuxt vs) Webpack, browserify gibi bundler'lar kullanırlar. Böylece javascript kodun bir anlamda derlenir (aslında bundle edilir)
Frameworkten bağımsız olarak bundle olayına hakim olursan olayı daha basit çözebilirsin
Tabi babel gibi js dönüştürücüleri de kodlar üzerinde değişiklik yapıyor. Çünkü es5, es6 vb. pek çok js geliştirmeleri mevcut, bu gelişimlerin bütün browserlarda çalışması için çoğu zaman dönüştürücüye ihtiyaç duyuyoruz (en azından standartlaşana kadar)
Eğer bu durumlara vakıf olursan
{
plugin: [webpackObfucate()]
}
Şeklinde şıp diye olayı çözersin.
Not: Doğrudan doğruya yardım edemiyorum çünkü hiç ama hiç ihtiyacım olmadı. Çünkü javascript her zaman özgürdür, ne kadar obfuscate edersen et illaki anlamlı hale gelebilir :) (https://lelinhtinh.github.io/de4js/ en mükemmel tool bu konuda)
Ek: He bir de şu var http://jsnice.org/
by_Tet tarafından 09/Kas/21 23:26 tarihinde düzenlenmiştir -
Client da hiçbir zaman 100% çözüme ulaşamayacağımı biliyorum hocam. Amaç işi zorlaştırmak :D Hırsız var diye kapıyı kilitlemeyelim mi :D
-
Niye typescripti obfuscate etmeye çalışıyorsun?
Browserda renderlanacak şey typescript değil ki.
Bu gibi framework/libraryler genelde default olarak webpack ile browserin rahat okuyabileceği formata dönüştürülür.
Bu yüzden webpack pluginlerine bakacaksın derlenmiş kodun karmaşıklaştırılması için.
Bak burada bir tuto var.
https://blog.programster.org/add-obfuscation-to-webpack-build
-
@end Hocam amacım typescript yada JSX'i karıştırmak değil. Senin de söylediğin gibi derlenmiş kodu karıştırmak istiyorum. Günün sonunda tüm kodların pureJS döndüğü konusunda bilgim var :/
Ama direkt atıyorum npm run build dediğimde direkt bana karıştırılmış kodu versin. Attığın linki deneyeceğim teşekkürler ;)
-
Hocam samimi olarak merakımdan soruyorum, front kısmını obfuscate etme amacın nedir? Neleri görmelerini zorlaştırmak istiyorsun? Eğer amacın api url'lerini falan gizlemekse (genelde bu mantıkla yapanları biliyorum) o işin olayı frontu karıştırmaktan ziyade api'yi sağlam dizayn etmekten geçiyor.
Ayriyetten eğer devtools ve debug modlarını kapatırsan zaten webkit compile aşamasından sonra kodları kendi çapında parçalara bölerek direk kullanılamayacak hale getiriyor ve browser debuggerlarına source kod düşmüyor. Aksi halde debugger ile derlenmemiş source kodları görüntüleme şansın var. Genelde unutulan bir özelliktir.
-
antichrist bunu yazdı
Hocam samimi olarak merakımdan soruyorum, front kısmını obfuscate etme amacın nedir? Neleri görmelerini zorlaştırmak istiyorsun? Eğer amacın api url'lerini falan gizlemekse (genelde bu mantıkla yapanları biliyorum) o işin olayı frontu karıştırmaktan ziyade api'yi sağlam dizayn etmekten geçiyor.
Ayriyetten eğer devtools ve debug modlarını kapatırsan zaten webkit compile aşamasından sonra kodları kendi çapında parçalara bölerek direk kullanılamayacak hale getiriyor ve browser debuggerlarına source kod düşmüyor. Aksi halde debugger ile derlenmemiş source kodları görüntüleme şansın var. Genelde unutulan bir özelliktir.
Source map'ten söz ediyorsun sanırım hocam.
-
Hocam hiçbir client uygulamayı 100% güvenli yapamazsın. Bu konuda fikir sahibiyim. Bendeki amaç biraz farklı her aptal bunu görmesin de işin ehli adam gelsin görsün zaten API bazlı bir açık yok. Ama adam yav bunla mı uğraşacağım diyip geçsin gitsin. Yani çözümü yok diye önlem almamak bence mantıksız. Baktığın zaman Youtube bile daha önlem alamıyor bir sürü video downloaderlar var. Adamlar youtube clonlamış gibi Servislerini kullanıyorlar (Daha önce bende yaptım biliyorum). Olaya şu şekilde yaklaşabilirsiniz. Lamerleri elemek istiyorum.
Reverse Engineering ile her boku yaparsın zaten hocam bunun bilincindeyim yani. Hiç yoktan iyidir kafası benimki.
MhmdAlmz tarafından 10/Kas/21 21:08 tarihinde düzenlenmiştir -
MhmdAlmz bunu yazdı
Hocam hiçbir client uygulamayı 100% güvenli yapamazsın. Bu konuda fikir sahibiyim. Bendeki amaç biraz farklı her aptal bunu görmesin de işin ehli adam gelsin görsün zaten API bazlı bir açık yok. Ama adam yav bunla mı uğraşacağım diyip geçsin gitsin. Yani çözümü yok diye önlem almamak bence mantıksız. Baktığın zaman Youtube bile daha önlem alamıyor bir sürü video downloaderlar var. Adamlar youtube clonlamış gibi Servislerini kullanıyorlar (Daha önce bende yaptım biliyorum). Olaya şu şekilde yaklaşabilirsiniz. Lamerleri elemek istiyorum.
Elle araya domain kontrol eden obfuscated bir blok koy gec.
fonksiyonlarin da o blokta olusan variable'i kontrol etsin.
yani kod blogu silinirse de calismasin.