본문 바로가기
React

React 코드 난독화..

by JunsC 2024. 6. 9.
728x90

정보가 아주 중요해진 부분 코드까지도 보안적인 부분에서 허점이 있을 수 있다..

크롤링 경험이 있는 나에겐 아주 유용했다.. 개발자모드...

 

그래서 이러한 경험으로 인해 코드를 아예 보지 못하도록 하고 싶었다. 예전엔 javascript 로 했을때 js 파일 각각 난독화 사이트에서 난독화를 진행한 적이 있는데 .... 참...

 

리액트에서는 간단하게 package.json script 파일만 만져주면 바로 가능하다... 프로덕션 기준으로 적용이 된다.

 

https://velog.io/@hazel123/%EC%86%8C%EC%8A%A4-%EC%BD%94%EB%93%9C-%EB%82%9C%EB%8F%85%ED%99%94code-obfuscation

 

소스 코드 난독화(code obfuscation)

우선 코드난독화에 대하여 찾게 된 계기는 프로젝트로 웹사이트를 구현중 개발자 도구에서 Sources에서 일반적으로 빌드된 파일을 가지고 배포ㅆ을때 구현한 우리의 코드가 그냥 그대로 노출되

velog.io

 

 

 

 

 

 

일반적으로 개발자 모드로 홈페이지를 보면 코드들이 전부 다 보인다. 그래서 해킹당할 건덕지가 많이 보일 것이다. 그걸 숨기기 위해서 찾아보았다. 우선 난독화 부분이 제일 먼저 보였다. 일반적으로 자바스크립트를 해쉬값 난독화로 진행하여 서버에 업로드 하면 난독화 코드로 보인다

 

하지만 디버깅하는 우리에게도 보이질 않으니 힘들다.

 

근데 React 는 좀더 간편하게 뭔가 소스맵을 안보여주게 하는 기능이 있다하여 찾아본 것이다.

 

소스맵을 통해서 해당 자신의 코드를 숨길 수 있어서 좋긴 했지만 , 검색 엔진이 인식하기에는 안좋을 수 있다는 얘기가 있는데 맞는듯 하다//

 

장단점이 있는것 같다!

'React' 카테고리의 다른 글

React 무한 스크롤  (0) 2024.06.10
React 새로고침 데이터 저장  (1) 2024.06.09
React useMemo.. useCallback.. memo..  (1) 2024.06.09
React 파일 업로드  (0) 2024.06.09
React Proxy 에러  (0) 2024.06.09
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."