JavaScript kodunuzu görüntüleme kaynağından nasıl gizleyeceğiniz

Sep 10, 2025
Nasıl Yapılır
How to hide your JavaScript code

JavaScript kodunuzla önlem almazsanız, onu klonlamak isteyen herkes için kolaylaştırıyorsunuz. Ancak, programlama işlemleriniz birden fazla tıklamanız varsa, saldırganlar bir rakip yazılımını klonlamayı tercih ederler. Botlar ve diğer yaramazlar, AWS veya Azure kimlik bilgileri için İnternet ile taranan diğer yaramazlar genellikle şaşkın kodlarla uğraşmaz - bir sonraki web sitesinin giriş bilgileri de mayın bitcoin için kullanılabilir ve daha az çaba ile hasat edilebilir.

JavaScript'i şaşırtma karmaşıktı. Ancak, son birkaç yıl boyunca süreç önemli ölçüde daha kolay hale geldi. Bugün bile küçük şirketler bile kodlarını meraklı gözlerden koruyabilir ve korumalıdır. Bazı durumlarda, güvenli hale gelmek sadece bir node.js paketinin bir çağrısıdır.

Aşağıdaki adımlar, yaygın olarak kullanılan bir JavaScript Obfuscator'u tanıtmak ve aynı zamanda eldeki sorunla ilgili diğer birkaç konuda da bakın.

  • En iyi antivirüs yazılımı
  • 15 Temel JavaScript Araçları

01. Sürüm Kontrolü

Javascript Obfuscator'ımız düğüm çalışma zamanı ortamında yaşıyor. Kullanılan sürümleri kontrol ederek başlayalım. Aşağıdaki çıkış, aşağıdaki adımlar için kullanılan gerçeklerin iş istasyonunda bulunan sürüm durumunu sağlar:

 TAMHAN @ Tamhan-ThinkPad: ~ $ düğüm - inversion
v8.12.0
Tamhan @ tamhan-thinkPad: ~ $ NPM --Version
6.4.1 

02. Programı yükleyin

JavaScript-Obfuscator, iş istasyonunuzun global montaj önbelleğine kurulmalıdır. NPM'yi -g Parametre ve Süper Kullanım Hakları Sağlamayı Unutma - Gerçek dağıtım işlemi birkaç saniye içinde yapılmalıdır.

 TAMHAN @ Tamhan-ThinkPad: ~ $ sudo npm yükleme -g
javascript-obfuscator
[Sudo] Tamhan için şifre:
. . .

+ [email protected]
162 katkıda bulunan 103 paket eklendi
4.4'lerde 

03. Bir örnek oluşturun

Gazetenin test edilmesi, bazı 'gerçek' kodumuz varsa en iyisidir. Öyleyse küçük bir HTML web sayfasıyla başlayalım. Workner.js adlı bir JavaScript dosyasını yükler, bir düğmeyi beyan eder ve küçük bir satır hattı komut dosyası oluşturur. Bir tarayıcıda yüklendiğinde, bir metin kutusu gösterecek düğmesini tıklayın.

 & lt; html & gt;
& lt; vücut ve gt;
& lt; script src = "wunch.js" & gt; & lt; / script;
& lt; script & gt;
fonksiyon işçisi () {
Uyarı (Dothetrick ());
}
& lt; / script & gt;
& lt; düğme türü = "buton" onclick = "işçi (
) "& gt; beni tıklayın! & lt; / button & gt;
& lt; / body & gt;
& lt; / html & gt; 

04. Bazı kod ekleyin

İşçi.js bir dize değişkeni ile başlar. Klasik bir saldırı hedefidir - bir ROM çözülecekse, montajcı genellikle dize dizileri içeren tabloları arayarak başlar. Ayrıca, şifreleme çok 'konuşulan' isimlerle bir dizi değişken kullanılarak gerçekleştirilir.

 var mystring = "Gelecek PLC'den Merhaba"

dothetrick işlevi () {
var chiffrat;
Chiffrat = ROT13 (MyString);
geri dönüş şifresini;
} 

05. Şifrelemeyi uygulayın

