Jos olet joskus joutunut kirjoittamaan varsinaisen projektin, turvallisuushuolia on olemassa — tai ainakin pitäisi olla. Teknologian kehittyessä voimme luoda upeita, tehokkaita ja suorituskykyisiä järjestelmiä lyhyessä ajassa, mutta se tarkoittaa myös, että pahantahtoiset ihmiset ja teknologiat muuttuvat voimakkaammiksi ja vaikeammiksi voittaa. Siksi on välttämätöntä suojautua kaikilta yleisiltä haavoittuvuuksilta järjestelmiä kehitettäessä nykyään.
Angular huolehtii paljon turvallisuudesta heti alusta alkaen: sillä on oma muuttuva suojausjärjestelmä ja puhdistusominaisuudet, jotka estävät haitallisen koodin käynnistymisen sovelluksessasi. Toinen ominaisuus on koodin pakkaus.
Minimointi ja sekaannus
Koodin pakkaus on tekniikka, joka pienentää lähdekoodin kokoa poistamalla tarpeettomia merkkejä, kuten välilyöntejä ja kommentteja, parantaen lähdekoodin lataustehoa. Tämä prosessi on yleinen JavaScript-, CSS- ja HTML-tiedostojen web-kehityksessä, ja se lisää jollain tavalla turvakerroksen hämärtämällä koodia. Pakattu koodi on erittäin vaikeasti luettavaa, minkä vuoksi sitä pidetään jonkinlaisena hämärryksenä. Työkalu voi kuitenkin purkaa koodin luettavaksi, ja se voidaan sitten kääntää uudelleen. Tässä kohtaa sekaannus astuu kuvaan.
Pakkauksen täydentämiseksi koodin hämärtäminen on tekniikka, joka tekee lähdekoodin ymmärtämisestä ja käänteisestä suunnittelusta vaikeaa. Sitä käytetään usein immateriaalioikeuksien suojaamiseen, manipuloinnin estämiseen ja käänteisen suunnittelun estämiseen, mikä vaikeuttaa hyökkääjien ymmärtämistä koodin logiikkaa ja mahdollisten haavoittuvuuksien tunnistamista. Se muuntaa luettavan koodin monimutkaisemmiksi ja harvinaisemmiksi versioiksi muuttamatta sen toiminnallisuutta. Koodin hämärtämistyökalut voivat myös lisätä kuollutta koodia harhauttaakseen hyökkääjiä, mikä vaikeuttaa ohjelmistopohjan ymmärtämistä.
No, sekoitetaan Angular-sovelluksemme, jos pidät sitä hyödyllisenä.
Webpackin hämärtäjä
Angular käyttää Webpackia pakkausvaiheessa ja sillä on omat oletusasetuksensa moduulien pakkaamiseen. Hyödynnämme tätä ja räätälöimme, miten Webpack paketoi Angular-sovelluksia. Asenna ensin seuraavat paketit:
javascript-obfuscator: Tehokas ilmainen JavaScript-obfuscator, jossa on monia ominaisuuksia lähdekoodin suojaamiseksi.
kun taas webpack-obfuscator käyttää sitä lisäosana tarjotakseen toiminnallisuutta Webpackille. JavaScriptin obfuscator-koodin löydät täältä ja Webpack-obfuscator-lisäosan täältä.Hyperlinkin kirjautuminen on näkyvissä.
Tämän jälkeen luo custom-webpack.config.js-tiedosto sillä mukautetulla kokoonpanolla, jonka haluamme soveltaa paketointiprosessin aikana. Tässä yksinkertainen esimerkki:
Voit tarjota monia erilaisia konfiguraatiovaihtoehtoja plugineille, kuten webpack-obfuscator, jolla hienosäädetään sekavan ulostulon. Tämä on yksinkertaisin tapa lisätä DebugProtection koodiisi, mikä vaikeuttaa konsolin käyttöä sovelluksen muuttujien ja toimintojen seuraamiseen.
Huomautus: Toinen osa WebpackObfuscatorissaTaulukon parametrit ovat tiedostoja, jotka sulkevat pois hämärryksen。
Tähän mennessä olemme asettaneet Webpackin asetukset. Nyt meidän täytyy käyttää sitä. Tarvitsemme myös toisen riippuvuuden:
Tämä auttaa meitä integroimaan mukautetun webpack-rakentajamme Angulariin, jotta voimme edelleen rakentaa rakenteita Angularilla. Kun paketti on asennettu, meidän tarvitsee vain vaihtaa tiedosto angular.json. Etsi build-attribuutti ja lisää seuraavat:
Korvaamalla builderfromin @angular-devkit/build-angular:browserilla @angular-builders/custom-webpack:browser, voimme silti rakentaa selaimelle, mutta voimme nyt lisätä oman webpack-konfiguraatiomme. customWebpackConfig-ominaisuus asettaa viitteen tiedostoon, jotta Angular voi käyttää sitä.
Jos kaikki on asetettu oikein, build-komentosi toimivat moitteettomasti, ja lopputuloksena on sekava Angular-sovellus!
puute
Huomioithan kuitenkin, että tällä menetelmällä on haittoja paketin koon suhteen. Koodin hämärtäminen vaikeuttaa koodin käänteistä suunnittelua, mutta muuttujien määrittelytapa käyttää enemmän merkkejä, mikä kasvattaa paketin kokoa – lähes päinvastaiseen suuntaan kuin koodin minimointi.
Siinä se. Muista käyttää sitä tarkoituksellisesti ja opi korjaamaan tämän teknologian puutteet!
Alkuperäinen:Hyperlinkin kirjautuminen on näkyvissä. Viittaus:Hyperlinkin kirjautuminen on näkyvissä. |