Jika Anda pernah harus menulis proyek yang sebenarnya, ada masalah keamanan — atau setidaknya seharusnya. Seiring kemajuan teknologi, kita dapat menulis sistem yang luar biasa, kuat, dan berkinerja tinggi dalam waktu singkat, tetapi itu juga berarti bahwa orang jahat dan teknologi menjadi lebih kuat dan sulit diatasi. Itulah mengapa penting untuk melindungi dari semua kerentanan umum saat mengembangkan sistem saat ini.
Angular menangani banyak keamanan di luar kotak: ia memiliki sistem perlindungan variabel sendiri dan fitur sanitasi yang mencegah kode berbahaya berjalan di aplikasi Anda. Fitur lainnya adalah kompresi kode.
Meminimalkan dan kebingungan
Kompresi kode adalah teknik yang mengurangi ukuran kode sumber dengan menghapus karakter yang tidak perlu seperti spasi dan komentar, meningkatkan performa pemuatan kode sumber. Proses ini umum dalam pengembangan web untuk file JavaScript, CSS, dan HTML, dan entah bagaimana menambahkan lapisan keamanan dengan mengaburkan kode. Kode terkompresi sangat sulit dibaca, itulah sebabnya kode ini dianggap sebagai semacam pengaburan. Namun, alat ini dapat mendekompresi kode agar dapat dibaca, yang kemudian dapat direkayasa balik. Di sinilah kebingungan masuk.
Melengkapi kompresi, pengaburan kode adalah teknik yang membuat kode sumber sulit dipahami dan direkayasa balik. Ini sering digunakan untuk melindungi kekayaan intelektual, mencegah gangguan, dan mencegah rekayasa balik, sehingga sulit bagi penyerang untuk memahami logika kode dan mengidentifikasi potensi kerentanan. Ini mengubah kode yang dapat dibaca menjadi versi yang lebih kompleks dan tidak jelas tanpa mengubah fungsinya. Alat pengaburan kode juga dapat menambahkan kode mati untuk menyesatkan penyerang, sehingga lebih sulit untuk memahami basis kode perangkat lunak.
Nah, mari kita bingungkan aplikasi Angular kami jika menurut Anda berguna.
Obfuscator Webpack
Angular menggunakan Webpack selama fase pengemasan dan memiliki pengaturan defaultnya sendiri untuk mengemas modul yang Anda kembangkan. Kami akan memanfaatkan ini dan menyesuaikan cara Webpack mengemas aplikasi Angular. Pertama, instal paket berikut:
javascript-obfuscator: Obfuscator JavaScript gratis yang kuat dengan berbagai fitur untuk melindungi kode sumber Anda.
sedangkan webpack-obfuscator menggunakannya sebagai plugin untuk menyediakan fungsionalitas ke Webpack. Anda dapat menemukan kode obfuscator JavaScript di sini, dan plugin obfuscator Webpack di sini.Login hyperlink terlihat.
Setelah itu, buat file custom-webpack.config.js dengan konfigurasi khusus yang ingin kita terapkan selama proses bundling. Berikut adalah contoh sederhananya:
Anda dapat menyediakan banyak opsi konfigurasi yang berbeda untuk plugin, webpack-obfuscator untuk menyempurnakan output yang membingungkan. Ini adalah yang paling sederhana untuk menambahkan debugProtection ke kode Anda, yang menyulitkan penggunaan konsol untuk melacak variabel dan fungsi aplikasi Anda.
Catatan: Yang kedua di WebpackObfuscatorParameter array adalah file yang mengecualikan pengaburan。
Sejauh ini, kami telah menyiapkan konfigurasi untuk Webpack. Sekarang kita perlu menggunakannya. Kita juga membutuhkan dependensi lain:
Ini akan membantu kami mengintegrasikan pembuat webpack khusus kami dengan Angular sehingga kami masih dapat membangun struktur menggunakan Angular. Setelah paket diinstal, kita hanya perlu mengubah file angular.json. Telusuri atribut build dan tambahkan yang berikut ini:
Dengan mengganti builderfrom dengan @angular-devkit/build-angular:browser ke @angular-builders/custom-webpack:browser, kita masih dapat membangun untuk browser, tetapi sekarang dapat menyuntikkan konfigurasi webpack kustom kita. Properti customWebpackConfig mengatur referensi ke file sehingga Angular dapat menggunakannya.
Jika semuanya diatur dengan benar, perintah build Anda akan berfungsi dengan baik, dan hasilnya akan menjadi aplikasi Angular yang membingungkan!
Kekurangan
Namun, harap dicatat bahwa metode ini memiliki kelemahan dalam hal ukuran paket. Pengaburan kode membuatnya lebih sulit untuk merekayasa balik kode, tetapi cara mendeklarasikan variabel menggunakan lebih banyak karakter, menghasilkan peningkatan ukuran paket - hampir ke arah yang berlawanan dengan minimalisasi kode.
Itu saja. Pastikan untuk menggunakannya dengan sengaja dan pelajari cara mengatasi kekurangan teknologi ini!
Asli:Login hyperlink terlihat.
Referensi:Login hyperlink terlihat. |
Dipaparkan pada 2024-12-23 11:06:14
|
|
|
