2024.04.27 html form CORS

 

0. 들어가며

안녕하세요. 이번에는 CORS 문제를 해결하면서 생긴 궁금증에 대해 이야기해보려고 합니다.

작업 중 CORS 오류를 만났고 해결 과정 중 Fetch API와 Form의 동작 결과가 다르다는 것을 알게 되었습니다.

지금부터는 왜 다르게 동작하는지에 대해 이야기하고자 합니다.

CORS문제나 SOP에 대해서는 설명하지 않습니다.

 

1. 기능

ex

fetch API를 사용했을 때의 동작입니다.

1. api.example.com에게 post 요청을 보냅니다.
   1. pre-flight 요청이 발생합니다.
   2. 서버에서는 access origin으로 example.com을 등록해 놨기에 요청이 성공합니다.
2. 서버로부터 302 응답이 옵니다.
3. Location에 정의된 페이지로 요청을 보냅니다
4. pre-flight 요청이 실패합니다.

 

2.  fetch API  VS Form 

처음 요청을 보낼 때는 fetch API를 통해서 요청을 보냈습니다.

서버에 요청을 보내고  요청이 성공하면 리다이렉트되는 동작이었습니다.

하지만 리다이렉트되는 요청이 CORS 오류를 뱉어내며 실패했습니다.

 

저는 fetch API가 post이후 redirect가 되는 기능에 문제가 있는 줄 알고 찾기 검색을 했습니다.

관련 글을 찾다 보니 다른 자원으로 되는 리다이렉트 응답은 origin이 null로 변경된다는 글을 발견했습니다.

 

수정 방법으로는 form을 사용하던지 직접 리다이렉트를 하는 것이었습니다.

같은 기능을 html의 form으로 작동시켜 보니 원하는 대로 동작을 했습니다.

 

 

저는 여기서 의문이 들었습니다.

form은 왜 fetch API와 다른 동작을 보여주는 것일까요? 

 

CORS는 사용자 정의 코드에서만 동작하는 정책이었습니다.

html form에서는 CORS 오류가 발생하지 않은 것입니다. 

cross origin의 read를 막기 위한 정책이고 form은 요청 이후에 페이지 이동이 되기 때문입니다.

 

 

 

 

 

 

 

 

 

 

 

 

1. 왜 null로 보내는가?
   1. If a cross-origin resource redirects to another resource at a new origin, the browser will set the value of the Origin header to null after redirecting. 
   2. https://w3c.github.io/webappsec-cors-for-developers/#:~:text=A%20Few%20Caveats%20for%20CORS%20Read%20Permissions
   3. https://stackoverflow.com/questions/42239643/when-do-browsers-send-the-origin-header-when-do-browsers-set-the-origin-to-null/42242802#42242802
2. form 방식은 왜 동작하는가?
   1. js가 아니라서? html 양식이 cors보다 이전 양식이라서? form은 페이지를 새로 띄운다
   2. https://stackoverflow.com/questions/69494027/access-control-allow-origin-equals-origin-but-the-browser-still-denies-access
   3. https://stackoverflow.com/questions/11423682/cross-domain-form-posting
   4. https://stackoverflow.com/questions/68675773/why-my-formdata-post-isnt-blocked-by-cors-policy
   5. https://security.stackexchange.com/questions/221770/cors-error-but-only-from-ajax-and-not-from-html-form

 

 

• https://security.stackexchange.com/questions/171711/how-does-setting-origin-to-null-in-a-redirected-cors-request-protect-against-a-c 
• https://umbum.dev/1056/