코드를 왜 압축하고 난독화 해야할까요..?

[iam-cong]

안녕하세요. 주니어 프론트엔드 개발자 정태민입니다.

최근에 회사에서 백엔드 개발자분과 "왜 프론트엔드, 특히 자바스크립트 코드를 배포할 때 항상 코드를 압축하고 난독화를 하는 걸까?" 라는 주제로 토론할 일이 있었어요.

당시 프로덕션 환경에서 꽤 심각한 버그를 디버깅하고 있었는데, 백엔드 개발자분이 minify된 코드를 보고 “Chrome Sources 탭에서 그냥 브레이크포인트 걸고 디버깅하기도 힘들고, 왜 이렇게 항상 난독화되어 있지?”라고 약간의... 불만을 표하셨거든요.

저는 주로 다음과 같은 이유 때문이라고 설명했어요

1. 코드 용량이 줄어들어서 네트워크 트래픽 비용이 절감된다.
2. 어느 정도 “나쁜 의도”를 가진 이들이 소스를 바로 확인하기 어렵게 만들어준다.
3. 빌드 툴에 압축 및 난독화가 기본적으로 포함되어 있어서, 굳이 끄지 않는 한 자연스럽게 적용된다.

그런데 이 백엔드 개발자분은 이런 답에 만족하지 못하셨고,

“결국 나쁜 사람들은 어떻게든 코드를 해석하지 않겠느냐? 서버 보안을 강화하는 게 더 중요하지 않냐?”

“한국에서만 서비스 하는데.. 극단적인 사례를 제외하면, 인터넷 속도가 그리 큰 문제인가? 게다가 ChatGPT 같은 도구로 금방 디코드해버릴 수 있는데?”

라는 반론을 제기하시더라고요.

솔직히 저도 “원래부터 그렇게 배웠다” 이외에 딱히 다른 근거를 제시하긴 어려웠어요. 압축과 난독화가 실무적으로 당연히 쓰이긴 하는데, 구체적으로 왜 그렇게 하는지 확실한 근거를 더 들어보지 못한 것 같아서요.

그래서 다른 프론트엔드 개발자분들은 어떻게 생각하시는지 궁금합니다.

여러분은 실제로 번들링된 코드를 압축하고 난독화하는게 얼마나 효과적이라고 보시나요?
코드 크기 절감 외에 다른 실질적인 장점이 있다면 뭐가 있을까요?
“어차피 디코드하면 끝”이라는 주장에 대해 어떻게 대응하는 편이신가요?

다양한 의견 부탁드려요! 감사합니다.

[milooy]

"한국에서만 서비스 하는데.. 극단적인 사례를 제외하면, 인터넷 속도가 그리 큰 문제인가?"

단순히 '속도는 현대 시대에서 중요하지 않다'라고 말하는건 다양한 유저를 고려하지 못하는 아쉬운 점인 것 같아요 😢
한국은 인터넷 속도가 매우 빠르지만, 모바일 환경에서는 여전히 속도 차이가 발생할 수 있어요.
5G가 전국적으로 보급되었더라도 여전히 저속 모바일 네트워크를 사용하는 사용자들이 있습니다. 그리고 해외에서 서비스를 이용하는 한국인도 고려해야 하고요.
(+ 그리고 페이지 로딩 속도가 SEO에도 영향을 미친다고 해요.)

"ChatGPT 같은 도구로 금방 디코드해버릴 수 있는데?"

난독화는 보안의 첫 번째 방어선이에요. 물론 GPT 등으로 디코딩이 가능할 수 있지만, 보안은 다층적으로 작용해야 효과적이에요.
설령 디코딩을 하더라도 공격자의 자원이 투자되어야 하며, 얻을 수 있는 정보도 100%가 아닌 제한적인 부분일거예요.

---

그리고 회사에서 작성하는 소스코드는 회사의 자산으로서 보호받아야 하기도 해요 (외부 노출로 인한 불필요한 악용 방지).
날것 그대로 공개되면 보안 취약점이나 회사 기술의 약점이 드러날 수도 있고, 중요한 로직을 쉽게 가져갈 수 있는 여지도 줄 수 있어요.

