Eğer hiç gerçek bir proje yazmak zorunda kaldıysanız, güvenlik endişeleri var — ya da en azından olmalıdır. Teknoloji ilerledikçe, kısa sürede harika, güçlü, yüksek performanslı sistemler yazabiliyoruz, ancak bu aynı zamanda kötü niyetli insanların ve teknolojilerin daha güçlü ve alt edilmesi zor hale geldiği anlamına geliyor. Bu nedenle, bugün sistemler geliştirilirken tüm yaygın güvenlik açıklarına karşı korunmak çok önemlidir.
Angular, kutudan itibaren birçok güvenliği sağlıyor: kendi değişken koruma sistemi ve uygulamanızda kötü amaçlı kodun çalışmasını engelleyen temizleme özellikleri var. Bir diğer özellik ise kod sıkıştırmasıdır.
Küçültme ve karışıklık
Kod sıkıştırma, boşluklar ve yorumlar gibi gereksiz karakterleri kaldırarak kaynak kodun boyutunu azaltan ve kaynak kodun yükleme performansını artıran bir tekniktir. Bu süreç, JavaScript, CSS ve HTML dosyaları için web geliştirmede yaygındır ve kodu gizleyerek bir güvenlik katmanı ekler. Sıkıştırılmış kodu okumak son derece zordur, bu yüzden bir tür gizlenme olarak kabul edilir. Ancak araç, kodu okunabilir hale getirmek için dekompres yapabilir ve bu kod tersine mühendislik yoluyla yapılabilir. İşte burada kafa karışıklığı devreye giriyor.
Sıkıştırmayı tamamlayan kod gizlenmesi, kaynak kodu anlamayı ve tersine mühendisliği zorlaştıran bir tekniktir. Genellikle fikri mülkiyeti korumak, müdahaleyi önlemek ve ters mühendisliği caydırmak için kullanılır; bu da saldırganların kodun mantığını anlamasını ve potansiyel zayıflıkları tespit etmesini zorlaştırır. Okunabilir kodu, işlevselliğini değiştirmeden daha karmaşık ve belirsiz versiyonlara dönüştürür. Kod gizlenme araçları ayrıca saldırganları yanıltmak için ölü kod ekleyerek yazılım kod tabanını anlamayı zorlaştırabilir.
Peki, Angular uygulamamızı faydalı bulursanız karıştıralım.
Webpack gizleyicisi
Angular, paketleme aşamasında Webpack kullanıyor ve geliştirdiğiniz modülleri paketlemek için kendi varsayılan ayarlarına sahip. Bundan faydalanıp Webpack'in Angular uygulamalarını nasıl paketlediğini özelleştireceğiz. Öncelikle aşağıdaki paketleri kurun:
javascript-obfuscator: Kaynak kodunuzu korumak için çeşitli özelliklere sahip güçlü bir ücretsiz JavaScript gizleyicisi.
Webpack-Obfuscator ise Webpack'e işlevsellik sağlamak için bir eklenti olarak kullanır. JavaScript gizleyici kodunu burada, Webpack gizleyici eklentisini ise buradan bulabilirsiniz.Bağlantı girişi görünür.
Bundan sonra, paketleme sürecinde uygulamak istediğimiz özel yapılandırmayla bir custom-webpack.config.js dosyası oluşturun. İşte basit bir örnek:
Eklentiler için birçok farklı yapılandırma seçeneği sunabilirsiniz, webpack-obfuscator karışık çıktıyı ince ayar edebilir. Bu, kodunuza debugProtection eklemenin en basit yoludur; bu da konsolun uygulamanızın değişkenlerini ve fonksiyonlarını takip etmesini zorlaştırır.
Not: WebpackObfuscator'daki ikinci bölümDizi parametreleri, gizlenmeyi dışlayan dosyalardır。
Şu ana kadar Webpack için yapılandırmayı ayarladık. Şimdi onu kullanmamız gerekiyor. Ayrıca başka bir bağımlılığa da ihtiyacımız var:
Bu, özel webpack oluşturucumuzu Angular ile entegre etmemize yardımcı olacak ve Angular kullanarak yapılar inşa etmeye devam edebilecek. Paket kurulduktan sonra sadece dosyayı angular.json değiştirmemiz gerekiyor. Build özniteliğini arayın ve aşağıdakileri ekleyin:
builderfrom'u @angular-devkit/build-angular:browser ile @angular-builders/custom-webpack:browser ile değiştirerek, tarayıcı için hâlâ oluşturabiliyoruz, ancak artık özel webpack yapılandırmamızı enjekte edebiliyoruz. customWebpackConfig özelliği, Angular'ın dosyayı kullanabilmesi için dosyaya referansı ayarlar.
Her şey doğru ayarlanmışsa, build komutlarınız sorunsuz çalışacak ve sonuç kafa karıştırıcı bir Angular uygulaması olacak!
Eksiklik
Ancak, bu yöntemin paket boyutu açısından dezavantajları olduğunu unutmayın. Kod gizleme, kodu tersine mühendislik yapmayı zorlaştırır, ancak değişkenleri belirtme şekli daha fazla karakter kullanır, bu da paketin boyutunda neredeyse kod minimizasyonuna ters yönde bir artış sağlar.
Hepsi bu. Amacı kullanarak kullanmayı ve bu teknolojinin eksikliklerini nasıl gidereceğinizi öğrenin!
Özgün:Bağlantı girişi görünür.
Referans:Bağlantı girişi görünür. |
2024-12-23 tarihinde 11:06:14 tarihinde yayınlandı
|
|
|