Bunun bir şifreleme 101 olarak tasarlanmadığı için, nispeten basit bir ikame şifresini çözmeliyiz. ROT13 zor değil, ancak oldukça vergilendirilebilir. Direklerin Uygulanması Bir dizi 'konuşan' değişkenlerle birlikte geliyor ve obfuscator için çok sayıda yemek sunuyor.

 fonksiyon rot13 (str) {
var re = yeni regexp ("[A-z]", "i");
var min = 'a'.charcodeat (0);
var max = 'z'.charcodeat (0);
var faktörü = 13;
var sonucu = "";
str = str.ToupperCase ();
  
için (var i = 0; i & lt; str.length; i ++) {
sonuç + = (re.test (str [i])?
String.fromcharcode ((str.charcodeat)
(i) - Min + Faktör)% (MAX-MIN + 1)
+ Min): str [i]);
}
İade Sonucu;
} 

06. İlk sefalet

Kodun bir kaçak çalıştırılması basittir. Çağırmak javascript-obfuscator ve programa mevcut çalışma dizininde bulunan tüm dosyalarda çalışmasını söylemek için bir noktaya geçin. Bu, yazarın IBM iş istasyonuna ilişkin sonuçları göstermektedir:

 TAMHAN @ Tamhan-ThinkPad: ~ / FutureObfuscate /
Kod $ JavaScript-Obfuscator. 

07. REGRECT çıktısı

Dosyaları doğrudan konteyner klasörüne atarken, isimler kullanılmadan önce değiştirilmesi gerektiği için verimsizdir. Daha iyi bir yol, kullanımını içerir. çıktı parametre. Eğer javascript-obfuscator Bulursa, program mevcut çalışma dizininde bir alt klasör oluşturur ve iştahlarının sonuçlarını orada bırakır.

 TAMHAN @ Tamhan-ThinkPad: ~ / FutureObfuscate / Kod $
javascript-obfuscator. --output ./obfuscaГ45]
  

08. Sonuçları analiz edin

How to hide your JavaScript code: Results

Korkunç, ama daha kötü olabilirdi