도움이 되었으면 좋겠네요.

[jinuskr]

단순히 생각하면 난독화로 인해서 많은 정보의 손실이 발생합니다.
클래스명, 함수명, 변수명 등은 기획이나 개발자의 구현 의도까지 담고 있어서,
그게 없는 상태로는 "어떻게든 해석" 하더라도 그만큼 열화된 버전의 해석이 될 뿐입니다.

[yongsk0066]

동일 리소스로 보안을 대비한다 했을 때를 가정한다라면 프론트 번들 난독화 보다는 서버 보안을 강화하는 편이 나을 수 있다고 생각해요. 하지만 그것이 난독화가 불필요하다는 주장의 근거가 되긴 어려울 것 같아요. 나쁜 사람이 어떤 도구로 해제를 할 수 있다고 하더라도 상대의 리소스를 소모하는 것이니깐요.
비밀번호도 무차별대입하면 언젠가 맞출텐데 기억하기 편하게 1234 로 해도 되지 않느냐 와 비슷하다고 생각해요

아무래도 불만이 생겼던 근본적인 점은 난독화된 코드 디버깅시 어려움 때문이었을 것 같은데요. 크로미움 개발자 도구에는 생각보다 디버깅을 위한 요소들이 많이 갖춰져있습니다. 소스맵을 수동으로 업로드하여 원본코드와 매핑해서 보실 수도 있으니 오히려 이런 부분을 좀더 찾아보시는 것도 추천드립니다

https://developer.chrome.com/docs/devtools/developer-resources?hl=ko

[simnalamburt]

다들 Minify는 난독화가 맞다는 전제 하에 답변을 하시는것이 좀 이해가 안가서 말씀을 올립니다. 코드 Minify는 난독화가 아닙니다. 번들러는 obfuscation을 수행하지 않습니다. 실제로 Minify된 코드를 읽어보시면 Prettier만 한번 돌리셔도 나름 꽤 읽을만해지는걸 보실 수 있습니다. 대부분의 제대로된 상업용 난독화기는 identifier와 문자열 암호화는 물론이고 제어 흐름 그래프를 완전히 부숴서 인간은 절대 못읽을정도로까지는 만듭니다. https://any.run/cybersecurity-blog/net-malware-obfuscators-analysis-part-one/ 이런 글을 읽어보세요 Minify는 난독화 관점에선 거의 아무것도 안하는것이나 다름없습니다.

코드 Minify가 보안적 의미를 갖는다는 답변은 전 좀 이해하기 어렵습니다. Minify가 아주 약한 챌린지와 아주 조금의 귀찮음은 선사하겠지만 유의미한 보안수단은 전혀 아닙니다. (위키피디아의 Security through obscurity, 케르크호프스의 원리를 참고해주세요 둘 다 컴퓨터보안의 핵심 명제들입니다)

거의 순수하게 코드 용량을 줄여서 비용을 줄이고 속도를 올려서 유저를 이롭게하는것이 Minification의 존재목적입니다. 그리고 '어차피 인터넷 빠르니까 몇사람 디버깅의 편의를 위해 훨씬 많은 사람들의 데이터 비용과 시간을 낭비시키자'라는 주장은 황당한건 물론이고 부도덕하기까지 해보입니다. 거의 모든 Minifier들은 sourcemap이라는 훌륭한 도구를 제공해줘서, 코드는 줄이되 쉽게 디버깅하는것이 가능합니다. https://web.dev/articles/source-maps 프로그래머 능력의 한계때문에 불편함과 불필요한 비용을 사용자에게 전가하지 않았으면 좋겠습니다.

[milooy]

대부분의 제대로된 상업용 난독화기는 identifier와 문자열 암호화는 물론이고 제어 흐름 그래프를 완전히 부숴서 인간은 절대 못읽을정도로까지는 만듭니다.

알아갑니다 👍

[yongsk0066]

명확하게 바로잡아주셔서 감사합니다!

[kangyongseok]

원본

// write or paste code here

function hi() {
  console.log("Hello World!");
}
hi();

Minify

function hi(){console.log("Hello World!")}hi();

난독화

