upco #5. 포스트맨 파일업로드 기능 작성 중 나타난 오류 (CSRF)

This operation has been blocked as a potential Cross-Site Request Forgery (CSRF)

 

해당 오류는 포스트맨에서 프로필 사진 업로드 기능을 만들던 중 나타난 오류다.

 

이 오류에 대해서는 이틀 쯤 고민했는데 처음에는 내 코드 자체에 문제가 있는 줄 알았다.

(심지어 콘솔에서 error를 찍어두어도 error 메세지가 등장하지 않았다.)

이를 해결하기 위해 이전 수업 때 작성해두었던 코드를 옮겨 써보고,

타인의 컴퓨터에도 내 소스 코드를 보내 업로드 시켜봐도 같은 문제가 등장할 뿐이었다.

그러던 중 구글에서도 정보를 찾다가 아래와 같은 사이트를 발견했다.

https://www.apollographql.com/docs/router/configuration/csrf/

Configuring CSRF (Cross-Site Request Forgery) prevention in the Apollo Router

 

 

이는 Cross-Site Request Forgery(웹 보안 공격)와 연관된 문제로, 

인증된 사용자의 권한을 악용하여 악의적인 요청을 전송하는 공격에 대한 우려로 인해 반환되는 오류였고,

요청에 "무엇을" 할 건지 함께 담아 전송하면 해결이 가능하다고 한다.

(해당 포스트에서는 { X-Apollo-Opreation-Name : post || get } 을 키 밸류 값으로 넣으면 해결이 된다고 작성되어 있다.)

 

그리고, 포스트맨에서 해당 값을 적용해주니 문제가 해결되었다.

(생각보다 쉽게 해결되어 허망한 느낌ㅎㅎ)

 

타 프레임워크 언어같은 경우에는 위와 같은 상황을 방지하고자

CSRF 토큰을 발행하여 CSRF 공격에 대해 대응하지만, nestjs에서는 사용자가 직접 구현하거나 라이브러리를 사용해야 한다고 하니

다음에 다른 언어를 배우거든 기억하고 있으면 좋을 것 같다.