실제 프로젝트를 작성해본 적이 있다면, 보안 문제는 존재하거나 적어도 그래야 합니다. 기술이 발전함에 따라 우리는 짧은 시간 안에 놀랍고 강력하며 고성능 시스템을 만들 수 있지만, 이는 악의적인 사람과 기술이 더 강력해지고 극복하기 어려워진다는 뜻이기도 합니다. 그래서 오늘날 시스템을 개발할 때 모든 공통 취약점으로부터 보호하는 것이 필수적입니다.
Angular는 기본적으로 많은 보안을 제공합니다: 자체 변수 보호 시스템과 악성 코드가 앱 내에서 실행되는 것을 방지하는 소독 기능을 갖추고 있습니다. 또 다른 기능은 코드 압축입니다.
최소화와 혼란
코드 압축은 공백이나 주석과 같은 불필요한 문자를 제거하여 소스 코드 크기를 줄이는 기법으로, 소스 코드의 로딩 성능을 향상시킵니다. 이 과정은 JavaScript, CSS, HTML 파일 웹 개발에서 흔히 볼 수 있으며, 코드를 난독화함으로써 보안 계층을 더해줍니다. 압축된 코드는 읽기 매우 어려워서 일종의 난독화로 간주됩니다. 하지만 도구는 코드를 읽기 쉽게 압축할 수 있으며, 이를 역설계할 수 있습니다. 여기서 혼란이 생깁니다.
압축을 보완하는 코드 난독화는 소스 코드를 이해하고 역설계하기 어렵게 만드는 기법입니다. 이 도구는 종종 지적 재산권을 보호하고, 변조를 방지하며, 역설계를 억제하는 데 사용되며, 공격자가 코드의 논리를 이해하고 잠재적 취약점을 식별하기 어렵게 만듭니다. 기능을 변경하지 않고 읽기 쉬운 코드를 더 복잡하고 생소한 버전으로 변환합니다. 코드 난독화 도구는 죽은 코드를 추가해 공격자를 오도할 수 있으며, 이는 소프트웨어 코드베이스를 이해하기 어렵게 만듭니다.
만약 유용하다면 저희 Angular 앱을 혼동해 봅시다.
웹팩 오브스케이터
Angular는 패키징 단계에서 Webpack을 사용하며, 개발한 모듈의 기본 설정을 따로 가지고 있습니다. 이를 활용해 Webpack이 Angular 앱을 어떻게 패키징하는지 맞춤화할 것입니다. 먼저, 다음 패키지를 설치하세요:
javascript-obfuscator: 소스 코드를 보호하는 다양한 기능을 갖춘 강력한 무료 JavaScript 난독화기입니다.
반면 webpack-obfuscator는 이를 플러그인으로 사용하여 Webpack에 기능을 제공합니다. JavaScript obfuscator 코드는 여기에서 찾을 수 있고, Webpack obfuscator 플러그인은 여기에서 확인할 수 있습니다.하이퍼링크 로그인이 보입니다.
그 다음, 번들링 과정에서 적용할 커스텀 구성이 담긴 custom-webpack.config.js 파일을 만듭니다. 간단한 예시를 하나 들어보겠습니다:
플러그인에 대해 다양한 설정 옵션을 제공할 수 있고, 혼란스러운 출력을 세밀하게 조정할 수 있는 webpack-obfuscator도 있습니다. 이것은 debugProtection을 코드에 추가하는 가장 간단한 방법으로, 콘솔을 사용해 애플리케이션의 변수와 함수를 추적하기 어렵게 만듭니다.
참고: WebpackObfuscator의 두 번째배열 매개변수는 난독화를 배제하는 파일입니다。
지금까지 Webpack 설정을 설정했습니다. 이제 그걸 써야 해. 또 다른 의존성이 필요합니다:
이 덕분에 저희 커스텀 웹팩 빌더를 Angular와 통합할 수 있어, 여전히 Angular로 구조물을 만들 수 있게 됩니다. 패키지가 설치되면 파일 angular.json만 변경하면 됩니다. 빌드 속성을 검색해서 다음 항목을 추가하세요:
builderfrom을 @angular-devkit/build-angular:browser로 대체하여 @angular-builders/custom-webpack:browser로 대체함으로써 브라우저용으로 빌드할 수 있으면서도 커스텀 웹팩 구성을 주입할 수 있습니다. customWebpackConfig 속성은 파일에 대한 참조를 설정하여 Angular가 사용할 수 있게 합니다.
모든 것이 제대로 설정되어 있다면 빌드 명령어는 잘 작동할 것이고, 결과적으로 혼란스러운 Angular 앱이 될 것입니다!
결점
하지만 이 방법은 패키지 크기 측면에서 단점이 있다는 점을 유의해 주세요. 코드 난독화는 코드를 역설계하기 어렵게 만들지만, 변수 선언 방식 때문에 더 많은 문자를 사용해 패키지 크기가 커지는데, 이는 코드 최소화와는 거의 반대 방향입니다.
그거에요. 반드시 목적을 가지고 사용하고, 이 기술의 한계를 해결하는 방법을 배우세요!
원문 언어:하이퍼링크 로그인이 보입니다.
참조:하이퍼링크 로그인이 보입니다. |
2024-12-23 11:06:14에 게시됨
|
|
|
