프론트엔드 코드 난독화 | 보안과 효율성

개발자 도구 >source 탭을 켜면 프론트의 소스 코드를 확인할 수 있다. 
 
그런데 변수명이 e,u,i 등 .. 가독성이 좋지 못한 알파벳으로 부여되어있다.

 
처음에는 회사 내부에서 따로 규칙이 있나? 생각했는데 규칙성도 없고 일일이 찾아봐야 하는 정도여서 약간의 의아함이 있었다. 그리고 모든 폴더구조와 코드가 공개되어 있는 것도 서버측 코드만 보던 나로서는 이해할 수 없었다.
 

프론트 코드의 공개 범위 설정 

1. 개발자도구에 공개되는 부분을 예상할 수 있어서 선택적으로 구조를 조정한다
    (== 프론트 코드는 개발자탭에 모두 공개되어서 중요한 로직은 서버로 넘긴다) 
2. 프론트 분들이 배포시 어디까지 공개할 것인지 이점을 고려해 선택할 수 있다.
 
이렇게 두 개로 예상했는데, 둘 다 반은 맞고 반은 틀리다는 대답을 들었다.
 
일반적으로 코드 공개는 "전체공개" 이거나 "전체 비공개" 라고 한다. 즉, 공개 되는 부분은 전부 공개되거나, 아예 없기 때문에 구조를 조정하지는 않는다. 그러나 중요한 로직을 서버로 넘기는 것은 보안 외에도 여러가지 이점이 있기 때문이라는 답을 들었다. 배포할 때 "난독화"와 "압축" 이라는 과정을 거치는데 보안 외에도 번들 크기를 줄이기 위해서도 사용된다는 것이다.
웹 화면이 빠르게 로딩되게 하기 위해서 "난독화" 와 "압축" 기법을 사용하는 것이다.
 
 

Uglify : 난독화 

여기서의 난독화는 함수나 변수 이름을 알파벳 하나로 대체하는 등 코드에 변화를 주어 해석할 수 없을 만큼 축약하는 것을 말한다. 변수명, 함수명 치환에서부터 자바스크립트의 일부 루틴을 문자열로 바꿔 변수에 담고, 뒤섞는 단계 등 여러 단계가 존재한다. 난독화의 단계를 높일 수록 루틴을 알아보기 어렵게 만들 수 있다. 일차적이지만 매우 기초적인 보안 효과.
 
 
ex) UglifyJS 라는 툴을 사용하여 난독화 한 경우
 
- 사용 전 : 

function hello(name) {
  console.log('Hello, ' + name + '!');
}
 
hello('World');

 
 
- 사용 후 :

!function(o){console.log("Hello, "+o+"!")}("World");

 
이렇게 된다. 
 
 
 

minify : 압축 

압축은 전체 소스코드 중 불필요한 공백, 줄바꿈, 들여쓰기, 주석 등을 제거하는 것이다. 문법적으로 필수가 아닌(ex) 자바스크립트에서의 세미콜론) 등을 제거한다. 경우에 따라 console.log, debugger 등의 디버깅용 구문 또는 메서드는 호출됨. 
 
ex) 
- 최소화 전

function sayHi(name) {
	console.log("Hi"+name+"nice to meet u")
}

sayHi("Sam");

 
 
- 최소화 후 

function sayHi(o) {console.log("Hi"+o+"nice to meet u")}sayHi("Sam");

 
이런식으로 파일 크기를 줄인다. 
 
 

압축과 난독화 

그런데 별도의 툴을 사용하지 않아도, Webpack v4이상의 버전에서는 Mode가 production 일 때 자동으로 압축과 난독화를 진행한다고 한다. 이 과정에서 teser-webpack-plugin 이 사용되며 Teser는 동시에 난독화까지 해준다. 이 과정을 생략하고 싶다면 webpack 설정에 optimization: {minimize : false} 를 추가해주면 된다. 
 
 
 

압축과 난독화가 미치는 영향 

 
앞서 말한 것처럼 보안과, 경우에 따라서는 스크립트 수행 속도에도 영향을 미친다. 하지만 이러한 방법을 사용한다고 해서 무조건 웹 사이트의 로딩이 빨라지는 것은 아니다. 특히 uglify 같은 경우엔 난독화의 단계를 높일수록 코드를 해석하고 실행하는 데 시간이 더 오래 걸리게 된다고 한다. 따라서 적절히 성격을 파악하고 단계를 조절해야 한다.
 

---

코드를 작성할 때 '누구나 이해하기 쉬운 코드' 로 작성하라고 배운다. 그리고 그것이 '좋은 코드'로 통용된다. 그래서 '효율적인 코드' 는 자세한 함수명, 상세한 주석 등에 부합하는 코드라고 생각해왔다. 하지만 사실 그것은 사람이 이해하는 데 효율적인 코드였을 뿐 '실행'되는데 효율적인 코드는 아니었던 것이다. 
 
말하자면.. " 브라우저는 코드를 이해할 필요 없이 코드를 실행할 수 있다 " 
 
얼마전 출근길에 본 궤도 유튜브에서 어떤 현상에 대해, '인간이 이해할 수 있어야만 그 일이 타당한 것은 아니다' 라고 하던데, 정확한 비유는 아니지만 그 말이 생각나는 순간이었다 ...ㅋㅋㅋ
 
 

---

ref : 

• https://www.cloudflare.com/ko-kr/learning/performance/why-minify-javascript-code/
• https://medium.com/@uk960214/%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-1-%EB%B2%88%EB%93%A4-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0-react-webpack-minify-code-splitting-e2391e7e5f1b
• https://www.happykoo.net/@happykoo/posts/56