Sec-Fetch-ModeSec-Fetch-Mode는 브라우저가 자동으로 붙이는 Fetch Metadata 헤더로, 요청의 모드(문서 탐색인지, CORS fetch인지, no-cors 리소스 로드인지, WebSocket인지)를 알려 줍니다. Sec-Fetch-Site·Dest와 함께 서버가 요청의 성격을 정확히 파악하도록 돕습니다.
값 navigate는 최상위 문서 탐색(사용자가 페이지로 이동)을 뜻하고, cors/no-cors/same-origin은 fetch()의 mode 옵션과 대응하는 하위 리소스 요청, websocket은 WebSocket 핸드셰이크입니다. 이 헤더 역시 브라우저가 관리하는 금지된 헤더라 위조되지 않습니다.
리소스 격리 정책에서 유용한 신호입니다. 예를 들어 HTML 문서를 반환하는 엔드포인트는 정상적으로 navigate 요청으로 접근되어야 하는데, 만약 cross-site + no-cors로 <img>·<script>처럼 로드되려는 요청이라면 XSSI(스크립트로서의 오독)나 정보 유출 시도일 수 있어 차단 대상이 됩니다.
권장 패턴은 Sec-Fetch-Site로 출처 관계를, Sec-Fetch-Mode로 '문서 탐색 여부'를, Sec-Fetch-Dest로 '어떻게 쓰일 리소스인지'를 종합해 규칙을 세우는 것입니다. 예: cross-site 요청은 오직 navigate 모드의 document 목적일 때만 허용하고 나머지는 거부.
Sec-Fetch-Mode: <cors | no-cors | same-origin | navigate | websocket>e.g. Sec-Fetch-Mode: navigate
navigate | 최상위 문서 탐색(주소창 이동·링크 클릭 등). |
cors | CORS 규칙을 따르는 교차 출처 fetch/XHR 요청. |
no-cors | 이미지·스크립트 등 no-cors로 로드되는 하위 리소스 요청. |
same-origin | 동일 오리진으로 제한된 요청. |
websocket | WebSocket 연결 수립 요청. |