[메타마스크] React 메타마스크 앱 브라우저 구동 테스트

간단하게 메타마스크 내에서 굴러가는 부분을 구현하기 위해서 React로 해당 부분을 구현해보았다.

목적: 로그인 값이라던가 프론트 세션스토리지와 쿠키값 소실 여부를 체크하기 위함.

 

로그인 인증방식에는 세션 기반과 토큰 기반으로 구성되는데,

php로 접속시 헤더값인 세션이 삭제되어 로그인 유지가 안되는 끊김이 생기는 문제가 발생하고 있었다.

 

그래서 React 세션스토리지 저장과 쿠키값 저장을 구현해보았더니 잘되네..

서버 통신해서 success를 주기로 구성해놨더니 그 값을 잘 받아와서 저장하더라.

 

이번에 기능을 구현하면서 발견한 점이 React에선 내부 통신이 안된는 것 같더라.

php는 내부 통신을 통해서 해당 Controllers에 접근하여 외부 통신을 다르게 하고,

호출시 아예 도메인을 분리하여 사용할 수 있는데,

React는 동일하게 여러 변수로 설정한 부분을 호출해 사용할 수 있으나
MVC패턴인 Controller을 호출 해당 컨트롤러에서 AJAX나 AXIOS로 호출하여,
프론트에서 통신을 훔쳐보기 어렵게 만들고 싶었다.
하지만, 내부 통신은 안되서 입력값을 Controller측에서 한번 더 검증하는 방식이 구현되지 않았다.

어차피 프론트의 입력값은 믿지 말고, 백엔드에서 무조건 소독하고 검증하는 방식을 쓰긴해야지만 안전장치를 최대한 만들어야 하는 부분에서 이건 좀 아쉬웠다.

 

이번에 기능 구현하면서 React api 모듈 분리를 구현된 소스코드를 보았다.

알고보니 위코드 동기였던 최준님이 멘토링했던 내용 ㅎㅎ

헤더 인증방식인 beareer로 되어 있고 나름 잘 만든 코드 ㅎㅎ

하지만, env는 해커들이 공격하기 쉬워서 나의 경우에는 env를 쓰지 않는다. config든 router, domain 등등 이름으로 쓰는 게 좋다.

해커들이 env파일 찾으려고 봇을 통한 스캔 공격인 get으로 .env, env 찍혔던 로그봤을때 공포란 ㅍ.ㅍ...

 

https://youtube.com/shorts/eSupixVEnME

메타마스크 리액트 기능 TEST