개인 프로젝트 - 소스 코드 난독화(React)

이 글을 작성하게 된 계기, 

최근 api 사이트를 오픈한 이후, 대기업들은 어떤 코드를 사용할까 궁금해서 

 

네이버에서 개발자 도구 => 소스탭에 가서 

소스 코드를 보려고 시도해보았다.

 

하지만 당연하게도 대놓고 소스 코드를 보여줄 바보들은 아니다.

 

보안 쪽은 무조건적으로 안전을 기원해야 하기 때문에 당연한 조치이다.

그러므로 꼭 코드가 노출되지 않게 감추자,

 

때문에 본인의 사이트의 코드를 보호하도록 하고자 적용했던 과정을 작성한 것이다.

 

---

 

 

React & windows 기준 
소스 코드를 안 보이게 하는 설정 방법

 

 

매우 간단하다.

 

package.json 파일을 수정한다.

 

"scripts" 에서 

"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build", 

를 추가해보자

 

요로케 하면 끝. 

 

 

잘 되었나 확인해보자.

 

음.. good

 

 

주의점

 

번들된 코드 자체를 숨기는 것이 아니라, 번들된 코드와 원본 소스 코드 간의 매핑을 제거함으로써 소스 코드를 간접적으로 보호하는 방법임.

 

고로, 완전한 보안을 위해서는 추가적인 조치가 필요하다.