암호화 및 복호화로 경로 숨기기

문제점

우리 서비스는 유리병을 공유하고 편지를 주고받는 서비스이다. 하지만 링크가 너무 그대로 노출되는 문제가 있었다. 특정 사람에게만 응원받고 싶을 수도 있는데, 이렇게 되면 제3자가 링크의 숫자만 변경해서 유리병에 접근할 수도 있다.

 

즉 링크를 숨길 필요가 생겼다 그러기 위해 암호화 복호화를 이용했다. 원래는 사용자 정보를 서버에 보내기 전 보호하기 위해 사용한다고 한다.

 

하지만 그냥 링크를 쉽게 접근하지 못하게 하기 목적이기에, 단순하게 사용하기로 했다.

 

 

 

 

 

crypto-js를 통한 암호화,복호화 훅 생성

encrypt는 텍스트와 고유키를 넣으면 텍스트를 암호화 시켜주고, decrypt는 암호화된 텍스트와 고유키를 넣어주면 암호화된 텍스트를 복호화 시켜주는 커스텀 훅이다.

 

복호화에 실패할 때는 0을 리턴하게 했다. 

 

 

 

 

 

테스트

임시로 테스트를 해봤다.

 

 

 

텍스트 -> 암호화 -> 복호화 순으로 잘 되는 것을 확인할 수 있다.

 

 

 

 

 

적용

유리병을 눌렀을 때, 해당 유리병의 Id로 접근해야 한다. 그렇기에 유리병 Id를 encrypt를 통해 암호화시켰다.

 

이제 /BottleMain/16 경로가 아닌, /BottleMain/U2FsdGVkX1+~어쩌구~ 경로로 이동할 것이다.

 

 

 

/BottleMain/U2FsdGVkX1+~어쩌구~  경로로 이동 한 뒤, useParams를 통해 해당 값을 받아오고 복호화 시킨다. 

 

만약 복호화한 값이 0, 즉 복호화 시 오류가 생겼다면 바로 오류 페이지를 띄울 것이다. 

 

 

 

해당 값을 console.log로 찍어보면, 암호화된 값과 복호화된 값이 잘 출력되는 것을 확인할 수 있다. 이렇게 마무리되나 싶었지만..

 

 

 

 

 

오류 발견!

~~ 2FsdGVkX1/+AORBw1Q7wAw~~ 

 

다음과 같이 암호화된 값에 슬래시(/)가 들어가면 경로로 인지가 되어서, 유리병 페이지가 아닌, NotFound 페이지로 이동이 되었다. 이를 위해 Base64 인코딩을 해야 한다. 

 

 

 

- Base64란

“컴퓨터 분야에서 쓰이는 Base 64 란 6비트 이진 데이터를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다.”  - 위키백과-

 

 

 

암호화된 텍스트를 Base64 인코딩을 하기 위해 btoa 메서드와 atob 메서드를 이용한다. btoa()는 이진 문자열을 Base64로 인코딩한 ASCII문자열을 생성하고, atob는 Base64 인코딩 된 문자열 데이터를 디코딩한다.

 

 

 

이제는 암호화된 경로에 슬래시(/)가 들어갈 일이 없기에, 오류 없이 잘 실행될 것이다.