CSP(Content Security Policy)

팀에서 만들고 있던 API를 firefox 브라우저의 콘솔을 통해서 테스트를 하려 했더니 CSP를 마주하게 됐습니다.

>> fetch("http://xx.xxx.xxx.xxx:8000/api/endpoint", {method:"POST"});
Content Security Policy: 페이지 설정에 의해 리소스 로드가 차단됨: http://xx.xxx.xxx.xxx:8000/api/endpoint ("connect-src)

학부생으로 살면서 처음으로 겪었고, 팀원들도 다 처음 겪는 상황이었어서 CSP가 뭔지 이해하는 것부터 시작했습니다.

• CSP: 웹 보안 정책 중 하나로, 웹 페이지에 악성 스크립트를 삽입하는 공격 기법을 막기 위해 사용

위 설명에 따르면 브라우저 콘솔에서 실행한 저 코드가 악성 스크립트를 삽입한 공격 기법과 같은 것으로 인식해서 막았다는 이야기가 됩니다. 하지만 겨우 브라우저 콘솔에서 보낸 게 악성으로 인식했다는 게 이해가 되지 않아서 멘토님께 도움을 청했습니다.

 

멘토님의 설명을 정말 간단하게 요약하면 아래와 같이 정리됩니다.

현재 너희 팀의 서버는 AWS Lightsale에 올려져 있다. 이런 클라우드 환경에서는 브라우저 콘솔에서 JS 언어를 사용해 API를 요청하는 것을 비정상적인 요청으로 판단해 막는다. 생각해 보자. 어느 일반 유저가 API 요청을 하기 위해 일부러 브라우저의 콘솔을 열어서 직접 요청하겠는가? 일반 유저라면 웹 또는 앱 화면에 구성된 버튼 등을 누르거나 키보드 키를 입력하는 것을 통해 간접적으로 요청을 한다.

멘토님의 이러한 말을 들으니 어찌 보면 막는 게 당연하다고 생각이 들었습니다.

 

그리고 멘토님은 Postman 등의 도구를 사용해 API 테스트를 다시 해보고 그래도 안 되면 로컬 환경에서부터 다시 코드를 뜯어가며 봐야 한다고 해결 방향을 제시해 주셨습니다. 멘토님의 조언대로 Postman을 사용해 API 요청을 해봤더니 응답이 제대로 온 것을 확인했습니다. 다행히 CSP에 대한 해결을 할 수 있었습니다.

참고 자료

CSP란 무엇인가: https://w01fgang.tistory.com/147

SOP, CORS, CSP 개념과 우회방법(Concept & Bypass)