Εάν χρειάστηκε ποτέ να γράψετε ένα πραγματικό έργο, υπάρχουν ανησυχίες για την ασφάλεια — ή τουλάχιστον θα έπρεπε να είναι. Καθώς η τεχνολογία προχωρά, μπορούμε να γράψουμε εκπληκτικά, ισχυρά συστήματα υψηλής απόδοσης σε σύντομο χρονικό διάστημα, αλλά σημαίνει επίσης ότι οι κακόβουλοι άνθρωποι και οι τεχνολογίες γίνονται πιο ισχυροί και δύσκολο να ξεπεραστούν. Αυτός είναι ο λόγος για τον οποίο είναι απαραίτητη η προστασία από όλα τα κοινά τρωτά σημεία κατά την ανάπτυξη συστημάτων σήμερα.
Το Angular φροντίζει για πολλή ασφάλεια από το κουτί: έχει το δικό του σύστημα μεταβλητής προστασίας και λειτουργίες απολύμανσης που εμποδίζουν την εκτέλεση κακόβουλου κώδικα στην εφαρμογή σας. Ένα άλλο χαρακτηριστικό είναι η συμπίεση κώδικα.
Ελαχιστοποίηση και σύγχυση
Η συμπίεση κώδικα είναι μια τεχνική που μειώνει το μέγεθος του πηγαίου κώδικα αφαιρώντας περιττούς χαρακτήρες όπως κενά και σχόλια, βελτιώνοντας την απόδοση φόρτωσης του πηγαίου κώδικα. Αυτή η διαδικασία είναι κοινή στην ανάπτυξη ιστού για αρχεία JavaScript, CSS και HTML και κατά κάποιο τρόπο προσθέτει ένα επίπεδο ασφάλειας θολώνοντας τον κώδικα. Ο συμπιεσμένος κώδικας είναι εξαιρετικά δυσανάγνωστος, γι' αυτό και θεωρείται κάποιου είδους συσκότιση. Ωστόσο, το εργαλείο μπορεί να αποσυμπιέσει τον κώδικα για να τον κάνει ευανάγνωστο, ο οποίος στη συνέχεια μπορεί να γίνει αντίστροφη μηχανική. Εδώ μπαίνει η σύγχυση.
Συμπληρώνοντας τη συμπίεση, η συσκότιση κώδικα είναι μια τεχνική που καθιστά τον πηγαίο κώδικα δύσκολο να κατανοηθεί και να αναστραφεί η μηχανική. Συχνά χρησιμοποιείται για την προστασία της πνευματικής ιδιοκτησίας, την πρόληψη της παραβίασης και την αποτροπή της αντίστροφης μηχανικής, καθιστώντας δύσκολο για τους εισβολείς να κατανοήσουν τη λογική του κώδικα και να εντοπίσουν πιθανές ευπάθειες. Μετατρέπει τον αναγνώσιμο κώδικα σε πιο σύνθετες και σκοτεινές εκδόσεις χωρίς να αλλάζει τη λειτουργικότητά του. Τα εργαλεία συσκότισης κώδικα μπορούν επίσης να προσθέσουν νεκρό κώδικα για να παραπλανήσουν τους εισβολείς, καθιστώντας δυσκολότερη την κατανόηση της βάσης κώδικα λογισμικού.
Λοιπόν, ας μπερδέψουμε την εφαρμογή Angular αν τη βρίσκετε χρήσιμη.
Συσκότιση Webpack
Το Angular χρησιμοποιεί το Webpack κατά τη φάση της συσκευασίας και έχει τις δικές του προεπιλεγμένες ρυθμίσεις για τη συσκευασία των λειτουργικών μονάδων που αναπτύσσετε. Θα το εκμεταλλευτούμε και θα προσαρμόσουμε τον τρόπο με τον οποίο το Webpack συσκευάζει τις εφαρμογές Angular. Αρχικά, εγκαταστήστε τα ακόλουθα πακέτα:
javascript-obfuscator: Ένας ισχυρός δωρεάν συσκοτιστής JavaScript με μια ποικιλία λειτουργιών για την προστασία του πηγαίου κώδικα σας.
ενώ το webpack-obfuscator το χρησιμοποιεί ως πρόσθετο για να παρέχει λειτουργικότητα στο Webpack. Μπορείτε να βρείτε τον κώδικα συσκότισης JavaScript εδώ και την προσθήκη συσκότισης Webpack εδώ.Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Μετά από αυτό, δημιουργήστε ένα αρχείο custom-webpack.config.js με την προσαρμοσμένη διαμόρφωση που θέλουμε να εφαρμόσουμε κατά τη διαδικασία ομαδοποίησης. Ακολουθεί ένα απλό παράδειγμα:
Μπορείτε να παρέχετε πολλές διαφορετικές επιλογές διαμόρφωσης για πρόσθετα, webpack-obfuscator για να ρυθμίσετε με ακρίβεια τη συγκεχυμένη έξοδο. Αυτό είναι το πιο απλό για να προσθέσετε debugProtection στον κώδικά σας, γεγονός που καθιστά δύσκολη τη χρήση της κονσόλας για την παρακολούθηση των μεταβλητών και των λειτουργιών της εφαρμογής σας.
Σημείωση: Το δεύτερο στο WebpackObfuscatorΟι παράμετροι πίνακα είναι αρχεία που αποκλείουν τη συσκότιση。
Μέχρι στιγμής, έχουμε ρυθμίσει τη διαμόρφωση για το Webpack. Τώρα πρέπει να το χρησιμοποιήσουμε. Χρειαζόμαστε επίσης μια άλλη εξάρτηση:
Αυτό θα μας βοηθήσει να ενσωματώσουμε το προσαρμοσμένο πρόγραμμα δημιουργίας πακέτων ιστού με το Angular, ώστε να μπορούμε ακόμα να δημιουργήσουμε δομές χρησιμοποιώντας το Angular. Μόλις εγκατασταθεί το πακέτο, δεν έχουμε παρά να αλλάξουμε το αρχείο angular.json. Αναζητήστε το χαρακτηριστικό δόμησης και προσθέστε τα εξής:
Αντικαθιστώντας το builderfrom με το @angular-devkit/build-angular:browser στο @angular-builders/custom-webpack:browser, μπορούμε ακόμα να δημιουργήσουμε για το πρόγραμμα περιήγησης, αλλά τώρα μπορούμε να εισάγουμε την προσαρμοσμένη διαμόρφωση του webpack. Η ιδιότητα customWebpackConfig ορίζει την αναφορά στο αρχείο, έτσι ώστε το Angular να μπορεί να το χρησιμοποιήσει.
Εάν όλα έχουν ρυθμιστεί σωστά, οι εντολές κατασκευής σας θα πρέπει να λειτουργούν καλά και το αποτέλεσμα θα είναι μια μπερδεμένη εφαρμογή Angular!
έλλειψη
Ωστόσο, σημειώστε ότι αυτή η μέθοδος έχει μειονεκτήματα όσον αφορά το μέγεθος της συσκευασίας. Η συσκότιση κώδικα καθιστά δυσκολότερη την αντίστροφη μηχανική κώδικα, αλλά ο τρόπος με τον οποίο δηλώνει τις μεταβλητές χρησιμοποιεί περισσότερους χαρακτήρες, με αποτέλεσμα την αύξηση του μεγέθους του πακέτου - σχεδόν προς την αντίθετη κατεύθυνση της ελαχιστοποίησης του κώδικα.
Αυτό είναι. Φροντίστε να το χρησιμοποιήσετε σκόπιμα και μάθετε πώς να αντιμετωπίζετε τις ελλείψεις αυτής της τεχνολογίας!
Αρχικός:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Αναφορά:Η σύνδεση με υπερσύνδεσμο είναι ορατή. |
Δημοσιεύτηκε στις 2024-12-23 11:06:14
|
|
|
