인프런 커뮤니티 질문&답변
작성한 질문수
이미지 업로드 API - graphql postman uploadFile 시 headers 문제
해결된 질문
작성
·
1.4K
위와 같이 CSRF 오류가 발생 합니다. 구글후 headers에 하기 값을 추가하니 문제 없네요. 
원인에 대해서 쉽게 설명좀 부탁 드립니다. :)답변 2
1
안녕하세요! Walter님!
해당 문제는 CORS시 발생할 수 있는 CSRF 공격과 관련된 내용입니다!
앞서, CORS 수업을 수강 하셨다는 전제 하에 답변을 드리겠습니다^^
CORS에서 발생할 수 있는 CSRF 공격을 방어하기 위해 진행됐던 규칙이 있었죠!
진짜 요청이 날라가기 전에, 먼저 preflight 요청이 날라갔었죠!
"나 너한테 요청 보내도 돼??!"
이후에 보내도 괜찮다는 응답을 받고 나서, 진짜 요청을 보냈답니다.
하지만, 간혹 preflight 요청을 보내지 않고 다이렉트로 요청을 전송하는 경우도 있는데요,
아주 "간단한 요청"의 경우가 그렇습니다. 말 그대로, Simple Request 라고 불러요!
그러면, 언제 Simple Request가 될 수 있는가?!
여러 상황들이 있을 수 있지만, 대표적으로 요청 header 부분이 아래와 같은 경우가 그렇습니다.
Content-Type: application/x-www-form-urlencoded
Content-Type: multipart/form-data
Content-Type: text/plain
현재 이미지 수업은, 이미지 파일을 전송하는 상황이기에 Content-Type이 multipart/form-data로 되어있는 것 같네요!
따라서 Simple Request 에 해당할 수 있어, preflight 요청이 전송되지 않아 CSRF 공격에 위험할 수 있다는 뜻으로 해석됩니다!
해당 문제를 해결하기 위한 3가지 방법이 있다고 위 postman에서 에러 메시지로 알려주고 있어요!
에러 부분을 잘 읽어보시면 아래와 같습니다!
Content-Type: application/x-www-form-urlencoded 또는 multipart/form-data 또는 text/plain 말고 다른걸 넣으세요! 그러면 SimpleRequest 가 아니게 되므로 preflight이 날라갈 수 있습니다!
header에 apollo-require-preflight을 넣으세요. 그러면 preflight가 날라갈 수 있습니다!
header에 x-apollo-operation-name을 넣으세요.
위 1번으로 보아, Content-Type에 application/json 등을 넣으면 문제가 해결될 수 있겠어요.
하지만, 우리는 이미지 전송을 하고 있으니 multipart/form-data를 넣어주셔야겠죠?!
그래서 2번 또는 3번 둘 중에 아무거나 하나를 넣으시면 문제가 해결 되신답니다!
Walter님은 apollo-require-preflight을 넣으셨지만, x-apollo-operation-name을 넣으셔도 동일하게 해결되세요!
더 자세한 설명은, apollo-docs를 참고해 보세요!
https://www.apollographql.com/docs/router/configuration/csrf/
감사합니다!
0