(function(_0x27e9a4,_0x294a05){var _0x2bfed3=_0x227f,_0x58659f=_0x27e9a4();while(!![]){try{var _0x25e9e4=parseInt(_0x2bfed3(0x197))/0x1*(parseInt(_0x2bfed3(0x199))/0x2)+-parseInt(_0x2bfed3(0x18e))/0x3*(parseInt(_0x2bfed3(0x192))/0x4)+-parseInt(_0x2bfed3(0x19b))/0x5*(parseInt(_0x2bfed3(0x196))/0x6)+-parseInt(_0x2bfed3(0x18f))/0x7*(parseInt(_0x2bfed3(0x19a))/0x8)+parseInt(_0x2bfed3(0x191))/0x9+-parseInt(_0x2bfed3(0x195))/0xa*(parseInt(_0x2bfed3(0x193))/0xb)+parseInt(_0x2bfed3(0x194))/0xc*(parseInt(_0x2bfed3(0x198))/0xd);if(_0x25e9e4===_0x294a05)break;else _0x58659f['push'](_0x58659f['shift']());}catch(_0x199231){_0x58659f['push'](_0x58659f['shift']());}}}(_0x5257,0x4a702));function _0x5257(){var _0x2fb0a3=['24iDAgXY','14671FDpcNm','533ItaZzN','44xFBlQx','840nhjuOG','231415qYGxRm','Hello\x20World!','2589owqmXY','9429DpkTXb','log','2483136GFUvCn','1168DFLOhU','22rzxOPb','156204JXNZiN','1244510fHNqLg'];_0x5257=function(){return _0x2fb0a3;};return _0x5257();}function hi(){var _0x2660da=_0x227f;console[_0x2660da(0x190)](_0x2660da(0x18d));}function _0x227f(_0x26b0e5,_0x13f0db){var _0x5257c8=_0x5257();return _0x227f=function(_0x227f75,_0x30b047){_0x227f75=_0x227f75-0x18d;var _0x1a9ec7=_0x5257c8[_0x227f75];return _0x1a9ec7;},_0x227f(_0x26b0e5,_0x13f0db);}hi();

리액트나 넥스트에서 Minify 와 난독화를 둘다 진행하나?

Minify 만 진행합니다.
그렇다면 왜 변수나 함수명이 바뀌어서 보여지는가 라고 생각해 볼 수 있을것같은데
Terser의 기본적인 mangle 최적화를 적용하는 과정에서 변경되는거라 난독화랑은 다르다고 볼 수 있습니다.
진정한 난독화를 위해서는 별도 설정이 필요하고 난독화진행하는 부분때문에 성능저하가 있을 수 있습니다.

보안적인 관점

사실 프론트에서의 보안은 최소한의 1차방어선 정도
쉽게알거나 가져가지 못하게 그냥 좀 귀찮게 하는정도 라고 생각합니다.
진짜 보안은 인프라나 백엔드에서 처리해야한다고 생각하구요

그래서 질문으로 돌아가면

“Chrome Sources 탭에서 그냥 브레이크포인트 걸고 디버깅하기도 힘들고, 왜 이렇게 항상 난독화되어 있지?”

그래서 보통 라이브는 프로덕션 빌드로 처리해서 최대한 소스코드를 압축해서 자원을 아끼고 성능을 고려해서 배포하고
별도의 베타나 개발 환경을 두고 해당 환경에서는 압축없이 올려서 테스트하는게 일반적인걸로 알고 있습니다.
백엔드 개발자 분이 말씀신건 공유가능한 베타나 개발 환경이 있다면 문제될 부분이 아니라고 생각합니다.
라이브되는 서비스는 사용자를 위한거지 백엔드개발자가 디버깅하기 편하라고 올리는게 아니니까요

지극히 본인 중심적인 개인적인 관점인것같고
사용자를 생각한다면 서비스를 제공하는 입장에서 당연히 처리되어져야하는 부분이 아닌가 생각합니다.

[iam-cong]

참여해주신 여러분 모두 감사드려요 🙇
백엔드 개발자분과는 원활히 해결하였습니다! 다시 한번 감사합니다!