웹 사이트 동작 원리
1) 현재 호스팅 서버에 프로젝트 업로드
2) 서버는 사용자가 요청하면 브라우저에 응답(html, css, js)
- 서버는 파일만 주고 받아서 연산, 컴퓨팅 기능은 존재하지 않음
3) 검색을 통해 OMDb API 서버에 영화 정보 요청
- 사용자가 호스팅 서버에서 영화정보를 가져오는 게 아니라, 따로 호스팅 서버를 통해서 받은 JS 코드를 통해 OMDb API 서버에 직접 요청
4) OMDb API에서 json 응답 -> 문제 발생!!!
- OMDb API가 자신이 가지고 있는 DB에서 영화 정보를 추려서 다시 사용자에게 우리가 볼 수 있는 JSON 포맷으로 응답
문제 발생 과정
1) 호스팅 서버의 index.html 파일 전달
- Vercel, Netlify와 같은 호스팅 서버에서 npm run buid로 생성된 dist 폴터를 가지고 있다가, 사용자가 그 페이지에 접근하면 dist 폴더의 index.html 파일 전달
2) 사용자는 index.html에 연결된 css, js를 호스팅 서버를 통해 추가적으로 더 가져옴
3) 영화 정보를 직접 요청할 수 있는데 그 정보에 api key 인증정보가 포함되어있음
4) 호스팅 서버가 사용자에게 api key 포함해서 코드를 넘겨줌
-> 사용자가 브라우저에서 OMDb API 서버와 통신이 직접 가능해짐
5) 해킹될 수 있는 환경에 노출
-> 접속하는 모든 사용자가 인증정보를 하나씩 다 갖고 있는 구조라, 그 중에서 보안이 취약한 특정 사용자를 해킹
6) 해커가 api key를 가지고, 본인임을 숨기면서 OMDb API 서버에서 영화정보 요청
해결 방법
사용자 <-> OMDb API 서버 통신 과정에 Serverless Functions(컴퓨팅 서버는 보안관련 정보 처리) 사용
-> api key 인증정보를 가지고 있다가 사용자가 영화정보를 요청하면 가지고 있는 인증 키로 직접 OMDb API 서버와 소통
-> 서버에서 가져온 결과를 사용자에게 JSON 포맷으로 응답
'Web' 카테고리의 다른 글
| [Web] 웹앱의 동작 원리 (0) | 2023.12.26 |
|---|