'Obfusca' klasörüne dalın ve bu adıma eşlik eden abominasyona gözlerinizi geliştirmek için çalışan.js'in yeni sürümünü açın. Kodun biçimlendirmesi kötü şekilde yönetildi. Bununla birlikte, yöntem adları, dış çağrılar için gerekli oldukları için aynı kaldı. Ayrıca, dizeler artık bir saldırganın onları elverişli bir şekilde toplayabileceği bir dizide oturuyorlar.

 VAR A0_0XB9E2 = ['HELLO \ X20FROM \ X20Future
\ x20plc ',' [A-z] ',' Test ',' CharcoDeat ']; 

09. Dize hasatını önleyin

JavaScript-Obfuscator, kullanılabilecek şekilde yapılandırılabilen bir dize mangring algoritması seçenekleriyle birlikte gelir. -Ring-dizi-kodlama . Çıktı dizininin her bir çağdaştan önce boşaltılması gerektiğini unutmayın, çünkü bunu yapmayı unutmak, çıktı dosyalarının bir önceki çalıştırmadan 'özyinelemeli' 'engellenmesine yol açar.

 TAMHAN @ Tamhan-ThinkPad: ~ / FutureObfuscate / Kod $
javascript-obfuscator. --output ./obfusca
-Ring-dizi kodlayan baz64 

10. Yine sonuçlara bakın

Bu noktada, Obfuscator'ın çıktımız farklı görünüyor - dosyanın üstündeki dizi çok daha az okunabilir. Ancak bu, tüm sorunları çözmez. Birkaç sefalet döngüsü yaparsanız, sonunda bu adıma eşlik eden birine benzer bir işaretle sonuçlanacaksınız:

 var a0_0x31e5 = ['BGVUZ3RO', 'DGVZDA ==', '
Znjvbunoyxjdb2rl ',' y2hhcknvzgvbda == ','
dg9vchblcknhc2u = '];
. . .
. . .
var mystring = 'Merhaba \ x20From \ x20future \ x20plc' 

11. Randomizasyonu Anlama

Obfuscators, yüksek performans ve kod koruması arasındaki basınç alanında çalışır. Sorunu çözmenin bir yolu, 'randomising' unsurlarını içerir. Çalışma zamanı-pahalı seferler tüm düğümlere, ancak yalnızca bir alt kümeye eklenmez. Düğümlerin etkilenmesi durumunda veya değil, genellikle duyarlılığı ayarlanabilir, rasgele bir sayı üreteci ile yapılmazsa algılama.

12. Dizelerden Sonra Git

Yukarıda belirtilen rastgele sayı üreteci, sıfırdan birine kadar değişen sayılar yayar. Sayı eşikten daha büyükse, modifikasyon gerçekleşmez. Ayar stringarraytreshold Birinin değerine kadar, tüm sayıların eşikten daha küçük olduğu, her bir dizgenin mangalanmasını sağlaması anlamına gelir.

 TAMHAN @ Tamhan-ThinkPad: ~ / FutureObfuscate / Kod $
javascript-obfuscator. --output ./obfusca
-Ring-dizi-kodlayan Base64
--stringarraytreshold 1 

13. Rastgele kod enjekte edin

JSnice karı gibi analiz araçları küçük bir kod tabanına sahip olmaktan kaynaklanır. JavaScript-Obfuscator'ın kodu bir AST'ye böldüğü göz önüne alındığında, hiçbir şey sinek üzerinde 'çöp kodu' eklemem. Bu özellik önemli bir şişko eklediğinden, geliştiriciler bunun yanında gösterilen iki parametre üzerinden manuel olarak etkinleştirmelidir:

 - Kod enjeksiyonu & lt; boolean & gt;
--Dead kodu-enjeksiyon eşiği & lt; number & gt; 

14. Kaosun tadını çıkarın

Obfuscator'u her ikisiyle de çalıştırmak --Dead kodu enjeksiyonu gerçek ve --Dead kodu-enjeksiyon eşiği 1 Set, yaklaşık 2.5KB'lık bir dosyaya yol açar. Kodu belirlemeye çalışmak, çoğunlukla totololojik javascript'in neredeyse belirsiz bir duvara yol açar.

15. Agresif bir şekilde program akışını değiştirin

Bir AST kodunu kesmek derin dönüşümlere izin verir. ayarlamak controlflowflating True özelliğine, programa, fonksiyon çağrılarını içerebileceğini söyler. Bu, oluşturulan kodun önemli bir genişlemesine yol açar - sonuçların yüzde 150 performans sergileyebileceğini unutmayın.

16. Hata ayıklayıcıyı sinirlendir

Hata ayıklamadan eserler, dünyanın korsanlara en büyük hediyesidir. Console.log () ve arkadaşlarına birkaç çağrı, bir saldırganın programın içinde olanları hakkında değerli bilgiler verebilir - iyi bir örnek gösterilen snippet olacaktır:

 İşlev Dothetrick ()
{
var chiffrat;
console.log ("şifrelemek için hazırlanıyor
Chiffrat ");
Chiffrat = ROT13 (MyString);
konsol.log ("geri dönen şifreyi");
geri dönüş şifresini;
} 

17. Teknik problemleri değerlendirin

Programı aşağıdaki komutla yeniden şaşırtmaya çalışabiliriz. Dizge önbelleğe alma özelliğini devre dışı bırakır ve konsolu yeniden yönlendirme yoluyla kaydetmeyi devre dışı bırakmalıdır.

 TAMHAN @ Tamhan-ThinkPad: ~ / masaüstü /
DeadStuff / 2018nov / FutureObfuscate / Kod $
javascript-obfuscator. --output ./obfusca
-Ring-dizi-kodlayan yanlış
- disableconsoleoutput true 

18. Kedi ve fare oyunları oyna

Obfuscator ve tarayıcı satıcıları, hata ayıklayıcı işlevi hakkında uzun ve acı bir savaşla savaşırlar. Bundan dolayı, bu adıma eşlik eden program akış kesintilerinin konsol yönlendirmesi gibi 'agresif' önlemler genellikle uzun süre çalışmaz.

 Debugprotection: False,
debugprotectionInterval: false, 

19. Hızlı çevrimiçi şaşkınlık

NODE.JS paketinin tamamını bir veya iki dosyayı engellemek için takma anlamsızdır. Ziyaret etmek obfuscator.io Tarayıcınızda yaşayan programın çevrimiçi bir sürümüne erişmek için. Ana girişin altındaki kontrol ve komboxokslar, yukarıdaki adımlarda belirtilen program davranışını değiştirmenizi sağlar.

20. Daha fazla bilgi edinin

How to hide your JavaScript code: Learn more

İhtiyacınız olan tüm parametreleri görmek için tıklayın

Geliştirici ekibi, çeşitli komut satırı parametrelerinin birbirleriyle etkileşime girme şeklini açıklayan nispeten ayrıntılı bir belgeyi korur. Sadece ziyaret buraya kafa Yukarıda gösterilen 'kısa yardım' çıkışı, hedefinize ulaşmanıza yardımcı olmaz.

21. Bir Obfuscator'un ölümcül düşmanı

How to hide your JavaScript code: JS Nice

JS Nice, kodunuzu okunamayan hale getirmenin kolay bir yoludur.

ETH Zürih, barındırılan bir De-Obfuscation servisi sağlar. jsnice.org . Sinir ağlarını ve değişken adlarını belirlemek için mevcut koddan oluşan bir bilgi veritabanını kullanır. Biçimlendirmeyi çözerken genellikle oldukça iyi çalışır, bazıları gibi. pixelsizetargetmax Bu adıma eşlik eden şifreleme rutininde - oldukça eğlenceli olabilir.

 FUNCTION ROT13 (PL $ 120) {
/ ** @Type {! Regexp} * /
var insufficientregexp = yeni regexp
(A0_0x395D ("0x1"), "I"); zırva
pixelsizetargetmax = "a" ["charcodeat"] (0);
var zerosizemax = "z" ["charcodeat"] (0);
/** @Numara giriniz} */
var minh = 13;
/ ** @Type {string} * /
var out = ""; 

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com 

Web Tasarımcıları için ödüllü kazanan konferans, 24-25 Nisan'da NYC'ye döner! Bilet ziyaret etmek www.generateconf.com

Bu makale başlangıçta yaratıcı web tasarım dergisinin 283'ü yayınlandı. Web tasarımcısı . Sayı 283 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

  • En iyi JavaScript çerçevelerinin 9'u
  • Açıklandı: en son javascript trendleri
  • 5 Awesome Javascript APIS

Nasıl Yapılır - En Popüler Makaleler

Bir tuval nasıl gerilir ve yağlı boyalar için ayarlanır

Nasıl Yapılır Sep 10, 2025

(Resim Kredi: Getty Images) Bir tuvalin nasıl gerileceği ve yağ boyaları için ayarlayacağınızla ilgili rehber..


Perspektifi nasıl çizilir

Nasıl Yapılır Sep 10, 2025

Perspektifin nasıl doğru çizileceğini öğrenmek, tüm çizim sürecinizi değiştirebilir. Geleneksel olarak kalem ve kağıtla çizin veya bir grafik tableti kullanarak dijital olarak, ..


JamStack: Bugün daha hızlı, daha verimli web siteleri oluşturun

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek / Joseph Ford) JamStack, sunucu tarafından istenen minimal yüke sahip web sitelerini olu..


Grav CMS ile başlayın

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek) Grav, bir içerik yönetim sistemidir (CMS) farklılık gösterir. İçerik yönetim sist..


Google Recaptcha ile Botları Durdurun

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek) Botları dışarıda tutmak her zaman bir sayı oyunudur - ne yazık ki, kullanımı kola..


Unreal motorda çimleri hazırla

Nasıl Yapılır Sep 10, 2025

Mimari görselleştirme oluştururken, birçok ayrıntıyı temsil etmeniz gerekir ve en çok zaman alıcıdan biri çimen, ağa�..


Çocuklar için canlandırmayı öğrenir

Nasıl Yapılır Sep 10, 2025

Blue Hayvanat Bahçesi'nin Bader Badruddin, 13 Mart'ta Vertex'te olacak. Bir karikatür tarzı animasyon vuruşunun nasıl tamaml..


GIF'lerden daha fazla nasıl elde edilir

Nasıl Yapılır Sep 10, 2025

Gifler sorunsuz döngülerde çalışır; Rebecca alay 'Mükemmel döngü' olarak tanımlanır. Bu döngü ideal olarak ilk ve ..


Kategoriler